M
MSGD
New member
- Beiträge
- 3
- Punkte Reaktionen
- 0
Ich bin gerade dabei, ein Portfolio für mich zu erstellen, das ich meinen Kunden auf Anfrage zusenden kann. Ich habe hierfür folgenden HTML Block mit Videos, der als Image-Gallery funktioniert – also zu sehen ist eine Gallerie mit bis zu 4 Thumbnails zu verschiedenen Videos, sobald ich darauf Klicke, öffnet sich das jeweilige Video.
Ich möchte nun dasselbe für Fotoprojekte anlegen. Nach dem aktuellen System kann ich allerdings nur immer 1 Foto mit dem Klick zur großen Ansicht öffnen, also das, was im href="" hinterlegt ist.
Wenn ich aber eine Fotoserie habe, von der 1 Thumbnailbild im Frontend zu sehen ist und nach dem Klick auf das Thumbnail eine klickbare Slideshow mit dem Rest der Bilder erscheint ... wie mache ich das am Besten?
Habt ihr Coding Tipps für mich? Oder andere Lösungsvorschläge?
Vielen Dank!
Javascript:
<div class="referenzen">
<div class="refs" class="jump"></div>
<div id="gal">
<ul class="gallery">
<li>
<a class="fancybox fancybox.iframe" href="link">
<img class="thumbnail" src="images/image1.png">
<p>Referenz 1</p>
</a>
</li>
<li>
<a class="fancybox fancybox.iframe" href="link">
<img class="thumbnail" src="images/image2.jpg">
<p>Referenz 2</p>
</a>
</li>
<li>
<a class="fancybox fancybox.iframe" href="link">
<img class="thumbnail" src="images/image3.jpg">
<p>Referenz 3</p>
</a>
</li>
</ul>
</div>
</div>
Das Script hierzu ist folgendes:
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
openEffect : 'none',
closeEffect : 'none',
nextEffect : 'none',
prevEffect : 'none',
padding : 0,
margin : [20, 60, 20, 60] // Increase left/right margin
});
Ich möchte nun dasselbe für Fotoprojekte anlegen. Nach dem aktuellen System kann ich allerdings nur immer 1 Foto mit dem Klick zur großen Ansicht öffnen, also das, was im href="" hinterlegt ist.
Wenn ich aber eine Fotoserie habe, von der 1 Thumbnailbild im Frontend zu sehen ist und nach dem Klick auf das Thumbnail eine klickbare Slideshow mit dem Rest der Bilder erscheint ... wie mache ich das am Besten?
Habt ihr Coding Tipps für mich? Oder andere Lösungsvorschläge?
Vielen Dank!