Το Lightbox είναι ένας πολύ cool τρόπος για να εμφανίζονται οι φωτογραφίες που ανεβάζουμε στα blogs με πιο όμορφο τρόπο, με μερικά απλά εφέ για να δείχνει ότι γράφουμε ένα πολύ professional blog και ξέρουμε καλά τα κόλπα του design. Για παράδειγμα όταν πατήσει κάποιος την επόμενη photo προβάλλεται πολύ πιο ωραία από ότι στα κοινά blogs και πως να το κάνουμε, η εμφάνιση παίζει μεγάλο ρόλο στις μέρες μας
.
Η εγκατάσταση του Lightbox για το wordpress είναι αρκετά εύκολη, με ένα απλό plugin έχεις καθαρίσει. Οι χρήστες του blogger όμως για να το εγκαταστήσουν θα πρέπει να τροποποιήσουν λίγο τον κώδικα του template τους. Οπότε θα πρέπει να ακολουθήσουν τα επόμενα βήματα:
Βήμα 1. Σώζουμε το ήδη υπάρχον template μας και σε περίπτωση που γίνει καμιά στραβή και γίνουν όλα σαλάτα να το έχουμε σαν backup. Για να σώσουμε το template πηγαίνουμε dashboard->Layout->edit HTML-> download Full template (screenshot 1)
Bήμα 2. Κάνουμε edit το template. Στην αρχή του template, πριν το head στο σημείο που φαίνεται στο screenshot 2 προσθέτουμε τον παρακάτω κώδικα
<script src='http://masseyhome.googlepages.com/prototype.js' type='text/javascript'></script>
<script src='http://masseyhome.googlepages.com/scriptaculous.js?load=effects' type='text/javascript'></script>
<script src='http://masseyhome.googlepages.com/lightbox.js' type='text/javascript'></script>
<link href='http://masseyhome.googlepages.com/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>
Βήμα 3. Κάνουμε edit το post μας. Όταν φτιάχνουμε νέο post και ανεβάζουμε μια φωτογραφία, αφού την ανεβάσουμε πηγαίνουμε στο edit Html και επεξεργαζόμαστε ελάχιστα τον κώδικα που αναφέρεται στην photo. Συγκεκριμένα προσθέτουμε την εξής πρόταση rel=”lightbox[περιγραφή της εικόνας]” στο σημείο που φαίνεται στο screenshot3.
Δε τελειώσαμε όμως. Υπάρχει μία παράμετρος “-h” στα images που ανεβαίνουν στο blogger η οποία πρέπει να σβηστεί αλλιώς το lightbox δε πρόκειται να εμφανίσει την photo όσο και να περιμένεις. Οπότε πρέπει να σβήσουμε το “-h” από τον κώδικα του image όπως φαίνεται στο screenshot4.
Τώρα είμαστε έτοιμοι
. Για να φαίνονται οι photos των παλαιότερων post μας με αυτό τον τρόπο πρέπει να ακολουθήσουμε την διαδικασία του βήματος 3.










Καλησπέρα σας και συγχαρητήρια για το blog σας μου είναι πολύ χρήσιμο
Θα ήθελα τη βοήθεια σας αν δεν σας απασχολώ
Το πρόβλημα είναι το εξής έχω καταχώρηση τα blog μου http://potpouri-art.blogspot.com/
http://euresi-ergasias.blogspot.com/
στiς γνωστές μηχανές αναζήτησης.Αλλά θα ήθελα να προσθέσω και έναν κώδικα java με meta tag με λέξεις κλειδιά
Ώστε να τα βρίσκουν πολύ εύκολα υπάρχει κάτι τέτοιο? που μπορώ να βρω?
ευχαριστώ εκ τον προτέρων
Kalispera, sigxaritiria poli kalo to post kai eyxaristo, omos antimetopiso ena problima dioti ekana auta pou eipes parapano kai stis tris protes fotografies tou blog mou doulepse meta oute tin tetarti foto oute autes pou tis ekana kai ksanaelegxo to kodiko apo mesa kai iparxei den allakse tpt apla den douleyei to lightbox
hi Shkreli,
Eyxaristw gia ta kala sou logia. Sxetika me tin 4i photo pou de sou bgainei o kwdikas, tsekare an exeis ksexasei na afaireseis tin parametro -h. 2on prepei na ksereis oti otan fortwseis tin selida sou pairnei kapoia wra gia na efarmostei to lightbox effect se oles sou tis photos. Opote, mporei otan dokimases na min leitourgouse stin 4i photo k pera; epeidi 8elei perissotero xrono gia na to fortosei stin arxi.
Kalimera kai pali, signomi file alla otan den yparxei i parametros “-h” sta image pou exo anebasei.. ti ginete se autin tin periptosi.?
Edo o kodikos mipos den to blepo ego..
http://img413.imageshack.us/img413/5607/capturezh.jpg
Hi Shkrell,
Άμα δεν βάλεις την παράμετρο -h τότε απλά θα βγάλει το πλαίσιο αλλά δε θα σου δείξει την φωτογραφία…
Μια επιπλέον συμβουλή θα ήταν τελικά να μη χρησιμοποιήσεις το Lightbox για τον εξής λόγο: Τα ρομπότ της google γενικότερα ψάχνουν σε blogs για κώδικα που μπορεί να είναι ύποπτος όπως για παράδειγμα αν κρύβεις το navbar επάνω. Αν δούν γενικότερα ότι υπάρχει κάτι τέτοιο χαρακτηρίζουν το blog ως spam… Σε εμένα όταν είχα το blog μου στο blogspot αυτό είχε συνέβει χωρίς φυσικά να έχω spam blog. Τώρα δε ξέρω αν έφταιγε και το lightbox σε αυτό αλλά γενικότερα δε θα στο πρότεινα σε ένα free blog να το κάνεις add.
Καλησπέρα!
Μόλις εγκατέστησα τον κώδικα για το lightbox. Όλα λειτουργούν καλά, η φωτογραφία φαίνεται, αν και χωρίς να αφαιρέσω την παράμετρο “-h”, μιας και δεν υπάρχει.
Με προβλημάτισε η συμβουλή, το να μην το χρησιμοποιήσουμε τελικά το lightbox… Θα μπορούσατε να εξηγήσετε λιγάκι καλύτερα το γιατί, γιατί δεν το έχω καταλάβει ακριβώς? Και εάν δεν μπορούμε να χρησιμοποιήσουμε αυτό, με τι μπορούμε να το αντικαταστήσουμε?
Επίσης, πως μπορούμε να βάλουμε μερικές φωτογραφίες (5-6) και να ανοίγουνε με την σειρά στο ίδιο παράθυρο (πλοήγηση με βελάκι στο lightbox δλδ). Κάποια στιγμή το είχα δοκιμάσει, αλλά το πρόβλημα ήταν ότι οι φωτογραφίες στην ανάρτηση δεν εμφανίζονταν σαν thumbnails όλα ίδια, το ένα δίπλα στο άλλο, αλλά σαν κανονικές φώτο οι μία κάτω απο την άλλη, σε μεγάλο μέγεθος….
Ευχαριστώ πολύ εκ των προτέρων!
Χμ… περίεργο… Ενώ την πρώτη φορά που το δοκίμασα δούλευε, τώρα οι εικόνες ανοίγουν όπως άνοιγαν παλιά, σε νέα λευκή σελίδα…. χωρίς lightbox… Δεν μπορώ να καταλάβω…
Hi Galini,
Για να σου δουλέψει το lightbox πρέπει να περάσει κάποια ώρα αφού φορτώσει η σελίδα καθώς πρέπει να φορτώσει τα αρχικά scripts.
Για να βάλεις group φωτογραφιών ο κώδικας πρέπει να αλλάξει και να γίνει κάπως έτσι:
Λογικά δε πρέπει να έχεις κάποιο πρόβλημα αν βάλεις αυτόν τον κώδικα αν υποθέσουμε ότι τα ρομποτάκια της google δε θα βρούν το αρχικό κομμάτι του κώδικα σου (εκεί που ορίζουμε τα js scripts ύποπτα…). Κυρίως υποθέτω ότι κάποιο blog κινδυνεύει περισσότερο αν δεν έχει επάνω το navbar του blogger όπως συνέβη σε εμένα… Γι αυτό το λόγο άλλωστε απέκτησα δικό μου domain, για να έχω μεγαλύτερη ελευθερία κινήσεων στο template…
Πάει σχετικά αρκετός καιρός από τότε που είχα δουλέψει το lightbox για το blogger. Για περισσότερες πληροφορίες που μπορεί να λείπουν από το δικό μου post μπορείς να κοιτάξεις εδώ:
http://www.virtuosomaster.com/tutorials/how-to-setup-lightbox-blogger-template/
Πολύ καλός ο οδηγός σου!
Για το blog μου χρησιμοποιώ κάτι παρόμοιο, έναν ανοιχτό κώδικα που λέγεται lytebox (τον οποίο εκανα μερικές αλλαγες για να έχει καλή συνεργασία με όλους τους browsers).
Είναι πιο ελαφρύς από το lightbox, αλλά κρατάω το άρθρο σου, γιατί τώρα πια που το ίντερνετ εχει γινει πολύ πιο γρηγορο, σκέφτομαι να ακολουθήσω τις οδηγίες σου.
Χαιρετισμούς.