Galleria Plugin: Image initiale

Question

J'ai une galerie "Galleria" mise en place.

Galleria

Comment définissez-vous l'image initiale, celle qui apparaît lorsque vous chargez la page. J'ai essayé de régler un li.active, et en cours d'exécution $.gallleria.next() mais en vain.

Des idées?

Answer 1

Avez-vous essayé? Si vous avez ce modèle, vous pouvez l'avoir en ajoutant classe active dans votre élément li .. comme le troisième élément li ci-dessous ..

<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

La réponse de Reigel est correcte - vous devez ajouter la classe « active » à un li. Cela a fonctionné pour moi, mais (FYI) j'ai toujours mis la classe dans le balisage lui-même - pas dynamiquement en utilisant JS. De plus, rappelez-vous que Galleria peut être configuré pour mémoriser la dernière image de l'utilisateur avec un cookie. Si vous cherchez une image différente de ce que vous attendez, c'est peut-être la raison.

Answer 3

Je pense que le <li class="active"> est censé fonctionner, et c'est la première chose que j'ai essayé, cependant, pour une raison quelconque, il ne fonctionne pas. Mais j'ai trouvé une méthode publique dans le code Galleria qui peut accomplir la tâche. Je l'appelle onload.

$.galleria.activate(_src); 

où _src est l'URL de l'image.

Answer 4

Cela a très bien fonctionné pour moi.

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

Answer 5

L'option « show » fera, il vous suffit de trouver l'indice de base 0 de l'image que vous souhaitez voir apparaître sur la charge: http://galleria.io/docs/options/show/

Answer 6

Si vous voulez dynamicly changer la première image après que la page a été chargée, vous pouvez utiliser:

Galleria.configure("show", index);