Εάν συναντήσετε έναν ιστότοπο εικόνων που έχει δημιουργηθεί με jQuery, πιθανότατα θα χρησιμοποιεί ένα lightbox. Η δύναμη ενός lightbox είναι ότι μπορεί να μετατρέψει ακόμη και μια απλή βιβλιοθήκη εικόνων σε μια ελκυστική και αποτελεσματική γκαλερί. Σε αυτό το χαρακτηριστικό έγκειται η δημοτικότητα τέτοιων προσθηκών για το jQuery στον τομέα του σχεδιασμού ιστοσελίδων.
Χάρη στην κοινότητα jQuery, υπάρχει μεγάλο ποσόπρόσθετα lightbox, τα οποία δημιουργούν εξαιρετικές ευκαιρίες στους σχεδιαστές να εργαστούν με εικόνες. Στο σεμινάριο μας, παρουσιάζουμε 15 διαφορετικά πρόσθετα που πρέπει να προσέξετε.
συμπλήρωση
Το TopUp είναι μια εύχρηστη βιβλιοθήκη JavaScript για την διακριτική εμφάνιση εικόνων και ιστοσελίδων. Η διαχείριση της βιβλιοθήκης γίνεται μέσω jQuery και jQuery UI για συμβατότητα μεταξύ προγραμμάτων περιήγησης και συμπαγή.
Πρόσθετο υψηλής διαφάνειας
Το Highslide είναι ένα ειδικό εργαλείο για την προβολή εικόνων, πολυμέσων και γκαλερί.
κουτί χρώματος
Μικρό προσαρμοσμένο πρόσθετο για jQuery 1.3+.
Το Lightbox 2 είναι ένα απλό, διακριτικό σενάριο που χρησιμοποιείται για την εμφάνιση μιας εικόνας επικάλυψης σε ένα τρέχουσα σελίδα. Είναι εύκολο στην εγκατάσταση και λειτουργεί σε όλα τα σύγχρονα προγράμματα περιήγησης.
Το prettyPhoto δεν υποστηρίζει μόνο εικόνες αλλά και βίντεο, flash, YouTube και Ajax. Lightbox για αρχεία πολυμέσων.
Το Slimbox 2 είναι ένας κλώνος 4 KB του Light box 2 που υλοποιείται με το jQuery.
Το Shadowbox είναι ένα πρόγραμμα προβολής πολυμέσων που βασίζεται στο web που υποστηρίζει όλες τις δημοφιλείς μορφές πολυμέσων. Το Shadowbox είναι γραμμένο σε JavaScript και CSS και είναι εξαιρετικά προσαρμόσιμο.
Pirobox Extended V.1.0.
Ένα από τα πλεονεκτήματα αυτής της προσθήκης είναι η δυνατότητα ανοίγματος οποιουδήποτε τύπου αρχείου - από ενσωματωμένο περιεχόμενο σε αρχείο .swf, από απλή εικόνασε αρχείο .pdf.
Άλλα εξαιρετικά χαρακτηριστικά περιλαμβάνουν αυτόματη αλλαγή μεγέθους εικόνας και υποστήριξη μεταφοράς και απόθεσης.
Το GreyBox μπορεί να χρησιμοποιηθεί για την εμφάνιση ιστοτόπων, εικόνων και άλλου περιεχομένου.
Το Super Box είναι ένα πρόσθετο που εμφανίζει παράθυρα με εφέ lightbox.
Ένα απλό σενάριο για βολική θέασηεικόνες στον ιστότοπό σας. Εύκολο στην εγκατάσταση και λειτουργεί σε όλα τα δημοφιλή προγράμματα περιήγησης. Μπορείτε να δείτε ένα παράδειγμα εργασίας. Η σύνδεση της ίδιας της βιβλιοθήκης πραγματοποιείται σε δύο βήματα:
Εγκατάσταση
Το Lightbox χρησιμοποιεί τις βιβλιοθήκες Prototype και Scriptaculous. Πρέπει να τα συμπεριλάβετε στην ενότητα κεφαλίδας μιας σελίδας HTML:
Δραστηριοποίηση
Για να ανοίξει η εικόνα χρησιμοποιώντας το Lightbox, πρέπει να προσθέσετε το χαρακτηριστικό rel=”lightbox” στην ετικέτα συνδέσμου εικόνας. Ένας τίτλος, εάν απαιτείται, μπορεί να τοποθετηθεί στο χαρακτηριστικό title. Για παράδειγμα, όπως αυτό:
Εάν χρειάζεται να τοποθετήσετε πολλές λογικά σχετικές εικόνες και να οργανώσετε την πλοήγηση μεταξύ τους στο παράθυρο προβολής, τότε πρέπει να τοποθετήσετε το όνομα της ομάδας σε αγκύλες για κάθε σχετική εικόνα στο χαρακτηριστικό rel=”lightbox”. Για παράδειγμα:
εικόνα #1
εικόνα #2
εικόνα #3
Στη σελίδα μπορούν να τοποθετηθούν πολλές γκαλερί φωτογραφιών και καθεμία από αυτές μπορεί να περιέχει οποιονδήποτε αριθμό εικόνων.
Η προηγούμενη έκδοση της βιβλιοθήκης LightBox υλοποιήθηκε χωρίς τη χρήση βιβλιοθηκών τρίτων. Δεν έχει κινούμενα σχέδια και δεν έχει επιλογή προβολής πολλών σχετικών εικόνων.
Σχόλια: 8
διαχειριστής:
qpeo, έλεγξα την εργασία της βιβλιοθήκης στην 6η και 7η έκδοση του MS IE - δεν παρατήρησα κανένα πρόβλημα.
Έλενα:
Χαίρετε.
Σας ευχαριστούμε για τον ιστότοπό σας και για αυτό το σενάριο. Πολύ εύκολο να τεθεί, η μόνη ερώτηση. Είναι δυνατόν να γίνει έτσι ώστε να υπάρχει και slide show, δηλαδή να μην κάνουμε κλικ στο ποντίκι, αλλά να αλλάξουμε τις ίδιες τις εικόνες; Μπορείτε να προσθέσετε κάποιο κωδικό;
Πες μου ποιος ξέρει, ευχαριστώ εκ των προτέρων για την απάντηση.
UPD 2014-02-14
Θυμάστε, μοιράστηκα ένα σενάριο για την προβολή φωτογραφιών πριν από έξι μήνες; Καυχήθηκα επίσης ότι ζυγίζει λίγο, λειτουργεί γρήγορα και γενικά είναι όμορφος. Το αν είναι όντως έτσι μπορεί να κριθεί μόνο εξωτερικά, και θα σας δώσω μερικά ακόμη επιχειρήματα υπέρ του σεναρίου. Σήμερα φέρνω στην προσοχή σας τη βελτιωμένη έκδοση του - quickBox 0.2.
Γιατί QuickBox;
Λίγο περισσότερο από όλους χρησιμοποιούν σενάρια που έχουν γίνει ο παραδοσιακός κανόνας. Αν κάπου υπάρχει ένα σενάριο ζουμ, τότε αυτός είναι ο μισός χρόνος Λεπτό κουτίή κουτί φωτός. Αντί για 6 αρχεία που απαιτούνται για κουτί φωτός, το σενάριό μου απαιτεί μόνο δύο: ένα cssκαι ένα JS. Δεν χρειάζονται εικόνες για τη δουλειά του και προφορτώνει φωτογραφίες πριν τις εμφανίσει στην οθόνη και ζυγίζει 6,5 KB.
Εδώ είναι τα κύρια χαρακτηριστικά του:
- χωρίς γραφικά, όλα βασίζονται HTML+CSS
- απαιτούνται δύο αρχεία για να λειτουργήσει +
- έλεγχος των βελών "αριστερά", "δεξιά" και του κουμπιού Esc (λειτουργεί τόσο σε Win όσο και σε MacOS). Αφού μεγεθύνετε τη φωτογραφία, μπορείτε να μεταβείτε στην επόμενη ή την προηγούμενη πατώντας τον κέρσορα στο πληκτρολόγιο και για να κλείσετε το παράθυρο - Esc ή τον σύνδεσμο "Κλείσιμο" επάνω δεξιά.
- αυτόματη δημιουργία γκαλερί: εάν υπάρχουν περισσότερες από μία φωτογραφίες στη σελίδα που θέλετε να ανοίξετε για μεγαλύτερη προβολή, το σενάριο θα δημιουργήσει αυτόματα μια συλλογή και θα εμφανίσει μια λίστα εικόνων επάνω αριστερά. Ούτε το LightBox ούτε το SlimBox μπορούν να το κάνουν αυτό.
- Εάν τα χαρακτηριστικά τίτλου συμπληρωθούν για τις φωτογραφίες, θα εμφανίζονται αυτόματα κάτω από κάθε φωτογραφία ως περιγραφή.
- το σενάριο ελέγχει εάν περιλαμβάνεται το jQuery και αν όχι, φορτώνει
Πως μοιάζει?
Θα σας κάνω να γελάσετε, αλλά δεν υπάρχουν οπτικές διαφορές από την πρώτη έκδοση, εκτός από το στυλ ανοίγματος του παραθύρου. Το σενάριο μοιάζει με αυτό στη δουλειά:
Παράδειγμα
Μπορείτε να δείτε το σενάριο σε δράση στο .
Πώς να εγκαταστήσω
Η εγκατάσταση διαρκεί 1 λεπτό. Θα χρειαστεί να ανεβάσετε τα αρχεία σε οποιονδήποτε φάκελο στο hosting σας μέσω ftp.
- Πώς να εγκαταστήσω?
- Πολύ απλό.
Ευχαριστώ, με βοήθησες πολύ.
Μεταφόρτωση των περιεχομένων του αρχείου στο ριζικό φάκελο/js/. Στην κεφαλή του εγγράφου πριν από την ετικέτα κλεισίματοςγράψε τη γραμμή:
Εάν δεν έχετε ενεργοποιημένο το jQuery, απλώς κατεβάστε το από: /jquery.js. Και έτσι ώστε το σενάριο να μπορεί να επεξεργαστεί τις φωτογραφίες σας. πρέπει να προσθέσετε ένα χαρακτηριστικό σε αυτά: class='quickbox'. Για παράδειγμα, εδώ είναι 4 φωτογραφίες για εσάς:
Κατεβάστε
Το σενάριο είναι δωρεάν, χρησιμοποιήστε το και απολαύστε τη ζωή. Παρακαλώ μην προσπαθήσετε να το πουλήσετε, μην σπάσετε την κοινή λογική :-).
Εξαιρετική εναλλακτική λύση στο LightBox χρησιμοποιώντας jQuery.
2. γκαλερί javascript "Awesome Box"
Υποστηρίζει IE6. Η πλοήγηση με πληκτρολόγιο είναι δυνατή: κουμπί n (επόμενο) - επόμενη εικόνα. κουμπί p (προηγούμενο) - προηγούμενο.
2. Mootools που εμφανίζουν περιεχόμενο σε modal windows "Bumpbox 2.0"
Υποστήριξη διάφορες μορφές: PDF, flv, swf, ήχος, περιεχόμενο HTML, υποστήριξη καρέ.
Ένα συμπαγές και εύκολο στη σύνδεση σενάριο που σας επιτρέπει να εμφανίζετε μεγεθυμένες εικόνες σε ένα αναδυόμενο μπλοκ. Ιστότοπος στα ρωσικά.
4. Πρόσθετο jQuery "ColorBox"
Το πρόσθετο υλοποιείται σε πέντε διαφορετικά στυλ. Για να το δείτε σε δράση με διαφορετικά σχέδια, ακολουθήστε τους συνδέσμους Παραδείγματα 1 έως 5.
5 Visual Lightbox
Άλλο ένα σενάριο από την οικογένεια lightbox. Είναι δυνατή η προσαρμογή τόσο των μικρογραφιών των εικόνων όσο και του στυλ εμφάνισης μιας φωτογραφίας πλήρους μεγέθους.
6. Απλό Modal Box με αναδυόμενη εικόνα σε στυλ JQuery Lightbox
Ομαλή μετάβαση από μονόχρωμη σε έγχρωμη κατά την αιώρηση χρησιμοποιώντας jQuery.
7. γκαλερί javascript "EnlargeIt!"
8. Αναδυόμενο παράθυρο "LightWindow" σε στυλ Lightbox
Είναι δυνατή η εμφάνιση πληροφοριών σε διάφορες μορφές σε ένα αναδυόμενο παράθυρο: μεμονωμένες εικόνες, συλλογή, αρχεία πολυμέσων, φόρμες. Η δοκιμαστική σελίδα έχει συνδέσμους προς διάφορες επιλογές περιεχομένου.
9. Πρόσθετο jQuery SuperBox
Μια άλλη εναλλακτική στο γνωστό πρόσθετο LightBox. Κάντε κλικ στην εικόνα στη σελίδα επίδειξης για να δείτε το σενάριο σε δράση.
10.jQuery Πρόσθετο Facebox
11. πρόσθετο javascript "FancyZoom"
12. "FancyZoom" χρησιμοποιώντας τη βιβλιοθήκη jQuery
13. Πρόσθετο jQuery "YoxView" για εμφάνιση εικόνων, φλας και βίντεο
Καταπληκτικό εφέ ομαλής μετάβασης περιεχομένου. Στη σελίδα περιγραφής θα βρείτε συνδέσμους προς όλα τα δείγματα επίδειξης της προσθήκης.
14. Πρόσθετο "Floatbox"
15. Greybox
16. "Highslide JS"
17. Πρόσθετο Mootools "ImageZoom"
18. πρόσθετο jQuery "lightbox"
19. Lightbox+
Η αλλαγή του μεγέθους του παραθύρου του προγράμματος περιήγησης αλλάζει το μέγεθος της εικόνας.
20. Πρόσθετο "LightBox2"
Χρήσεις βιβλιοθήκη javascriptπρωτότυπο.
21. "Lighter Box2"
22. Πρόσθετο jQuery για εμφάνιση εικόνων "TopUp".
23. Mootools Popup Modal "SimpleModal"
Εμφάνιση διαφορετικού περιεχομένου σε μοντάλ παράθυρα.
24. MediaBoxAdvanced
Εμφάνιση πληροφοριών σε τροπικά παράθυρα με χρήση Mootools: εικόνες, βίντεο, κινούμενα σχέδια, κοινωνικές υπηρεσίες κ.λπ.