Galerie [Lightbox] über Thumbnail öffnen - wie?

[godlike]

Jo, die Frage hört sich im ersten Moment evtl einfach an aber ich grüble gerade wie sich das lösen lässt.

Ich habe eine Seite mit mehreren Thumbnails. Per Klick auf ein Thumbnail soll sich das Bild in Groß öffnen, das was halt verlinkt ist ABER quasi als eigene Galerie, sprich mit mehreren dazu gehörigen Bildern.

Quasi hab ich auf der Seite Thumbnail_1, Thumbnail_2, Thumbnail_3, Thumbnail_4, Thumbnail_5, Thumbnail_6 und ich will über jedes Thumbnail eine eigene Galerie öffnen mit jeweils anderen Bildern. Ich hoffe ihr versteht was ich meine.

Thumbnail_1
- Bild a
- Bild b
- Bild c

Thumbnail_2
- Bild d
- Bild e

Thumbnail_3
- Bild u
- Bild y

usw.

Jemand eine Idee wie ich das machen könnte bzw welches Lightbox-Script hierfür geeignet wäre? Darf auch gerne noch Responsive sein (wenn die das eh nicht schon alle sind). Steh wie gesagt gerade etwas auf dem Schlauch da ich es immer nur so eingesetzt habe die sichtbaren Thumbnais quasi zu vergrößern und keine "fremden" Bilder damit zu verknüpfen...

Gruß godlike

 

[KingJamez]

Welche Lightbox Scripte kennst oder nutzt du denn derzeit?
Verstehe ich es richtig, das die Bilder der Galerie, nicht auf der Seite angezeigt werden, nur in der Lightbox?

Prinzipiell müsste das mit jeder Lightbox gehen, wenn sie die Callbacks oder Events bietet.
Du könntest dann ein Event auf 'lightboxOpen' (pseudoCode!) feuern, und mit Ajax die Galerie Bilder nachladen. Dazu brauchst du Serverseitig natürlich eine zuordnung (Bild A ist in Galerie A, weitere Bilder in Galerie A sind....).

 

[godlike]

Moin,

sorry ich bin gestern schon auf eine Lösung gekommen hatte aber keine Zeit mehr hier was zu schreiben. Ist jetzt evtl nicht der eleganteste Weg aber es funktioniert einwandfrei. Nutze Fancybox. Habe einen unsichtbaren Container angelegt
[src=css]#hidden {
position: absolute;
left: -10000px;
top: -10000px;
display: none;
}[/src]
In dem sich die Bilder, welche zwar in der Galerie angezeigt werden sollen aber nicht als Thumbnail auf der Seite, befinden.
[src=html5]<a href="bild_2.jpg" class="fancybox" data-fancybox-group="gallery1"> </a>
<a href="bild_2.jpg" class="fancybox" data-fancybox-group="gallery2"> </a>[/src]

Funktioniert tadellos

 

[KingJamez]

Nur als kleine Randbemerkung:
ich weiß nicht ob wie viele Bilder es insgesamt geht. Aus gründen der Geschwindigkeit würde ich für die Galeriebilder erstmal Platzhalter einbinden. Damit vermeidest du das unnötige Laden von Bildern beim Client. Fancybox bietet ein

You do not have permission to view link please Anmelden or Registrieren

. Das scheint vor dem Anzeigen der Bilder zu feuern. Während dieses Events könntest du dann deine Galeriebilder nachladen (LazyLoading).
Ein Lazyloading script für Bilder ist relativ simpel.

[src=javascript]
// jquery:
loadImage = function($el, src, alt, cls) {
var img = $('<img />').attr('src', src)
.on('load', function(){
if(!this.complete) {
console.error('error loading image');
}
else {
$el.append(img.attr('alt', alt).attr('class', cls));
// falls du mit platzhalterbildern arbeitest,
// könntest du den platzhalter entfernen, oder die src ersetzen
}
})
.on('error', function(){
console.error('error');
});
}
[/src]
das Markup dazu könnte so aussehen:
[src=html4strict]
<div data-lazy="true" data-imgsrc="link/zum/bild.jpg" data-imgclass="classnames" data-imgalt="alt des bildes">
[/src]
und der aufruf
[src=javascript]
var $els = $('*[data-lazy="true"]');

$els.each(function(){
loadImage($(this), $(this).data('imgsrc'), $(this).data('imgalt'), $(this).data('imgclass'));
});
[/src]

Haftungsausschluss: ich hab den Code hier im PostEditor runter geschrieben! Kleinere Fehlerchen sind nicht ganz ausgeschlossen.

 

[godlike]

Ähm Oke, du hast aber schon gesehen das ich da keine Bilder einbinde sondern nur Links zu selbigen? Geladen werden die ja erst wenn einer ein entsprechendes Thumbnail anklickt. Oder stehe ich auf dem Schlauch?

Aber danke für den Code

 

[dexter]

Habe einen unsichtbaren Container angelegt
[src=css]#hidden {
position: absolute;
left: -10000px;
top: -10000px;
display: none;
}[/src]

Ich halte es für sinnvoll das CSS per JS einzubinden. Damit stellt man sicher, dass die Links auch da sind, wenn JS deaktiviert ist.

 

[godlike]

Das wäre eine Idee, danke