Question

我有以下代码使Fancybox能够使用jQuery Ad-Gallery插件 - 广告库显示缩略图和主图像，这些图像在选择不同的缩略图时会发生变化。

目前，单击较大的图像会触发fancybox，但无法浏览图库中的其他图像。我尝试过添加一个类并依赖于库中的所有图像，但这没有做任何事情？我认为因为当点击缩略图时，只会从图库中加载较大的图像，所以fancybox可能找不到要显示的下一个图像？有没有办法强制fancybox加载图库/缩略图列表中的下一个图像？

提前致谢

<div id="gallery" class="ad-gallery">
<div class="ad-image-wrapper"></div>
<div class="ad-nav">
<div class="ad-thumbs">

<ul class="ad-thumb-list">
<li class="list-thumb">
<a href="/image1.jpg" class="fancybox" rel="gallery">
<img src="/image1.jpg"  alt="" class="image" />
</a>
</li>

<li class="list-thumb">
<a href="/image2.jpg" class="fancybox" rel="gallery">
<img src="/image2.jpg"  alt="" class="image" />
</a>
</li>

</ul></div></div></div>

<script type="text/javascript">
$(function() {
var galleries = $('.ad-gallery').adGallery();
});
$(document).ready(function(){

$(document).on("click", ".ad-image", 
 function()  
{
$.fancybox.open({
href : $(this).find("img").attr("src"),
closeBtn: false,
closeClick : true,
openEffect : 'elastic',
openSpeed  : 450,
closeEffect : 'elastic',
closeSpeed  : 450,
});
});
});
</script>

Answer 1

您可能需要在adGallery和/或fancybox之外手动构建fancybox库。然后从adGallery回调中激发fancybox，如：

var fancyGallery = []; // define gallery group
jQuery(function ($) {
    // create fancybox gallery
    $(".ad-thumb-list").find("a").each(function (i) {
        // create each item of the gallery
        var item = {
            href: this.href,
            // if captions are from alt attribute in img tag
            title: typeof $(this).find("img").attr("alt") !== "undefined" ? $(this).find("img").attr("alt") : ""
            // optionally, if captions are from title attribute in a tag
            // title : this.title ? this.title : ""
        };
        // push each item into the gallery group
        fancyGallery.push(item);
    }); // each
    $('.ad-gallery').adGallery({
        callbacks: {
            afterImageVisible: function () {
                // open fancybox programmatically once the adGallery is ready
                var fancyIndex = this.current_index; // matches adGallery active thumb 
                $(".ad-image").on("click", function () {
                    $.fancybox(fancyGallery, {
                        // starts gallery from active thumb
                        index: fancyIndex,
                        // optional : title inside fancybox
                        helpers: {
                            title: {
                                type: "inside"
                            }
                        }
                    }); // fancybox
                    return false;
                }); // on click
            } // afterImageVisible
        } // callbacks
    }); // adGallery
}); // ready

注意：

我们需要fancybox index API选项来选择图库从哪个元素开始
.on()需要jQuery v1.7 +
此代码适用于fancybox v2.x.使用适用于v1.3.4

参见 JSFIDDLE

广告画廊Fancybox

1 个答案: