Foto galerij met jquery

Vragen/antwoorden betreffende het maken van je eigen website.

bojangles
Lid geworden op: 20 aug 2015, 15:50
Locatie: West-Vlaanderen

20 aug 2015, 16:15

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
Lid geworden op: 27 mar 2006, 04:35
Locatie: Aubauke - Aentwaerepe

20 aug 2015, 17:03

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
Lid geworden op: 20 aug 2015, 15:50
Locatie: West-Vlaanderen

20 aug 2015, 18:01

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
Lid geworden op: 27 mar 2006, 04:35
Locatie: Aubauke - Aentwaerepe

20 aug 2015, 20:53

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
Lid geworden op: 20 aug 2015, 15:50
Locatie: West-Vlaanderen

21 aug 2015, 09:07

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 :D

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

coderunner
Lid geworden op: 27 mar 2006, 04:35
Locatie: Aubauke - Aentwaerepe

21 aug 2015, 13:31

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 :wink:
(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.