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!

[Rolf B]

Hallo Anja Thiele,

Ich kenne Fancybox nicht, aber wenn es das hier ist, sollte das eine Frage der richtigen Optionen sein.

let me google that for you...

Ich nehme an, du hast nicht die Version 5, die wird nämlich mit data-Attributen und nicht mit rel konfiguriert.

Jedenfalls steht da ein Satz in der Doku, am Ende von Howto:

Note - Galleries are created from elements who have the same "rel" tag, example:

Und da ist dann auch ein Beispiel.

Rolf

[Anja Thiele]

Hi, Rolf!

Ich habe es mir angesehen, danke dafür. Allerdings weiß ich nicht ganz, inwiefern ich das auf mein Projekt beziehen kann, da ich den klickbaren Slider in der großen Bildansicht haben möchte.

Also quasi:

Ich habe insgesamt 4 Fotoprojekte mit je 10 Bildern. Jeweils 1 Bild einer Serie soll als Thumbnail erscheinen. Sobald ich auf das Thumbnail klicke, öffnet sich die große Ansicht mit den anderen Bildern, die ich dann durchklicken kann.

Ich bin leider nicht fit genug in der ganzen Programmiersprache, dass ich das o.g. Script entsprechend meiner Anforderung umschreibe, daher hoffe ich hier, die Lösung zu erhalten. :D

Aber Deinen Link könnte ich wiederum für etwas anderes verwenden, vielen Dank! :)

[Rolf B]

Hallo Anja,

ich hab doch selbst nur gegoogelt...

Mir scheint, als wäre Fancybox dafür ein suboptimales Tool, weil es vorhandene Images zu einer Galerie gruppiert und nicht zwischen Thumbnail und Vollbild unterscheidet.

Heißt: Du hast eine Seite mit 20 Thumbnails von Bildern, die je 10MB groß sind. Jemand ruft diese Seite auf und hat - ächz - 200MB Daten geladen. Thumbnails müssen klein sein, in Größe und Speicherplatz.

Wir habe im Abschnitt über DOM Manipulation ein Tutorial, das einen Bildwechsler aufbaut. Das setzt allerdings eine tiefere Beschäftigung mit dem Thema voraus. Selfhtml bietet eher keine "Benutzen ohne Verstehen" Lösungen an, das ist nicht unsere Philosophie.

Rolf