Lightbox TopUp

Lightbox TopUp Για τις Εικόνες του Blog σας

Φίλοι bloggers γεια σας !!! Σήμερα σας παρουσιάζω ένα lightbox για image gallery, που έχω εδώ και καιρό σε ένα demo-blog μου !!!Μπορεί και μεγεθύνει εικόνες , βίντεο, και link...με μέγεθος που θα καθορίσετε εσείς...Υπάρχει σε 2 τύπους......Σήμερα θα σας παρουσιάσω τον ένα τύπο (το slideshow θα σας μπερδέψει)!!!...
Στο τέλος της ανάρτησης, θα βρείτε και demo και download για να κατεβάσετε το script και να το ανεβάσετε σε δική σας σελίδα...

Το script  θα το επικολλήσετε ως εξής:
(δείτε στην εικόνα) με Ctrl-F βρείτε τη φράση   </head>   και ΠΡΙΝ από αυτή βάλτε τη φράση:
<script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script>

η

<script src='http://gettopup.com/releases/latest/top_up-min.js' type='text/javascript'/>

...Πατήστε ΑΠΟΘΗΚΕΥΣΗ !!!
...Πάμε να βάλουμε τον κώδικα HTML όπως θα δείτε στην εικόνα :

ο κώδικας είναι ο εξής :

 <a href="photos/1.jpg" class="top_up"><img src="thumbnails/1.jpg"/></a>
    <a href="photos/2.jpg" class="tu_ql"><img src="thumbnails/2.jpg"/></a>
    <a href="http://www.google.nl" class="tu_iframe_800x600">Open Google</a>

....δηλαδή ...για τις εικόνες :
 <a href="ΔΙΕΥΘΥΝΣΗ ΜΕΓΑΛΗΣ ΦΩΤΟΓΡΑΦΙΑΣ" class="top_up"><img src="ΔΙΕΥΘΥΝΣΗ ΜΙΚΡΗΣ ΦΩΤΟΓΡΑΦΙΑΣ"/></a>
(απ ότι καταλάβατε χρειάζεστε 2 μεγέθη της εικόνας...κανονική & εικονίδιο)

...για βίντεο :
<a href="ΔΙΕΥΘΥΝΣΗ  ΒΙΝΤΕΟ" class="tu_iframe_600x400"><img src="ΔΙΕΥΘΥΝΣΗ ΕΙΚΟΝΙΔΙΟΥ ΦΩΤΟΓΡΑΦΙΑΣ ΤΟΥ ΒΙΝΤΕΟ"/></a>
(απ' ότι καταλάβατε θα βάλετε μια εικόνα μικρή για το βίντεο)

...για link :
<a href="ΔΙΕΥΘΥΝΣΗ LINK ΣΕΛΙΔΑΣ" class="tu_iframe_800x600">ΟΝΟΜA  ΣΕΛΙΔΑΣ</a>
(εδώ βάζετε απλά το λινκ της σελίδας και το όνομα της....)

ΔΕΙΤΕ ΕΔΩ ΤΟ DEMO
ΚΑΤΕΒΑΣΤΕ / DOWNLOAD TopUp