Galleria Plugin: Initial image

Question

I have a "Galleria" gallery set up.

Galleria

How do you set the initial image, the one that is displayed when you load the page. I tried setting a li.active, and running $.gallleria.next() but to no avail.

Any ideas?

Answer 1

I think the <li class="active"> is supposed to work, and that's the first thing I tried, however, for some reason it doesn't. But I found a public method in the Galleria code which can accomplish the task. I call it onload.

$.galleria.activate( _src );

where _src is the image url.

Answer 2

Have you tried this? If you have this pattern, you can have it by adding class active in your li element.. like the third li element below..

 <ul class="gallery_demo_unstyled"> 
    <li><img src="img/flowing-rock.jpg" alt="Flowing Rock" title="Flowing Rock Caption"></li> 
    <li><img src="img/stones.jpg" alt="Stones" title="Stones - from Apple images"></li> 
    <li class="active"><img src="img/grass-blades.jpg" alt="Grass Blades" title="Apple nature desktop images"></li> 
    <li><img src="img/ladybug.jpg" alt="Ladybug" title="Ut rutrum, lectus eu pulvinar elementum, lacus urna vestibulum ipsum"></li> 
    <li><img src="img/lightning.jpg" alt="Lightning" title="Black &amp; White"></li> 
    <li><img src="img/lotus.jpg" alt="Lotus" title="Fusce quam mi, sagittis nec, adipiscing at, sodales quis"></li> 
    <li><img src="img/mojave.jpg" alt="Mojave" title="Suspendisse volutpat posuere dui. Suspendisse sit amet lorem et risus faucibus pellentesque."></li> 
    <li><img src="img/pier.jpg" alt="Pier" title="Proin erat nisi"></li> 
    <li><img src="img/sea-mist.jpg" alt="Sea Mist" title="Caption text from title"></li> 
</ul> 

Answer 3

The 'show' option will do this, you just need to figure out the 0-based index of the image you want to appear on load: http://galleria.io/docs/options/show/

Answer 4

Reigel's answer is correct -- you need to add the 'active' class to an li. It's worked for me, but (FYI) I've always set the class in the markup itself -- not dynamically using JS.

Also, remember that Galleria can be configured to remember the user's last image with a cookie. If you're seeking a different image from what you expect, this may be the reason.

Answer 5

If you want to dynamicly change the initial image after the page has been loaded, you can use:

Galleria.configure("show", index);

Answer 6

This worked very well for me.

var imageurl = $(".gallery_demo_unstyled li:first img").attr("src");
$.galleria.activate(imageurl);