Question

这是我的HTML代码：

    <div class="profile-gallery">
        <div class="profile-gallery_top js-bigImg">
            <a href="img/bigImg1.jpg" class="swipebox">
                <img class="profile-bigImage" src="img/bigImg.jpg" alt=""/>
            </a>
        </div>
        <ul class="profile-thumbs">
            <li><img src="img/imgThmubs1.jpg" data-bigimage="img/bigImg1.jpg" data-original="img/origImg1.jpg" alt=""/></li>
            <li><img src="img/imgThmubs2.jpg" data-bigimage="img/bigImg2.jpg" data-original="img/origImg2.jpg" alt=""/></li>
            <li><img src="img/imgThmubs3.jpg" data-bigimage="img/bigImg3.jpg" data-original="img/origImg3.jpg" alt=""/></li>
        </ul>
</div>

我有大图像，在大图像下有3个缩略图。如果用户单击第二个缩略图，则大图像必须更改为第二个data-bigimage。并且swipebox链接必须更改为第二个数据原始图像。其他图像也一样。

这是切换图像的解决方案：

    jQuery(document).ready(function( $ ) {
    $('.profile-thumbs li').click(function(){
        var imageurl = $(this).children('img').data('bigimage');
        var imageorig = $(this).children('img').data('original');
        $('.profile-bigImage').attr("src", imageurl);
        $('.swipebox').attr("href", imageorig);
    });
});

以下是将图像推入swipebox数组的代码：

$(function () {
new App();

$('.swipebox').click(function(e) {
    $.swipebox(imgs());
    e.preventDefault();
});

function imgs() {
    var th = $('.profile-thumbs li');
    var arr = [];

    for(var i = 0; i < th.length; i++) {
        var obj = {};
        var current = $(th[i]).find('img').attr('data-original');
        obj['href'] = current;
        arr.push(obj);
    }
    return arr;
}

}）;

问题是Swipebox图库总是从第一张图片开始滑动。如何更改上面的代码，它是否从所选图像中滑动？

Answer 1

您应该使用swipebox中提供的initialIndexOnArray选项：

http://brutaldesign.github.io/swipebox/#options

完整的选项列表：

<script type="text/javascript">
;( function( $ ) {

    $( '.swipebox' ).swipebox( {
        useCSS : true, // false will force the use of jQuery for animations
        useSVG : true, // false to force the use of png for buttons
        initialIndexOnArray : 0, // which image index to init when a array is passed
        hideCloseButtonOnMobile : false, // true will hide the close button on mobile devices
        hideBarsDelay : 3000, // delay before hiding bars on desktop
        videoMaxWidth : 1140, // videos max width
        beforeOpen: function() {}, // called before opening
        afterOpen: null, // called after opening
        afterClose: function() {} // called after closing
        loopAtEnd: false // true will return to the first image after the last image is reached
    } );

} )( jQuery );
</script>

如何将图像数组插入swipebox库？

1 个答案: