Image Slideshow nach geöffnetem Link

[Anja Thiele]

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?

Habt ihr Coding Tipps für mich? Oder andere Lösungsvorschläge?

Vielen Dank!