Galleria Plugin: Initial image

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?

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.

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> 

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.

This worked very well for me.

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

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/

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

Galleria.configure("show", index);