Πώς να χρησιμοποιήσετε ένα Lightbox σε JavaScript

Lightbox είναι ένα σενάριο JavaScript που μπορείτε να χρησιμοποιήσετε στις ιστοσελίδες σας . Αντί να ανοίξετε ένα κλικ την εικόνα σε μια εντελώς νέα ιστοσελίδα , Lightbox επικαλύπτει την πατήσατε εικόνα στην κορυφή της τρέχουσας ιστοσελίδας , εξασθένιση της τρέχουσας σελίδας στο παρασκήνιο . Μπορείτε να χρησιμοποιήσετε Lightbox στις ιστοσελίδες σας κατεβάζοντας τα αρχεία script Lightbox , CSS και την εικόνα , στη συνέχεια τη διάθεσή τους στο διακομιστή σας Web . Μετά συμπεριλαμβανομένων των scripts Lightbox και το αρχείο CSS στην κεφαλίδα της σελίδας σας , μπορείτε να χρησιμοποιήσετε Lightbox για μια σύνδεση εικόνας με την προσθήκη ενός χαρακτηριστικού σε σύνδεσμο της εικόνας . Οδηγίες
Η 1

Κατεβάστε το αρχείο zip Lightbox από LokeshDhakar.com . Τοποθετήστε τα περιλαμβάνονται " css ", "Εικόνες " και " js " καταλόγους στο διακομιστή Web σας . 2

Ανοίξτε πηγαίο κώδικα HTML της σελίδας σας στο Web σε ένα πρόγραμμα επεξεργασίας κειμένου .
Η
3

Προσθέστε τις ακόλουθες γραμμές στο header της σελίδας , ανάμεσα στο « " και " " ετικέτες στον πηγαίο κώδικα :

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

Προσθέστε την επιχείρηση σας src="js/scriptaculous.js?load=effects,builder"> ?

Προσθέστε την επιχείρηση σας src="js/lightbox.js">

Η 4

Χρησιμοποιήστε Lightbox για μια σύνδεση εικόνας με την προσθήκη του " rel = " lightbox " " ιδιοκτησίας σε οποιαδήποτε ετικέτα σύνδεσμος εικόνας στον κώδικα . Για παράδειγμα, η ακόλουθη ετικέτα δημιουργεί ένα σύνδεσμο που ονομάζεται " Link" που ανοίγει το " example.jpg " εικόνα στο " εικόνες " κατάλογο σε ένα παράθυρο Lightbox , με τον τίτλο «Τίτλος» :

Σύνδεσμος
5

Αποθηκεύστε το αρχείο πηγαίου κώδικα HTML και να το φορτώσετε στο διακομιστή Web σας .


Η