Light Box Tutorial

Lightbox είναι μια επαναστατική javascript που σας επιτρέπει να δείτε τις εικόνες , τα βίντεο ή ακόμα και μια ολόκληρη ιστοσελίδα σε μια ημι- διαφανή επίστρωση σε ένα δικτυακό τόπο . Υπάρχουν πολλές εκδόσεις και προσαρμογές των Lightbox , αλλά είναι όλοι διαμορφώθηκε μετά Lightbox JS , το οποίο γράφτηκε αρχικά από Lokesh Dhakar . Αν Lightbox JS μπορεί να εμφανιστεί σύγχυση σε ένα μη - προγραμματιστή , μπορεί πραγματικά να δημιουργήσει μάλλον εύκολα με μερικές οδηγίες . Να πάρει Lightbox
Η

Αποκτήστε τα κατάλληλα αρχεία . Υπάρχουν διάφορες εκδόσεις του αρχικού Lightbox και το καθένα είναι προσαρμοσμένα σε ένα συγκεκριμένο σύνολο των αναγκών . Εάν πρόκειται να χρησιμοποιήσετε Lightbox μόνο για να εμφανίσετε εικόνες , κατεβάστε τα αρχεία για Lightbox JS 2 . Εάν θέλετε να εμφανίσετε ιστοσελίδες σε φανάρια , υπάρχει ένα πακέτο που ονομάζεται Lightbox Gone Wild που έχει διαμορφωθεί για το σκοπό αυτό . Αν έχετε πρόβλημα να πάρει Lightbox JS 2 να τρέχει στον web server σας , δοκιμάστε να χρησιμοποιήσετε
Lightbox Plus .
Η χρήση Lightbox JS 2
Η

Lighbox JS 2 είναι διαθέσιμο για να κατεβάσετε δωρεάν στο HuddleTogether.com και το αρχείο zip περιλαμβάνει όλα όσα χρειάζεστε για να έχετε lightboxes στην ιστοσελίδα σας . Αφού έχετε κατεβάσει και αποσυμπιέσει τα αρχεία, να δημιουργήσετε ένα φάκελο για τα αρχεία Lightbox για τον web server σας . Ανοίξτε την ιστοσελίδα που θέλετε να έχετε Lightbox εργάζονται για - για παράδειγμα - index.html και εισάγετε τον παρακάτω κωδικό στην κεφαλίδα σας : < ! - Έναρξη LightboxJS2 - >

" < link rel = " stylesheet " href = " http://www.example.com/lightbox.css " type = " text /css " media = " οθόνη " /> < Τύπος script = " text /javascript " src = " http://www.example.com/prototype.js " > < /script > < Τύπος script = " text /javascript "src = " http://www.example.com/scriptaculous.js?load = επιπτώσεις " > < /script > Προσθέστε την επιχείρηση σας src="http://www.example.com/js/lightbox.js"> < /script > < ! - End LightboxJS2 - > "

Ρυθμίστε τους καταλόγους για να ταιριάζει με τη δομή του καταλόγου σας . Στη συνέχεια, ανοίξτε το αρχείο Lightbox.cs και πηγαίνετε στο τέλος του εγγράφου . Επεξεργαστείτε τις διαδρομές για prev.gif και next.gif για να ταιριάζει με τη δομή του καταλόγου σας . Κάντε το ίδιο σε lightbox.js για loading.gif και close.gif . Τώρα ανεβάσετε τα αρχεία στον κατάλογο Lightbox σας στο web server σας . Lightbox είναι τώρα έτοιμο για χρήση στην ιστοσελίδα σας .

Για να χρησιμοποιήσετε Lightbox θα πρέπει να καλέσετε το σενάριο . Το σενάριο Lightbox καλείται από ένα συνδυασμό με την αναφορά της υπερ-σύνδεσης και την εικόνα HTML tags. Απλά χρησιμοποιήστε το παρακάτω παράδειγμα για να εισάγετε μια εικόνα που λειτουργεί ως ένα lightbox :

" < /a> "

Αν καλέσετε πολλές εικόνες σε μια ιστοσελίδα σελίδα με αυτόν τον τρόπο , θα είστε σε θέση να τα αναζητήσετε στο Lightbox χρησιμοποιώντας τα κουμπιά προηγούμενο και επόμενο .
εικόνων
εικόνων