一个相对简单的问题，虽然对我来说并不简单！
我需要在不使用大量不同页面的情况下换出内容。我需要为画廊做这个，它是缩略图。
这正是我的意思：
http://philipslightinfashion.co.uk/content/galleries_1
我确实在研究中看到了一些答案，但都使用了 JS 和其他东西。我不知道最简单的方法是什么，所以任何帮助表示赞赏。
问问题
88 次
3 回答
1
你可以看到那个帖子：http ://www.tripwiremagazine.com/2013/06/jquery-lightbox-plugins.html
有一些“灯箱”和基于 JS 的画廊的例子。
于 2013-10-30T10:58:54.280 回答
1
To resolve my issue:
Used Jquery to hide and show specific DIVs when a 'next' and 'prev' link is clicked.
<script>
$(document).ready(function(){
$(".galleryContent div").each(function(e) {
if (e != 0)
$(this).hide();
});
$("#next").click(function(){
if ($(".galleryContent div:visible").next().length != 0)
$(".galleryContent div:visible").next().show().prev().hide();
else {
$(".galleryContent div:visible").hide();
$(".galleryContent div:first").show();
}
return false;
});
$("#prev").click(function(){
if ($(".galleryContent div:visible").prev().length != 0)
$(".galleryContent div:visible").prev().show().next().hide();
else {
$(".galleryContent div:visible").hide();
$(".galleryContent div:last").show();
}
return false;
});
});
</script>
<div class="galleryContent">
<!---group 1--->
<div class="cls1">
<ul>
<li><a href="images/gallery/gallery_1/gallery_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_1/gallery_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
<li><a href="images/gallery/gallery_1/gallery_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_1/gallery_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
<li><a href="images/gallery/gallery_1/gallery_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_1/gallery_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
<li><a href="images/gallery/gallery_1/gallery_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_1/gallery_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
<li><a href="images/gallery/gallery_1/gallery_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_1/gallery_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
<li><a href="images/gallery/gallery_1/gallery_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_1/gallery_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
<li><a href="images/gallery/gallery_1/gallery_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_1/gallery_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
<li><a href="images/gallery/gallery_1/gallery_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_1/gallery_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
<li><a href="images/gallery/gallery_1/gallery_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_1/gallery_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
<li><a href="images/gallery/gallery_1/gallery_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_1/gallery_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
<li><a href="images/gallery/gallery_1/gallery_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_1/gallery_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
<li><a href="images/gallery/gallery_1/gallery_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_1/gallery_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
<li><a href="images/gallery/gallery_1/gallery_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_1/gallery_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
<li><a href="images/gallery/gallery_1/gallery_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_1/gallery_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
<li><a href="images/gallery/gallery_1/gallery_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_1/gallery_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
</ul>
</div>
<!---group 2--->
<div class="cls2">
<ul>
<li><a href="images/gallery/gallery2_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_2/gallery2_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
<li><a href="images/gallery/gallery2_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_2/gallery2_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
<li><a href="images/gallery/gallery2_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_2/gallery2_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
<li><a href="images/gallery/gallery2_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_2/gallery2_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
<li><a href="images/gallery/gallery2_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_2/gallery2_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
<li><a href="images/gallery/gallery2_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_2/gallery2_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
<li><a href="images/gallery/gallery2_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_2/gallery2_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
<li><a href="images/gallery/gallery2_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_2/gallery2_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
<li><a href="images/gallery/gallery2_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_2/gallery2_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
<li><a href="images/gallery/gallery2_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_2/gallery2_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
<li><a href="images/gallery/gallery2_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_2/gallery2_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
<li><a href="images/gallery/gallery2_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_2/gallery2_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
<li><a href="images/gallery/gallery2_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_2/gallery2_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
<li><a href="images/gallery/gallery2_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_2/gallery2_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
<li><a href="images/gallery/gallery2_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_2/gallery2_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
</ul>
</div>
于 2013-10-31T11:41:13.840 回答
0
您应该通过纯 JavaScript 或 jQuery（或其他框架）使用 AJAX。看看这个：jQuery Image Gallery/
于 2013-10-30T10:48:58.917 回答