Open popup met dynamic data
Ik worstel met het volgende.
Ik heb 3 verschillende afbeeldingen (van 3 verschillende portfolio items) in de index.php staan.
Op een afbeelding kan geklikt worden waarna je een popup te zien krijgt (popup wordt ook geladen in de index.php file). De links van de portfolio items zien er als volgt uit:
<a href="#gallery-popup" class="has-gallery-popup" title="Open Gallery Popup">Appartement 1</a>
<a href="#gallery-popup" class="has-gallery-popup" title="Open Gallery Popup">Appartement 2</a>
<a href="#gallery-popup" class="has-gallery-popup" title="Open Gallery Popup">Appartement 3</a>
De gallery-popup wordt geladen, maar bevat alleen de tekst, titel + foto's van Appartement 1.
Wat moet ik toevoegen aan de bovenstaande URL's om in de popup dymanische content te laten zien?
Het idee wat ik had om het plat te schetsen is:
<a href="#gallery-popup?building=1" class="has-gallery-popup" title="Open Gallery Popup">Appartement 1</a>
<a href="#gallery-popup?building=2" class="has-gallery-popup" title="Open Gallery Popup">Appartement 2</a>
Maar op deze manier wordt de popup geopend.
Een voorbeeld van het bovenstaande vind je op: http://wp1.themexlab.com/html2/tyche-property/
bij het onderdeel "Checkout Villa Photos".
Ik maak gebruik van: Master Slider – Responsive Touch Swipe Slider (@version 2.15.1)
Het betreft overigens geen WP website of iets.
Ik hoor heel graag in welke richting ik moet denken om hetgeen te doen wat ik voor ogen heb.
Groetjes,
Johnny
Gewijzigd op 06/10/2017 15:26:45 door Johnny Cash
In mijn ogen wel twee verschillende dingen maar uiteindelijk komt het ook wel weer op hetzelfde neer. Laten we het getal 3 aanhouden. Om drie verschillende dingen één voor één te laten zien moeten ze alle drie gewoon in de HTML opgenomen worden.
zoiets:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<body>
<div id="popup1" class"popups">
<!-- inhoud popup 1 -->
</div>
<div id="popup2" class"popups">
<!-- inhoud popup 2 -->
</div>
<div id="popup3" class"popups">
<!-- inhoud popup 3 -->
</div>
</body>
</html>
<body>
<div id="popup1" class"popups">
<!-- inhoud popup 1 -->
</div>
<div id="popup2" class"popups">
<!-- inhoud popup 2 -->
</div>
<div id="popup3" class"popups">
<!-- inhoud popup 3 -->
</div>
</body>
</html>
De truc is om twee van de drie te verbergen met CSS:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
.popups {
display: none;
}
#popup1 {
display: block;
}
display: none;
}
#popup1 {
display: block;
}
Nu zal alleen popup1 zichtbaar zijn. Zonder enige interactie zal dat zo blijven dus willen we wat HTML elementen toevoegen waar een gebruiker op kan klikken en er vervolgens één van de andere drie getoond wordt.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<body>
<div id="popup1" class"popups">
<!-- inhoud popup 1 -->
</div>
<div id="popup2" class"popups">
<!-- inhoud popup 2 -->
</div>
<div id="popup3" class"popups">
<!-- inhoud popup 3 -->
</div>
<nav>
<a href="#popup1" class="popup-link">popup 1</a>
<a href="#popup2" class="popup-link">popup 2</a>
<a href="#popup3" class="popup-link">popup 3</a>
</nav>
</body>
</html>
<body>
<div id="popup1" class"popups">
<!-- inhoud popup 1 -->
</div>
<div id="popup2" class"popups">
<!-- inhoud popup 2 -->
</div>
<div id="popup3" class"popups">
<!-- inhoud popup 3 -->
</div>
<nav>
<a href="#popup1" class="popup-link">popup 1</a>
<a href="#popup2" class="popup-link">popup 2</a>
<a href="#popup3" class="popup-link">popup 3</a>
</nav>
</body>
</html>
De rest wat je nodig hebt is javascript.
simpel gezegd:
Als er op een <a> element geklikt wordt die de class popup-link heeft dan
- alle drie de popups onzichtbaar maken
- de popup die in het href attribuut staat zichtbaar maken
- op deze pagina blijven en niet zoals een <a> normaal gesproken doet naar een nieuwe pagina gaan.
Toevoeging op 06/10/2017 20:32:32:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// verkrijg een array (lijst) met HTML elementen die class="popup-link" hebben
var links = document.getElementsByClassName('popup-link');
// een lus die alle elementen die class="popup-link" hebben n voor n doorloopt
for (i = 0; i < links.length; i++) {
// hang een onclick event aan het element
links[i].onclick = function() {
// verkrijg een array (lijst) met HTML elementen die class="popups" hebben
var popups = document.getElementsByClassName('popups');
// een lus die alle elementen die class="popups" hebben n voor n doorloopt
for (i = 0; i < popups.length; i++) {
// verberg de popup
popups[i].style.display = 'none';
};
// lees het id uit het href attribuut ( bijvoorbeeld href="popup2")
var id = this.getAttribute('href');
// verkrijg het HTML element met het id. ( bijvoorbeeld id="popup2")
var element = document.getElementById(id);
// laat het HTML element zien aan de gebruiker
element.style.display = 'block';
// voorkom een redirect
return false;
};
};
var links = document.getElementsByClassName('popup-link');
// een lus die alle elementen die class="popup-link" hebben n voor n doorloopt
for (i = 0; i < links.length; i++) {
// hang een onclick event aan het element
links[i].onclick = function() {
// verkrijg een array (lijst) met HTML elementen die class="popups" hebben
var popups = document.getElementsByClassName('popups');
// een lus die alle elementen die class="popups" hebben n voor n doorloopt
for (i = 0; i < popups.length; i++) {
// verberg de popup
popups[i].style.display = 'none';
};
// lees het id uit het href attribuut ( bijvoorbeeld href="popup2")
var id = this.getAttribute('href');
// verkrijg het HTML element met het id. ( bijvoorbeeld id="popup2")
var element = document.getElementById(id);
// laat het HTML element zien aan de gebruiker
element.style.display = 'block';
// voorkom een redirect
return false;
};
};
Toevoeging op 06/10/2017 20:33:16:
https://codepen.io/anon/pen/KXQqVJ
Gewijzigd op 06/10/2017 19:56:56 door Frank Nietbelangrijk
* TS gebruikt al jquery, dus bovenstaande kan een stuk korter.
* wanneer je een zeker gedrag koppelt aan bepaalde elementen, en je deze elementen kunt groeperen in een container verdient dat doorgaans de voorkeur, vervolgens kun je het gedrag specifiek koppelen aan (de elementen) binnen die container, wat uit oogpunt van event handling ook wat efficiënter of iig dynamischer is (als ik mij niet vergis heet dit delegated events; het voordeel hiervan is dat je potentieel dynamisch content kunt inladen omdat je niet de verplichting hebt om dan en daar een click-event te koppelen aan een reeds bestaand element maar dat je dit dus delegeert).
Bedankt voor je reactie over delegated events. Daar kan ik wel iets mee :-)
Ik haal uit de tekst nergens dat TS jQuery gebruikt? Desgewenst kan ik het aanpassen naar jQuery.
Uiteindelijk heb je meestal de minste code wanneer je GEEN gebruik maakt van libraries als JQuery en Bootstrap maar wel is het zo dat je ZELF minder code hoeft te schrijven.
Uiteraard, alles is een tradeoff, maar met jQuery heb je het "voordeel" dat je zelf minder code hoeft te schrijven (write less, do more) en er tot op zekere hoogte rekening wordt gehouden met cross browser compatibiliteit.
Bij het schrijven van snippets is het belangrijk dat je ook rekening houdt met namespacing enzo, zodat je, vooral als je met grotere sites te maken hebt, niet het gevaar loopt dat je op een of andere manier bestaande functionaliteit breekt (nu zal dit gevaar hier wel meevallen :p). Ik denk dat een framework je doorgaans beter in staat stelt om dat te doen. Of in ieder geval makkelijker functionaliteit in kunt voegen die niet van invloed is op reeds bestaande functionaliteit, m.a.w. het maakt integratie wat makkelijker.
Gewijzigd op 07/10/2017 20:12:05 door Thomas van den Heuvel