Foto galerij met jquery — Forum

bojangles Startte dit onderwerp 20 aug 2015, 16:15 West-Vlaanderen 100 berichten

Hallo senioren (of andere webmasters),

Ik heb een webpagina gemaakt met daarop een zes-tal foto's. Nu wil ik een foto galerij openen telkens als ik op één van die foto's klik. In die galerij die zich onmiddellijk opent (niet op een nieuw tabblad maar op dezelfde webpage) zitten weer andere foto's.

Met een script van jquery ben ik daar in geslaagd, maar bij het aanklikken van de 2de foto op de homepage krijg ik dezelfde galerij te zien.

Heeft iemand ervaring met jquery ? Kan je verschillende foto-galerijen (een carrousel) openen vanop dezelfde pagina door simpelweg op verschillende afbeeldingen te klikken ? Zo ja, kan iemand mij uitleggen hoe ik dit script in mijn html-code moet opnemen ? Dat gaat momenteel mijn petje te boven ...

Alvast bedankt,
Bojangles

coderunner 20 aug 2015, 17:03 Aubauke - Aentwaerepe 1.828 berichten

Beste Bojangles,

Kan je misschien een voorbeeld link geven zodat wij dit kunnen nakijken?

mvg,
Coderunner

Bedank de perso(o)n(en) die je volledig op vrijwillige basis een antwoord geeft(geven) en/of beantwoord ten minste een reaktie op jouw vraag. Zo weten andere gebruikers EN de moderator dat je "probleem" al dan niet is opgelost. Alvast bedankt.

bojangles Startte dit onderwerp 20 aug 2015, 18:01 West-Vlaanderen 100 berichten

Oké, ik heb mijn probeersels hier tijdelijk gepost :

http://bootsofspanishleather.uphero.com/handbags.html

als je klikt op de eerste foto dan krijg je een fotogalerij te zien.

Ik zou een dergelijke fotogalerij ook willen starten vanaf de 2de foto, maar dan met andere foto's in een andere caroussel.

coderunner 20 aug 2015, 20:53 Aubauke - Aentwaerepe 1.828 berichten

Beste Bojangles,

Probeer het volgende.
Vul het javascript verder aan naargelang het aantal galerijen

Code: Selecteer alles

<script type="text/javascript">
$(document).ready(function() {
$('.vergroot1').magnificPopup({delegate: 'a', type:'image', gallery:{enabled:true} });

$('.vergroot2').magnificPopup({delegate: 'a', type:'image', gallery:{enabled:true} });

$('.vergroot3').magnificPopup({delegate: 'a', type:'image', gallery:{enabled:true} });
});
</script>

Wijzig

Code: Selecteer alles

<div class="vergroot">

in

Code: Selecteer alles

<div>

en plaats de volgende class in elke <li> tag voor elke galerij

Code: Selecteer alles

<li class="vergroot1">
...
<li class="vergroot2">
...
<li class="vergroot3">
...
enz ...

mvg,
Coderunner

Bedank de perso(o)n(en) die je volledig op vrijwillige basis een antwoord geeft(geven) en/of beantwoord ten minste een reaktie op jouw vraag. Zo weten andere gebruikers EN de moderator dat je "probleem" al dan niet is opgelost. Alvast bedankt.

bojangles Startte dit onderwerp 21 aug 2015, 09:07 West-Vlaanderen 100 berichten

Gelukt ! Merci coderunner.

De <div> tag van naam wijzigen was niet juist, want dan werkt de magic-popup niet meer, maar het javascript correct uitbreiden was wel de sleutel van mijn probleem.

Nu nog de vormgeving weer correct zetten.

ik heb het resultaat online gezet, zodat je kan zien wat het geeft : http://bootsofspanishleather.uphero.com/handbags.html

Mocht ik onderweg nog probleempjes tegenkomen, dan weet ik je te vinden

Groeten,
Bojangles (nog net geen senior, maar al flink op weg)

coderunner 21 aug 2015, 13:31 Aubauke - Aentwaerepe 1.828 berichten

bojangles schreef:De <div> tag van naam wijzigen was niet juist, want dan werkt de magic-popup niet meer, maar het javascript correct uitbreiden was wel de sleutel van mijn probleem.

Beste bojangles,

Het was de bedoeling de class in de <div> tag te verwijderen ÉN tegelijkertijd deze class in de onderstaande <li> tag van elke nieuwe galerij te plaatsen zodat de magic-popup WEL blijft werken

(zie privé-bericht)

Bedankt voor de update!

mvg,
Coderunner

Bedank de perso(o)n(en) die je volledig op vrijwillige basis een antwoord geeft(geven) en/of beantwoord ten minste een reaktie op jouw vraag. Zo weten andere gebruikers EN de moderator dat je "probleem" al dan niet is opgelost. Alvast bedankt.