Как вставить массив изображений в галерею swipebox?

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 миниатюры. Если пользователь нажмет второй миниатюру, большое изображение должно измениться во втором изображении. И ссылка 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

Вы должны использовать initialIndexOnArray опция доступна в swipebox:

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>