Image/video Gallery meerdere op pagina

[pepernoot]

Beste lezer,

Ik ben op zoek naar een Image/video gallery script. Deze moet Thumbnails bevatten en een simpele navigatie (twee pijlen).
Het enige probleem is dat ik meerdere Galleries op één pagina wil en ik kan geen scripts/plugins vinden die dit kunnen.

Het gaat om een groot aantal Galleries dus een goed en duidelijk systeem is wenselijk.
Kan iemand mij hierbij helpen?

Als het gebruik van jQuery of PHP dit gemakkelijker maakt dan is dit voor mij geen enkel probleem!

 

[Naarling]

Lightbox2 kan dat, als ik tenmisnte goed begrepen heb wat je bedoelt.

 

[pepernoot]

ik zoek meer naar zoiets: http://www.twospy.com/galleriffic/example-2.html

 

[Naarling]

Waarom gebruik je die dan niet? Hij ondersteunt meerdere gallerieën.

 

[pepernoot]

Hoe dan want ik snap hem dan niet?
hoe kan je er twee op één pagina krijgen?

Ik ben ook eigenlijk opzoek naar iets simpelers met minder functies.

 

[Naarling]

Het wordt daar niet erg duidelijk uitgelegd maar het lijkt me dat je in de HTML gewoon meerdere gallerieen aan kunt maken (zoals beschreven in punten 3 en 4 van de documentatie, elk met een ander ID. Vervolgens moet je die elk apart kunnen aanroepen, zoals beschreven in punt 5, waarbij je elke keer in

 var gallery = $('#thumbs').galleriffic({

thumbs vervangt door het ID van de gallerie die je aan wilt roepen.

 

[pepernoot]

JEEH heb het opgelost:

[JS] $(function() {
$(".image").click(function() {
var image = $(this).attr("rel");
$(this).closest('ul').find('#image').hide();
$(this).closest('ul').find('#image').fadeIn('slow');
$(this).closest('ul').find('#image').html('<img src="' + image + '"/>');
return false;
});
});[/JS]

<ul><div id="image"><img src="images/1.png" border="0"/></div>
    <li><a href="#" rel="images/1.png" class="image"><img src="images/t1.png" class="thumb" border="0"/></a></li>
    <li><a href="#" rel="images/2.png" class="image"><img src="images/t2.png" class="thumb" border="0"/></a></li>
    <li><a href="#" rel="images/3.png" class="image"><img src="images/t3.png" class="thumb" border="0"/></a></li>
</ul>

<ul><div id="image"><img src="images/1.png" border="0"/></div>
    <li><a href="#" rel="images/1.png" class="image"><img src="images/t1.png" class="thumb" border="0"/></a></li>
    <li><a href="#" rel="images/2.png" class="image"><img src="images/t2.png" class="thumb" border="0"/></a></li>
    <li><a href="#" rel="images/3.png" class="image"><img src="images/t3.png" class="thumb" border="0"/></a></li>
</ul>

 

[Naarling]

Nu heb je twee gallerijen met elk hetzelfde ID, dat kan niet goed gaan. Als het met het script niet fout gaat dan wel met je CSS.

 

[pepernoot]

Toch wel want hij zoekt naar de "rel" van de "img" (binnen de <ul>) en die zet hij dan op de plaats van de 'grote' afbeelding.
de CSS blijft bij bijde/alle gallerijen gewoon hetzelfde.

Ps. dit is trouwens het hele script ben van deze http://www.twospy.com/galleriffic/example-2.html afgestapt.

hoe kan ik de grote afbeelding trouwens laten uit-faden en daarna in-faden?