Ένα μικρό (αλλά χρήσιμο) Lightbox JS hack

Προσπαθούσα να βρω κάποια εναλλακτική του Lightbox JS το οποίο θα παρουσίαζε σε μορφή slide show ένα image set, χωρίς όμως να χρειαστεί στην σελίδα να εμφανίζονται όλες οι φωτογραφίες του.

Tα τυπικά παραδείγματα του Lightbox JS, περιλαμβάνουν την προβολή μιας image καθώς και την προβολή ενός image set με την εμφάνιση όμως όλων των φωτογραφιών αυτού του set στην σελίδα.

Kαθώς δεν βρήκα μια εύκολη και απλή λύση ώστε να την ενσωματώσω σε αυτό που ήθελα να κάνω, δημιούργησα μια μικρή παραλλαγή, όπου με την εμφάνιση μιας image ή ενός text link, μπορούμε να δούμε όλες τις φωτογραφίες του image set.

Ακολουθούμε τον κώδικα του Lightbox και στην σελίδα που θέλουμε να βάλουμε το text ή το image link, μέσω του οποίου θα μας εμφανίζεται το lightbox με το image set προσθέτουμε ένα div με τις υπόλοιπες φωτογραφίες και την απαραίτητη προσθήκη σε αυτό visibility:hidden.

<div align=»left» id=»ljs» style=»position: absolute; left: 30px; top: 0px; width: 150px; height: 150px; z-index: 5; visibility: hidden»>
<a href=»wallpapers/image-2.jpg» rel=»lightbox[wallpapers]» title=»wallpapers»></a><a href=»wallpapers/image-3.jpg» rel=»lightbox[wallpapers]» title=»wallpapers»></a><a href=»wallpapers/image-4.jpg» rel=»lightbox[wallpapers]» title=»wallpapers»></a><a href=»wallpapers/image-5.jpg» rel=»lightbox[wallpapers]» title=»wallpapers»></a><a href=»wallpapers/image-6.jpg» rel=»lightbox[wallpapers]» title=»wallpapers»></a></div>

Demo

Lightbox JS hack (text link) : demo (my wallpapers collection)

Lightbox JS hack (image link)