Javascript Lightbox Tutorial

Lightbox είναι μια δωρεάν open-source βιβλιοθήκη javascript που μπορείτε να χρησιμοποιήσετε για να παρουσιάσει μια συλλογή εικόνων στην ιστοσελίδα σας με έναν οπτικά ελκυστικό τρόπο . Όταν ένας χρήστης κάνει κλικ σε μία από τις μικρογραφίες των εικόνων σας , Lightbox θα σβήσει το φόντο της σελίδας και ζουμ στην εικόνα για να γεμίσει το παράθυρο του browser . Ο δημιουργός του Lightbox κατέστησε δυνατό να προσθέσετε αυτή τη λειτουργικότητα της ιστοσελίδας σας με μόνο κάποιες μικρές τροποποιήσεις στον κώδικα HTML σας . Τα πράγματα που θα χρειαστείτε
πρόγραμμα περιήγησης στο Web
HTML σελίδα (ες ) Στοκ Εικόνες

Παρουσίαση Περισσότερες οδηγίες
Η

1 Ανοίξτε το web browser σας και πηγαίνετε στο Lightbox αρχική σελίδα ( βλέπε Πόρων ) . Κατεβάστε την τελευταία έκδοση της βιβλιοθήκης . 2

Αποσυμπιέστε το αρχείο ZIP που έχετε κατεβάσει . Περιέχει ένα δείγμα αρχείου HTML και τρεις φακέλους: " CSS, " το οποίο περιέχει stylesheets χρησιμοποιούνται από Lightbox ? " Εικόνες ", το οποίο περιέχει εικόνες που χρησιμοποιούνται από τη βιβλιοθήκη ? Και « JS , " το οποίο περιέχει τον πηγαίο κώδικα Lightbox καθώς και το πρωτότυπο Scriptaculous βιβλιοθήκες που απαιτούνται από Lightbox .
εικόνων 3

Αντιγράψτε το " css ", "Εικόνες " και " js " φακέλους σε μια θέση που είναι προσβάσιμο από την ιστοσελίδα σας . Τα υπόλοιπα βήματα θα υποθέσουμε ότι έχετε να τοποθετούνται στον ίδιο κατάλογο με το αρχείο HTML σας? Εάν τα τοποθετήσετε σε μια διαφορετική θέση , θα πρέπει να προσαρμόσετε τις διαδρομές σε αυτά τα βήματα ανάλογα
Η 4

. Ανοίξτε το αρχείο HTML που θα χρησιμοποιήσει Lightbox στον επεξεργαστή κειμένου που προτιμάτε .
5

Αν δεν χρησιμοποιείτε ήδη τις Πρωτότυπο και Scriptaculous βιβλιοθήκες στην ιστοσελίδα σας , προσθέστε τις ακόλουθες δύο γραμμές στο " ? " ενότητα του αρχείου HTML :

Προσθέστε την επιχείρηση σας src="js/prototype.js"> <Τύπος script = " text /javascript " src = " js /scriptaculous.js ; φορτίο = επιπτώσεις , οικοδόμος " >

μπορείτε να παραλείψετε αυτό το βήμα αν χρησιμοποιείτε ήδη Πρωτότυπο και Scriptaculous .
Η 6

Προσθέστε τις ακόλουθες δύο γραμμές στην ενότητα " " μετά τις γραμμές που φορτώνουν Πρωτότυπο και Scriptaculous :

<Τύπος script = " text /javascript " src = " js /lightbox.js " >
Η 7

Προσθήκη το φαινόμενο Lightbox σε όλους τους συνδέσμους της εικόνας με την προσθήκη του rel = " lightbox" χαρακτηριστικό σε " " ετικέτα του συνδέσμου , καθώς και να παρέχουν ένα προαιρετικό τίτλο που θα εμφανίζεται στο pop- up παράθυρο . Για παράδειγμα , αν έχετε μια σύνδεση με την ακόλουθη μορφή :

Re - έγραφε τη σύνδεση ως εξής :

Η
εικόνων