How to insert array of images into swipebox gallery?

Question

This is my html code:

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

I have big image and under big image there are 3 thumbnails. If user click second thumbnail, big image has to changes to second data-bigimage. And swipebox link has to change to second data-original image. The same for other images.

This is solution for switching images:

    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);
    });
});

Here is the code which pushes images into swipebox array:

$(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;
}

});

The problem is that Swipebox gallery always starting swipe from first image. How can I change above code, that it shell swipe from selected image?

Answer 1

You should use initialIndexOnArray option available in swipebox:

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

Full list of 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>