Image Slider soll sich nach Klick auf Thumbnail öffnen

Diskutiere Image Slider soll sich nach Klick auf Thumbnail öffnen im JavaScript Forum im Bereich Programmierung; 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...
  • Image Slider soll sich nach Klick auf Thumbnail öffnen Beitrag #1
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.
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!
 
  • Image Slider soll sich nach Klick auf Thumbnail öffnen Beitrag #3
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Übrigens: Ich schätze Selfhtml mit einigen Einschränkungen aber in der Diskussion dort sehe ich gleich zwei Falschinfos:

nicht zwischen Thumbnail und Vollbild unterscheidet.
Ein kurzer Blick in das HTML des Beispiels auf der Startseite von Fancybox zeigt, dass das Gegenteil der Fall ist: Ein Thumbnail in einem img-Tag, das sofort angezeigt wird und das große Bild als href.

Fancybox dafür ein suboptimales Tool
Fancybox ist hervorragend geeignet, denn es kann eine Galerie nicht nur aus HTML sondern auch aus einem Array erzeugen, das man dem Konstruktor übergibt:
https://fancyapps.com/fancybox/api/options/#constructor-options

Und dieses:
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.
muss man situationsgerecht beurteilen: Im vorliegenden Fall wäre es sinnfrei, das Rad neu zu erfinden. Mit dem Tutorial dort bei Selfhtml ist es nicht getan sondern solch ein Skript muss auch Touchbedienung unterstützen, was nicht so einfach umzusetzen ist.
 
Zuletzt bearbeitet:
Thema:

Image Slider soll sich nach Klick auf Thumbnail öffnen

Oben Unten