Question

一个相对简单的问题虽然对我来说并不简单！

我需要在不使用不同页面的情况下换出内容。我需要为一个画廊和它的缩略图这样做。

这正是我的意思：

http://philipslightinfashion.co.uk/content/galleries_1

我确实在研究中看到了一些答案，但都使用了JS和其他东西。我不知道最简单的方法是什么，所以任何帮助都会受到赞赏。

Answer 1

您可以看到帖子：http://www.tripwiremagazine.com/2013/06/jquery-lightbox-plugins.html

有一些“灯箱”和基于JS的画廊的例子。

Answer 2

解决我的问题：

当点击“下一个”和“上一页”链接时，使用Jquery隐藏和显示特定的DIV。

<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>

Answer 3

您应该通过纯JavaScript或jQuery（或其他框架）使用AJAX。看看这个：jQuery Image Gallery/

内部交换图库和HTML，无需加载页面

3 个答案: