我有许多幻灯片显示:none。当您单击左侧的缩略图时,相应的幻灯片应该淡入。这适用于第一次单击,但在随后的单击时,图像不会加载。我的项目位于:http://newsinteractive.post-gazette.com/bridges/monongahela。
我做错了什么?
jquery的:
$('.thumb').click(function(){
var thisID = $(this).attr('id');
var str = thisID.split("-");
var thisbridge = str[0];
// SLIDESHOW COMPONENT
$.each($(".slideshowWrapper"), function(i, slideshowWrapper){
if ($(slideshowWrapper).attr('id') == 'ss' + thisbridge) {
//$(this).load( function() { $(this).fadeIn(300); });
$(this).fadeIn(300);
} else {
$(this).fadeOut('fast');
}
...
});
});
HTML: (一个缩略图的例子)
<div class="thumb" id="fortpitt-Thumb" >
<img src="img/fortpitt/thumbnail.jpg" />
<div class="thumbtitle">Fort Pitt</div>
</div>
(一个幻灯片的例子)
<!-- start fortpitt slideshow-->
<div class="slideshowWrapper" id="ssfortpitt">
<div class="slideshow" style="line-height:15px;">
<div class="slideshowTableOfContents"><div class="tableOfContentsNav leftNav"><</div><div class="tableOfContentsNav rightNav">></div><div style="clear:both"></div></div>
<div class="slideshowBox">
<div class="slideshowArrowBoxWrapper leftArrow">
<div class="slideshowArrowBox">
<i class="fa fa-arrow-circle-o-left"></i>
</div>
</div>
<div class="slideshowRunway">
<div class="slideshowImage">
<img src="img/fortpitt/frommtwashington.jpg" credit="Library of Congress" caption="This view from Mt. Washington about 1905 shows the first Point Bridge, built in 1876-77. See the <a href='http://www.post-gazette.com/news/transportation/2014/10/12/Fort-Pitt-Bridge-1' target='_blank'>Fort Pitt Bridge story</a>." />
<div class="credit">Library of Congress</div>
</div>
<div class="slideshowImage">
<img src="img/fortpitt/harpers.jpg" credit="Harper's Weekly" caption="The first Point Bridge is in the foreground of the 1892 engraving ''Pittsburg, Pennsylvania from Grand View Avenue'' by Charles Graham. See the <a href='http://www.post-gazette.com/news/transportation/2014/10/12/Fort-Pitt-Bridge-1' target='_blank'>Fort Pitt Bridge story</a>." />
<div class="credit">Harper's Weekly</div>
</div>
...
<div style="clear:both;"></div>
</div>
<div class="slideshowArrowBoxWrapper rightArrow">
<div class="slideshowArrowBox">
<i class="fa fa-arrow-circle-o-right"></i>
</div>
</div>
</div>
<div class="caption">Caption</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div> <!-- end slideshow-->
的CSS:
.slideshowWrapper
{
position:relative;
padding:20px 0px;
display: none;
}
.slideshow
{
/*width:1000px;*/
margin:auto;
}