[jQuery] Galleria Plugin: Initial image

Question

Hi, i've got 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 no avail.

any ideas ?

Thanks in advance.

Answer 1

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 2

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 3

I think the 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 witch can accomplish the task. I call it onload.

$.galleria.activate( _src );

where _src is the image url

Answer 4

This worked very well for me.

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