いくつかのトピックに関する私たちの専門知識を表示するページがあります。各トピックには、ヘッダー、画像、短いリストが含まれています。ページ内で、ユーザーはすべてのトピックのトピック サムネイル画像とヘッダーを確認できます。また、強調表示された 1 つのトピック全体 (ヘッダー、完全な画像、およびリスト) も表示されます。強調表示されたトピックは繰り返され、ユーザーはトピック ヘッダーを移動して、強調表示されたトピックを変更できます。各トピックの html は、パーシャルを使用して Rails で生成されるため、各トピックは個別のファイルとして管理されます。
私は実用的な解決策を持っていますが、いくつかの問題があります。 ここでフィドル
時間をありがとう！
- CSS と HTML の問題... 6 つのトピックを今のようにリストにするか、6 つの div にする必要がありますか? 右と左の列が同じように反応しません: 最上位の div の幅 (.showScene を 680 から 1000px の間で) を変更すると、右の列のテキストが右の画像に揃えられるのではなく、中央に配置されていることがわかります。CSS はどのように見えるべきですか?
リストに関する私の一般的な戦略は、この場合、:nth-child セクターを使用して、左右のフロートを持つ列を作成および制御することです。 - 私の「サムネイル」は CSS を使用してサイズを変更する大きな画像ですが、大丈夫ですか、それとも本当にサムネイル サイズの画像を作成する必要がありますか? それぞれの大きな画像がページに表示されるのに、なぜもっとたくさんのサムネイルをロードするのでしょうか? サムネイルを使用した場合、大きな画像でトピックに追加する必要がありますか?
- jQuery .clone() を使用してコンテンツを強調表示されたペインにコピーしていますが、それが最善の方法ですか? 複製は嫌いですが、クローンを作成しないと、ヘッダーとサムネイルが「移動」されます
CSS:
.showScene{width: 1000px; border: 2px solid black; height: 400px; position: absolute;}
#exp {
position: relative;
min-width: 700px;
height: 400px;
margin: 0px auto;
}
#exp > h1{
text-align: center;
font-weight: bold;
margin-top: 2px;
color: #669900;
-webkit-text-fill-color: white; /* Will override color (regardless of order) */
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #669900;
}
#exp > ul {
list-style-type: none;
padding:0px;
overflow: hidden;
/*width: 700px;*/
margin-top: -20px;
}
#exp > ul > li {
float:left;
width:30%;
height: 120px;
padding-top: 6px;
padding-bottom: 6px;
font-weight: bold;
font-size: .8em;
}
#exp > ul > li img{
width:30%;
vertical-align: middle;
}
#exp > ul > li:nth-child(odd){
margin-left: 3%;
}
#exp > ul > li:nth-child(odd) img{
padding-right:10px;
}
#exp > ul > li:nth-child(even){
float: right;
margin-right: 10%;
}
#exp > ul > li:nth-child(even) h1{
text-align: right;
}
#exp > ul > li:nth-child(even) img{
position: relative;
left: 95%;
}
.expSelected h1{
color: #669900;
}
#expPane .expSelected h1 {
color: black;
}
.expList ul li {
display:none;
}
.expList h1{
font-size: 1.25em;
display: inline;
line-height: 80px;
}
.expList img {
float: left;
vertical-align: top;
}
#expPane{
position: absolute;
top: 10%;
left:30%;
right: 30%;
height: 250px;
}
#expPane img{
height: 100px;
}
#expPane .expList{
width: 272px;
margin: auto;
}
#expPane .expList ul li{
display: list-item;
}
#expPane h1 {
display: block;
text-align: center;
}
#expPane img {
float:none;
text-align: center;
width: 100%;
height: 225px;
}
#expPane ul {
margin-left: 20px;
}
html:
<div class='sliderContent'>
<ul>
<li><div class='showScene'>
<div id='exp'>
<h1>Our Expertise</h1>
<ul>
<li><div class='expList topic1'>
<h1>Topic1 Header</h1>
<img src='http://3.bp.blogspot.com/-uq1xArFbmAE/T5GjNmF-c7I/AAAAAAAAGNY/oRT4dS0y6Ic/s1600/Cool-Pictures1.jpg'>
<ul>
<li>key1</li>
<li>key2</li>
<li>key3</li>
</ul>
</div>
</li>
<li><div class='expList topic2'>
<h1>Topic2 Header</h1>
<img src='http://2.bp.blogspot.com/-y_A2TCaEnZU/TxzbuvYiNhI/AAAAAAAAAZ4/fuMGkV3FEak/s1600/Cool.jpg'>
<ul>
<li>key1</li>
<li>key2</li>
<li>key3</li>
</ul>
</div>
</li>
<li><div class='expList topic3'>
<h1>Topic3 Header</h1>
<img src='http://www.remodelpros.com/spaw/uploads/images/mr-roof-smiling.png'>
<ul>
<li>key1</li>
<li>key2</li>
<li>key3</li>
</ul>
</div>
</li>
<li><div class='expList topic4'>
<h1>Topic4 Header</h1>
<img src='http://3.bp.blogspot.com/-uq1xArFbmAE/T5GjNmF-c7I/AAAAAAAAGNY/oRT4dS0y6Ic/s1600/Cool-Pictures1.jpg'>
<ul>
<li>key1</li>
<li>key2</li>
<li>key3</li>
</ul>
</div>
</li>
<li><div class='expList topic5'>
<h1>Topic5 Header</h1>
<img src='http://3.bp.blogspot.com/-uq1xArFbmAE/T5GjNmF-c7I/AAAAAAAAGNY/oRT4dS0y6Ic/s1600/Cool-Pictures1.jpg'>
<ul>
<li>key1</li>
<li>key2</li>
<li>key3</li>
</ul>
</div>
</li>
<li><div class='expList topic6'>
<h1>Topic6 Header</h1>
<img src='http://3.bp.blogspot.com/-uq1xArFbmAE/T5GjNmF-c7I/AAAAAAAAGNY/oRT4dS0y6Ic/s1600/Cool-Pictures1.jpg'>
<ul>
<li>key1</li>
<li>key2</li>
<li>key3</li>
</ul>
</div>
</li>
</ul>
<div id='expPane'></div>
</div>
</div>
</li>
</ul>
</div>
JS:
var actual = 1;
$(document).ready(function() {
/* get all 'src' */
links = $('#exp > ul > li > div');
/* set first image */
imgFirst(links);
/* iterate images */
startExp();
/* hover images */
imgHov();
});
/* set first image */
function imgFirst(links) {
$('#expPane').html($(links[0]).clone());
};
//set interval
function startExp(){
i = 0;
startExpVar = setInterval(function() {
imgIterate(links);
}, 3000);
}
//stop interval
function stopExp(){
clearInterval(startExpVar);
}
/* iterate images */
function imgIterate(links) {
$('#expPane').fadeOut('slow', function(){
++i;
if (i >= links.length){i = 0}
$('#expPane').html($(links[i]).clone()).fadeIn('slow');
});
};
/* hover images */
function imgHov() {
links.hover(function() {
var activeOne = $(this);
activeOne.addClass('expSelected');
stopExp();
$('#expPane').fadeOut('fast', function(){
$('#expPane').html(activeOne.clone()).fadeIn('fast');
});
}, function() {
imgIterate(links);
startExp();
$(this).removeClass('expSelected');
});
}