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.
<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>Video #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 zu sehen ist und nach dem Öffnen eine klickbare Slideshow erscheint ... wie mache ich das am Besten?
Also im Frontend sollen beispielsweise 3 Projekte mit jeweils einem Thumbnail zu sehen sein. Wenn ich auf das entsprechende Thumbnail klicke, möchte ich die anderen Fotos des Projekts sehen und durchklicken können.
Habt ihr Coding Tipps für mich? Oder andere Lösungsvorschläge? Ich habe leider keine Ahnung, wie ich das anstellen soll und würde meine aktuelle Codestruktur gerne beibehalten – so gut wie möglich jedenfalls.
Vielen Dank!
