Galleria: тигр, какое изображение показывать при загрузке или по клику

Question

Я использую плагин Galleria для отображения списка изображений в существующей разметке, которые нельзя изменить.

При нажатии на изображение я загружаю лайтбокс, а внутри лайтбокса у меня есть Галерея изображений.

То, что мне нужно, - это индексировать какое изображение было нажато в начальной исходной разметке, а затем вызвать то же самое индексное изображение в галерее или загрузить его в качестве активного изображения на начальном этапе.

Запуск или установка начального слайда для загрузки - это где у меня проблемы? Будем признательны любому совету.

Разметка похожа на ниже:

<div class="productSlides">
<img alt="Conti Melamine Desk with Sharknose Edge.jpg" src="/Images/test1.jpg" />
<img alt="Conti-Melamine-Desk-with-Sharknose-Edge-FV.jpg" src="/Images/test2.jpg" />
<img alt="Conti-Glass-Desk-FV.jpg" src="/Images/test3.jpg" />
</div>
<div id="galleria"></div> 

<script type="text/javascript">
$( document ).ready(function() {
//Need to have two sets of images. The inital markup that can be clicked, and the same    images added to a Galleria tag to render the gallery.
$('.productSlides').clone().appendTo($('#galleria'));
});

Galleria.loadTheme('/UserUploadedJS/galleria.classic.js');
Galleria.run('#galleria', {

});

$( document ).ready(function() {

    $('.productSlides img').on('click', function(){ 
        var url = "#galleria"; // sets the link url as the target div of the lightbox
        $(this).colorbox({
             inline:true, // so it knows that it's looking for an internal href
             href:url, // tells it which content to show
             width:"70%",
             onOpen:function(){ //triggers a callback when the lightbox opens
                $(url).show(); //when the lightbox opens, show the content div
             },
             onCleanup:function(){
                $(url).hide(); //hides the content div when the lightbox closes
             }
        }); 
        var index = $(this).parent().find("img").index(this); //indexes the image cliked
        Galleria.ready(function() { //Attempt to show the same indexed image in the galleria
            var gallery = this;
            gallery.show(index);
        });



    });  


});
</script>

Answer 1

Я отредактировал скрипт, чтобы получить то, что я хочу. Может быть, это может быть полезно для вас тоже.

Я знаю, что уже слишком поздно, чтобы ответить на этот вопрос, но это может помочь другим.

В моем случае источник данных galleria.io обновляется для добавления дополнительных изображений по запросу. Затем я делаю этот вызов:

Galleria.get (0).load (dataUpdated, undefined, {show: YOUR_POSITION});

load : function( source, selector, config ) {

   //...

    // use the dataConfig set by option
    config = config || o.dataConfig;

    // Edited: 20150516 - Added by tuliocacalazans
    // Override show position
    // Added in line 3840, script version: galleria-1.4.2.js
    if (typeof config.show === 'number') {
        o.show = config.show; // o = this._options
    }

    //...
}

Answer 2

Прежде всего, получите выбранный индекс изображения галереи в готовом событии галереи, как

Galleria.loadTheme('/UserUploadedJS/galleria.classic.js');
Galleria.run('#galleria', 
{
   show: selectedIndex
});

var selectedIndex=0;
 Galleria.ready(function() { //Attempt to show the same indexed image in the galleria
            var gallery = this;
           selectedIndex=index;
            //gallery.show(index);
        });

Я проверил код, он работает нормально в конце, добавьте уже используемый скрипт для получения индекса.