Foto galerij met jquery
-
bojangles - Lid geworden op: 20 aug 2015, 15:50
- Locatie: West-Vlaanderen
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
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
Beste Bojangles,
Kan je misschien een voorbeeld link geven zodat wij dit kunnen nakijken?
mvg,
Coderunner
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
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.
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
Beste Bojangles,
Probeer het volgende.
Vul het javascript verder aan naargelang het aantal galerijen
Wijzigin
en plaats de volgende class in elke <li> tag voor elke galerij
mvg,
Coderunner
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">
Code: Selecteer alles
<div>
Code: Selecteer alles
<li class="vergroot1">
...
<li class="vergroot2">
...
<li class="vergroot3">
...
enz ...
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
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)
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 - Lid geworden op: 27 mar 2006, 04:35
- Locatie: Aubauke - Aentwaerepe
Beste bojangles,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.
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.