广告画廊 Fancybox

Question

我有以下代码可以启用FancyBox与JQuery Ad-Gallery插件一起使用 - 广告库显示缩略图和主图像，在选择不同的缩略图时更改。

目前，单击较大的图像会触发 fancybox，但无法浏览图库中的其他图像。我尝试向图库中的所有图像添加一个类和 rel 但这没有任何作用？我认为因为仅在单击缩略图时才从图库中加载较大的图像，所以可能 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 使用正确的 fancybox API 选项

见JSFIDDLE