Galleria: tigger which image to show onload or on click

Question

I am using the Galleria plugin to display a list of images in existing markup that can't be changed.

On click of an image, I am loading a lightbox, and inside the lightbox I have a Galleria of the images.

What I need is to index what image was clicked in the inital old markup, and then trigger the same index image in the galleria, or have it load as the active image initially.

The triggering or setting the inital slide to load is where I am having problems? Any advice would be great.

Markup similar to below:

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

score 0 · Answer 1 · edited Jun 06 '14 at 12:04

First of all Get the selected image index of the galleria in galleria's ready event like

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

I have tested the code its working fine at my end, add your already using script for getting index.

score 0 · Answer 2 · answered May 16 '15 at 15:42

I edited the script to get what I want. Maybe it can be useful to you too.

I know that's too late to answer this question, but it can help others.

In my case, the galleria.io datasource is updated to add more images on demand. Then I do this call:

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
    }

    //...
}

Galleria: tigger which image to show onload or on click

2 Answers2