Question

码

<a rel="gallery1" href="{link to image}">Image 1</a>
<a rel="gallery1" href="{link to image}">Image 2</a>
<a rel="gallery1" href="{link to image}">Image 3</a>

<a rel="gallery2" href="{link to image}">Image 1</a>
<a rel="gallery2" href="{link to image}">Image 2</a>
<a rel="gallery2" href="{link to image}">Image 3</a>

因此，当您到达gallery1的末尾时，会出现另一个导航箭头，允许您转到gallery2

Answer 1

令人费解，但嘿它有效

$('.photo').fancybox({
    overlayColor:"#24201D",
    overlayOpacity:0.7,
    cyclic:true,
    titleFormat:function(title, currentArray, currentIndex, currentOpts){

        var html = '';

        // description
        var description = currentArray[currentIndex].name;
        if(description!=undefined)
        {
            html += unescape(description);
        }

        // position
        var index = currentIndex+1;
        var total = currentArray.length;
        var style = currentArray[currentIndex].className;
        var styles = style.split(' ');
        for(i=0;i<styles.length;i++)
        {
            if(styles[i].indexOf('gallery')>-1)
            {
                var gallery = $('.'+styles[i]);
                total = gallery.length;
                continue;
            }
            if(styles[i].indexOf('image')>-1)
            {
                index = styles[i].replace('image','') * 1 + 1;
                continue;
            }
        }

        if(index==total)
            $('#fancybox-right-ico').addClass('next');
        else
            $('#fancybox-right-ico').removeClass('next');

        if(index==1)
            $('#fancybox-left-ico').addClass('prev');
        else
            $('#fancybox-left-ico').removeClass('prev');


        html += '<div class="of">'+index + ' of '+ total +'</div>';
        return html;
    }

});

HTML

<a rel="gallery" class="photo image1 gallery1" href="{link to image}">Image 1</a>
<a rel="gallery" class="photo image2 gallery1" href="{link to image}">Image 2</a>
<a rel="gallery" class="photo image3 gallery1" href="{link to image}">Image 3</a>

<a rel="gallery" class="photo image1 gallery2" href="{link to image}">Image 1</a>
<a rel="gallery" class="photo image2 gallery2" href="{link to image}">Image 2</a>
<a rel="gallery" class="photo image3 gallery2" href="{link to image}">Image 3</a>

是否可以使用jquery fancybox在多个图库之间导航？

1 个答案: