Η συλλογή με μικρογραφίες εικόνων ανταποκρίνεται. Συλλογή εικόνων jQuery με ένα ενδιαφέρον εφέ

12.01.2024

Έχω αναθεωρήσει διάφορες γκαλερί εικόνων πολλές φορές και έχω συγκεντρώσει μια εκτενή συλλογή από θεαματικά slideshows και πρόσθετα. Το Lightbox είναι επίσης διαθέσιμο αποκλειστικά σε CSS3, χωρίς τη σύνδεση πρόσθετων βιβλιοθηκών js. Αλλά ο χρόνος δεν σταματά, οι χρήστες χρησιμοποιούν όλο και περισσότερο διάφορες φορητές συσκευές για να σερφάρουν στο Διαδίκτυο, πράγμα που σημαίνει ότι η προσαρμοστικότητα των στοιχείων web και ειδικότερα των γκαλερί φωτογραφιών με το εφέ "" γίνεται μια από τις προτεραιότητες που πρέπει να δώσουν προσοχή οι σχεδιαστές και οι προγραμματιστές ιστοσελίδων να.

Παρουσιάζω μια άλλη επιλογή από 15 προσαρμοστικά πρόσθετα jQuery που είναι φιλικά τόσο με προγράμματα περιήγησης για επιτραπέζιους υπολογιστές όσο και ταιριάζουν τέλεια στις οθόνες διαφόρων φορητών συσκευών (λάπτοπ, smartphone, tablet κ.λπ.).

Παρακολουθήστε το demo στους ιστότοπους των προγραμματιστών, κατεβάστε το πρόσθετο που σας αρέσει και δημιουργήστε, δημιουργήστε, δημιουργήστε...

1. iLightbox

iLightboxείναι ένα ελαφρύ πρόσθετο jQuery Lightbox με υποστήριξη για ένα ευρύ φάσμα διαφορετικών τύπων αρχείων: εικόνες, βίντεο, Flash/SWF, περιεχόμενο Ajax, καρέ και ενσωματωμένοι χάρτες. Αυτό το πρόσθετο προσθέτει επίσης κουμπιά κοινωνικά δίκτυα, που επιτρέπει στους χρήστες να μοιράζονται περιεχόμενο μέσω Facebook, Twitter ή Reddit. Μια εξαιρετική ευκαιρία να οργανώσετε θεαματικά slide shows, γκαλερί εικόνων και βίντεο, με προβολή σε κανονική και πλήρη οθόνη.

iLightboxΛειτουργεί αρκετά γρήγορα και όταν προβάλλεται σε κινητές συσκευές, εμφανίζει περισσότερο από σωστά το επεξεργασμένο περιεχόμενο. Μεταξύ άλλων, χρησιμοποιώντας αυτό το πρόσθετο, μπορείτε εύκολα να εφαρμόσετε την εμφάνιση μπλοκ πληροφοριών σαν ένα παράθυρο μοντάζ.

Εθισμός: jQuery
Υποστήριξη προγράμματος περιήγησης: IE7+, Chrome, Firefox, Safari και Opera
Αδεια: Ο διάβολος ξέρει)))

2. SwipeBox

Swipeboxείναι ένα πρόσθετο JQuery με υποστήριξη για οθόνες αφής κινητών πλατφορμών. Εκτός από εικόνες, η προσθήκη υποστηρίζει ενσωματωμένα βίντεο από το Youtube και το Vimeo. Το Swipebox είναι πολύ εύκολο να προσαρτηθεί σε οποιοδήποτε έργο, το πρόσθετο έχει πολλές εύχρηστες επιλογές για την προσαρμογή της λειτουργικότητας και της συμπεριφοράς του. Ο ιστότοπος του προγραμματιστή έχει λεπτομερή τεκμηρίωση σχετικά με τη σύνδεση και τη χρήση του πρόσθετου, χωρίς περιττό χνούδι, όλα είναι ακριβώς στο σημείο, οπότε νομίζω ότι δεν θα είναι δύσκολο να καταλάβουμε τι, πού και γιατί.

Εθισμός: jQuery
Υποστήριξη προγράμματος περιήγησης: IE9+, Chrome, Safari, Firefox, Opera, IOS4+, Android και Windows Phone
Αδεια: Δεν το έχω αποφασίσει, ίσως είσαι τυχερός)))

3.MagnificPopup

Μια πολύ γνωστή και αποδεδειγμένη προσθήκη lightbox που βασίζεται στο jQuery ή το Zepto.js. Ο συγγραφέας του plugin είναι ο Dmitry Semenov, ο οποίος είναι επίσης ο προγραμματιστής του plugin PhotoSwipe, για το οποίο θα μιλήσω παρακάτω. Παραδίδεται ως πρόσθετο jQuery/Zepto, διαθέτει πιο προηγμένες λειτουργίες που δεν βρίσκονται στο PhotoSwipe, όπως υποστήριξη βίντεο, προβολή χαρτών και περιεχομένου Ajax, υλοποίηση modal windows με ενσωματωμένες φόρμες. Με όλα τα κριτήρια, αυτό είναι ένα άλλο εξαιρετικό εργαλείο για έναν προγραμματιστή ιστού. Υπάρχει ξεχωριστό πρόσθετο για το WordPress και αναλυτική τεκμηρίωση σχετικά με τη ρύθμιση και τη χρήση. Το μόνο καταθλιπτικό είναι η έλλειψη τεκμηρίωσης στα ρωσικά, αν κρίνουμε από το όνομα και το επώνυμο, ο συγγραφέας φαίνεται να είναι Ρώσος, ποτέ δεν κατάλαβε αν ήταν επιβλαβές ή λόγω μιας φανταστικής επίγνωσης της δικής του πολυπλοκότητας, αλλά μπλα. Λοιπόν, εντάξει, ποιος πρέπει να το καταλάβει, επίσης δεν βράσαμε το τσάι μαλακό))).

Εθισμός: jQuery 1.9.1+ ή Zepto.js
Υποστήριξη προγράμματος περιήγησης: IE7 (μερικώς), IE8+, Chrome, Firefox, Safari και Opera
Αδεια: Άδεια MIT

4.PhotoSwipe

Εθισμός: Javascript ή jQuery
Υποστήριξη προγράμματος περιήγησης
Αδεια: Άδεια MIT

11.FeatherLight

Ένα πρόσθετο lightbox 6 kbit για περισσότερο ή λιγότερο έμπειρους προγραμματιστές, εξοπλισμένο με όλες τις πιο απαραίτητες λειτουργίες. Εκτός από την υποστήριξη όλων των κοινών τύπων περιεχομένου (κείμενο, εικόνες, iframe, Ajax), υπάρχει η δυνατότητα σύνδεσης ενός επιπλέον και μπορείτε επίσης να αναπτύξετε τη δική σας επέκταση για αυτό το πρόσθετο, το οποίο θα καλύψει πλήρως τις ανάγκες σας κατά τη δημιουργία ενός νέου σχέδιο. Πώς λειτουργεί όλο αυτό το πράγμα (ανάπτυξη επέκτασης), δεν έχω εμβαθύνει πραγματικά, αλλά όσοι εγκαθιστούν αυτό το πρόσθετο, νομίζω ότι θα το καταλάβουν))).

Εθισμός: jQuery
Υποστήριξη προγράμματος περιήγησης: IE8+, Chrome, Firefox, Safari και Opera
Αδεια: Άδεια MIT

12. LightGallery

LightGallery— ένα πολυλειτουργικό πρόσθετο lightbox με πολλά πρόσθετα χαρακτηριστικά. Έρχεται με περισσότερες από 20 επιλογές για να προσαρμόσετε τις μικρότερες λεπτομέρειες του Lightbox. Υπάρχουν τα πάντα εδώ, καλά, ή σχεδόν τα πάντα)). Πλήρης συλλογή εικόνων με τακτοποιημένες μικρογραφίες, στοιχεία πλοήγησης και μικρογραφίες κύλισης. Απλή σήμανση HTML με τη μορφή μιας μη ταξινομημένης λίστας

LightGallery

Εθισμός: jQuery
Υποστήριξη προγράμματος περιήγησης: IE7+, Chrome, Firefox, Safari, Opera, iOS, Android και Windows Phone
Αδεια: Άδεια MIT

13. StripJS

Ασυνήθιστο, θα έλεγα ακόμη: μια ασυνήθιστη εφαρμογή του lightbox, ή μάλλον, μια ασυνήθιστη παρουσίαση περιεχομένου, όταν μια εικόνα ή ένα βίντεο, στο σχέδιο του lightbox, εμφανίζεται στα δεξιά, γεμίζοντας όχι ολόκληρη την οθόνη, αλλά μόνο ένα δεδομένο μέγεθος μια εικόνα ή ένα βίντεο πλήρους μεγέθους. Σε μεγάλες οθόνες αυτή η προσέγγιση είναι κατανοητή, η αλληλεπίδραση με τη σελίδα παραμένει δυνατή. Στις μικρές οθόνες των φορητών συσκευών, όλη αυτή η πρωτοποριακή σχεδίαση μετατρέπεται ομαλά σε ένα κλασικό «lightbox». Η ιδέα είναι ενδιαφέρουσα, δείτε το demo, ίσως κάποιος προσθέσει τέτοια δημιουργικότητα.

Εθισμός: jQuery
Υποστήριξη προγράμματος περιήγησης: IE7+, Chrome, Firefox, Safari, Opera, iOS 5+ και Android 3+
Αδεια: Άδεια Creative Commons BY-NC-ND 3.0

14.Ελαφρύ στρώμα

Ένα εύκολο στη χρήση πρόσθετο lightbox που ταιριάζει καλά με κάθε έργο και επίσης φαίνεται καλό σε οποιαδήποτε οθόνη. Το πρόσθετο LightLayer παρέχει έλεγχο σε πολλές ρυθμίσεις, όπως αλλαγή του χρώματος φόντου και του βαθμού διαφάνειας, η θέση του βασικού μπλοκ, η επιλογή των εφέ μετάβασης κατά το άνοιγμα/κλείσιμο, λειτουργίες που οι χρήστες μπορούν να χειριστούν ανεξάρτητα. Η προσθήκη λειτουργεί εξαιρετικά με εξωτερικό περιεχόμενο ιστότοπου, ενσωματωμένα προγράμματα αναπαραγωγής βίντεο και χάρτες.

Εθισμός: jQuery
Υποστήριξη προγράμματος περιήγησης: IE9+, Chrome, Firefox, Safari και Opera
Αδεια: Άδεια MIT

15. FluidBox

Το Fluidbox είναι ένα πρόσθετο lightbox αποκλειστικά για εικόνες. Ο αριθμός των πιθανών παραλλαγών στην παρουσίαση της εικόνας είναι πραγματικά εντυπωσιακός. Το πρόσθετο λειτουργεί εξαιρετικά με εικόνες σε διάφορα σχέδια, συμπεριλαμβανομένων αιωρούμενων εικόνων, εικόνων με απόλυτη τοποθέτηση, εικόνων και φωτογραφιών με κορνίζες και εσοχές, με μεμονωμένες εικόνες και συνδυασμένες σε μια συλλογή. Γενικά, είναι χάσιμο χρόνου, δεν είναι ακόμα δυνατό να περιγραφούν όλες οι δυνατότητες του plugin σε μια σύντομη παρουσίαση, επομένως είναι καλύτερα να παρακολουθήσετε το demo, να το στρίψετε, να το γυρίσετε και νομίζω ότι αυτό το πρόσθετο θα αρέσει σε πολλούς .

Εθισμός: jQuery
Υποστήριξη προγράμματος περιήγησης: IE9+, Chrome, Firefox, Safari, Opera
Αδεια: Άδεια MIT

Μάλλον αυτό είναι όλο! Ελπίζω ότι αυτή η σύντομη ανασκόπηση θα σας βοηθήσει να κατανοήσετε τον σωρό των προσφερόμενων προϊόντων ανάπτυξης ιστού. Θα ήθελα να σημειώσω ότι δεν έχω χρησιμοποιήσει όλα τα πρόσθετα που παρουσιάζονται στην επιλογή σε έργα εργασίας. Τα περισσότερα από αυτά τα δοκίμασα σε δοκιμαστικές τοποθεσίες ή στο εργαστήριο, οπότε αν προκύψουν ερωτήσεις, πιθανότατα θα τα λύσουμε μαζί. μαζί, όπως πάντα, θα τα καταφέρουμε.

Αναζητάτε ένα κατάλληλο ρωσικό πρότυπο για τους σκοπούς σας; Σε αυτήν την περίπτωση, θα πρέπει πιθανώς να επισκεφτείτε την αγορά TemplateMonster. Για τον απλό λόγο ότι μόλις πρόσφατα εμφανίστηκε μια νέα ενότητα προτύπων στον ιστότοπο. Τώρα κάθε χρήστης μπορεί να εξοικειωθεί με τη συλλογή, η οποία θα ενημερώνεται και θα ενημερώνεται. Τα κείμενα για τα πρότυπα γράφτηκαν στο χέρι. Αλλά αυτό δεν είναι το μόνο πλεονέκτημα αυτών των έτοιμων λύσεων. Εξάλλου, στα πακέτα τους μπορείτε να βρείτε όλα όσα θα διευκολύνουν την εργασία σας για την ανάπτυξη ενός διαδικτυακού έργου, συμπεριλαμβανομένου ενός οπτικού επεξεργαστή.

Με εκτίμηση, Andrey

1. Συλλογή jQuery με εφέ αλλαγής σελίδας

Μια παρόμοια λύση μπορεί να χρησιμοποιηθεί για την εμφάνιση των πιο πρόσφατων άρθρων ιστολογίου ή για την παρουσίαση προϊόντων.

Ένας μοναδικός τρόπος για να εμφανίσετε τις φωτογραφίες σας σε μια φανταχτερή γκαλερί jQuery.

3. Συλλογή εικόνων jQuery για ένα προϊόν, πρόσθετο “slideJS”.

Η προσθήκη jQuery είναι ιδανική για την υλοποίηση μιας σελίδας προϊόντος με πολλές εικόνες. Η μετάβαση μεταξύ των εικόνων μπορεί να γίνει χρησιμοποιώντας μικρογραφίες ή χρησιμοποιώντας βέλη πλοήγησης.

Η εικόνα μεγεθύνεται όταν τοποθετείτε το ποντίκι σας πάνω της.

5. Κομψή γκαλερί Lightbox "ppGallery"

6. jQuery Touch-Gallery

7. Νέα γκαλερί jQuery με μικρογραφίες

Επαγγελματική γκαλερί jQuery του 2011.

8. Πρόσθετο jQuery "Nivo Zoom"

Ένα άλλο πρόσθετο jQuery υψηλής ποιότητας από τους προγραμματιστές του ρυθμιστικού Nivo. Μεγεθύνετε την εικόνα κάνοντας κλικ στη μικρογραφία.

9. jQuery 3d Wall Gallery

Νέα γκαλερί jQuery για το 2011. Η τροφοδοσία των εικόνων εκτείνεται σε όλο το πλάτος της οθόνης. Μπορείτε να πλοηγηθείτε μεταξύ των φωτογραφιών με τρεις τρόπους: χρησιμοποιώντας τον τροχό του ποντικιού, κάνοντας κύλιση στο επάνω μέρος της συλλογής και χρησιμοποιώντας το μπλοκ μικρογραφιών στο κάτω μέρος. Η γκαλερί φαίνεται πολύ εντυπωσιακή.

Οι εικόνες στη συλλογή μεγεθύνονται τυχαία και μειώνονται ξανά δημιουργώντας ένα εφέ φυσαλίδων.

11. Ασυνήθιστη εμφάνιση εικόνων στη συλλογή jQuery

Χρησιμοποιώντας το ρυθμιστικό στο επάνω μέρος, μπορείτε να αλλάξετε την απόσταση μεταξύ των εικόνων στη στοίβα. Όταν κάνετε κλικ σε μια εικόνα, αυτή περιστρέφεται.

12. Πρόσθετο jQuery gallery "MB.Gallery"

13. Συλλογή jQuery που εκτείνεται για να γεμίσει ολόκληρη την οθόνη

Πρόσθετο από το 2011. Μια νέα συλλογή με περιγραφές εικόνων, που εκτείνονται σε ολόκληρη την περιοχή του παραθύρου του προγράμματος περιήγησης, ανεξάρτητα από το μέγεθός του. Οι μικρογραφίες της εικόνας υλοποιούνται με ενδιαφέρον. Η μετάβαση μεταξύ των φωτογραφιών πραγματοποιείται χρησιμοποιώντας τα βέλη κοντά στη μικρογραφία και χρησιμοποιώντας τον τροχό του ποντικιού.

14. Ελαφριά γκαλερί jQuery

Το πρόσθετο σαρώνει αυτόματα το φάκελο και δημιουργεί μικρά αντίγραφα εικόνων.

16. Κομψή γκαλερί που χρησιμοποιεί τις βιβλιοθήκες jQuery και Raphael

Ένα ενδιαφέρον εφέ όταν τοποθετείτε το ποντίκι πάνω από μια μικρογραφία.

17. Νέα έκδοση του πρόσθετου jQuery "Supersized" έκδοση 3.1

Πολύ πρόσφατα ανέφερα ήδη αυτήν τη λύση jQuery για τη δημιουργία γκαλερί πλήρους οθόνης. Σήμερα θέλω να σας παρουσιάσω τελευταία έκδοσηαυτό το επαγγελματικό πρόσθετο. Το σενάριο έχει ξαναγραφτεί πλήρως, τώρα η γκαλερί λειτουργεί ακόμα πιο γρήγορα και έχουν προστεθεί μερικές ενδιαφέρουσες ρυθμίσεις, για παράδειγμα, πλοήγηση με χρήση του πληκτρολογίου, μεταβλητή ταχύτητα αλλαγής εικόνων, μέγεθος οθόνης και άλλα.

18. Πρόσθετο jQuery "Galleria 1.2.2"

Νέα γκαλερί jQuery για τα έργα σας.

Η συλλογή εμφανίζεται στη σελίδα όταν πατάτε ένα κουμπί. Γύρω από τη μεγεθυμένη εικόνα εμφανίζονται μικρογραφίες. Μπορείτε να ελέγξετε την αυτόματη αλλαγή των εικόνων. Τεχνολογίες που χρησιμοποιούνται: jQuery, CSS, PHP.

20. Πρόσθετο "Timer Gallery"

Συλλογή jQuery. Εφαρμόστηκε αυτόματη αλλαγή διαφανειών και κύλιση μικρογραφιών εάν υπάρχουν πάρα πολλές από αυτές.

Πρόσθετο συλλογής εικόνων χρησιμοποιώντας jQuery.

22. γκαλερί javascript για προβολή σε κινητές συσκευές "PhotoSwipe"

Μια συλλογή εικόνων βελτιστοποιημένη για προβολή σε κινητές συσκευές (τηλέφωνα ή tablet).

23. γκαλερί javascript με εφέ 3D

24. jQuery morphing gallery

Νέο ρυθμιστικό jQuery. Πολλά δροσερά κινούμενα εφέ κατά την αλλαγή διαφανειών.

25. Πρόσθετο jQuery "Galleria 1.2.3"

26. Συλλογή εικόνων jQuery "Image Wall"

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

27. Γκαλερί CSS3

Ενδιαφέρον εφέ αιώρησης.

28. Γκαλερί με μινιατούρες “TN3 Gallery”

Συλλογή jQyery με μικρογραφίες. Έχει υλοποιηθεί η δυνατότητα προβολής σε συμπαγές παράθυρο και σε παράθυρο πλήρους οθόνης, καθώς και η δυνατότητα απενεργοποίησης/ενεργοποίησης αυτόματης αλλαγής διαφανειών.

29. Πλέγμα εικόνων "Grid-Gallery"

Το πλέγμα εικόνας τεντώνεται ανάλογα με το πλάτος του παραθύρου του προγράμματος περιήγησης. Ένα ενδιαφέρον εφέ αιώρησης: η ενεργή γραμμή και στήλη επισημαίνονται.

30. Συλλογή ανταλλαγής jQuery

Ελαφριά γκαλερί jQuery σε λίγες γραμμές κώδικα.

Η δοκιμαστική σελίδα παρουσιάζει πολλές επιλογές για αναπτυσσόμενα mega μενού, σε διαφορετικά στυλ. Σε αυτό το μενού μπορείτε να διαμορφώσετε: το εφέ εγκατάλειψης, την ταχύτητα εγκατάλειψης και επίσης να κάνετε μια επιλογή μεταξύ μιας εγκατάλειψης κάνοντας κλικ ή τοποθετώντας το ποντίκι πάνω από ένα στοιχείο.

31. Συλλογή εικόνων jQuery

Συλλογή jQuery με λεζάντες εικόνων. Αρκετά εφέ μετάβασης διαφανειών. Η πλοήγηση μεταξύ των εικόνων πραγματοποιείται είτε χρησιμοποιώντας βέλη είτε κάνοντας κλικ στη μικρογραφία.

Η εικόνα και οι μινιατούρες της είναι φτιαγμένες με τη μορφή κύκλων.

33. Πρόσθετο χαρτοφυλακίου φωτογράφων jQuery "Portfolio Image Navigation"

Μια πρωτότυπη λύση javascript για το σχεδιασμό του portfolio ενός φωτογράφου. Η πλοήγηση μεταξύ των εικόνων πραγματοποιείται χρησιμοποιώντας τα βέλη Επάνω/Αριστερά/Δεξιά και χρησιμοποιώντας μίνι τετράγωνα (απομίμηση κίνησης σε χώρο 2D). Μπορείτε να ομαδοποιήσετε φωτογραφίες από διαφορετικές συνεδρίες φωτογραφιών σε διαφορετικές κάθετες σειρές και να πλοηγηθείτε σε αυτές χρησιμοποιώντας στοιχεία πλοήγησης. Δείτε το demo.

34. Πρόσθετο "jmFullZoom"

Πρόσθετο για την προβολή εικόνων που εκτείνονται σε ολόκληρο το μέγεθος του παραθύρου του προγράμματος περιήγησης. Μπορεί να χρησιμοποιηθεί για την εμφάνιση έργων από χαρτοφυλάκιο.

35. Φωτογραφική κάρτα

Γκαλερί ενσωματωμένη με Χάρτης Google. Μπορείτε να το επεκτείνετε σε πλήρη οθόνη κάνοντας κλικ στο εικονίδιο στην κάτω δεξιά γωνία. Ιδανικό για ταξιδιωτικές ιστοσελίδες.

36. Συλλογή εικόνων με μικρογραφίες

Συλλογή jQuery με μικρογραφίες.

37. jQuery gallery "Galleriffic"

Παρουσίαση με μικρογραφίες.

38. Πρόσθετο jQuery CSS3 "Wave Display Effect"

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

Πολλές επιλογές και ρυθμίσεις εμφάνισης.

42. Plogger

43. Μια απλή, χαριτωμένη γκαλερί φτιαγμένη με CSS, χωρίς χρήση σεναρίων

Φαίνεται όμορφο και λειτουργεί εξαιρετικά σε όλα τα σύγχρονα προγράμματα περιήγησης

Μπορείτε να ελέγξετε την αυτόματη προβολή διαφανειών (έναρξη/διακοπή), να αλλάξετε διαφάνειες χρησιμοποιώντας βέλη πληκτρολογίου, αυτόματη σελιδοποίηση τίτλων διαφανειών εάν υπάρχουν πολλοί από αυτούς, να υποστηρίζει πολλές γκαλερί σε μία σελίδα, λεζάντες για διαφάνειες, υποστήριξη API και τη δυνατότητα δημιουργίας δικών σας εφέ μετάβασης διαφανειών

46. Γκαλερί με τη μορφή στοίβας φωτογραφιών

Κάπως έτσι πρέπει να είναι το αποτέλεσμα της γκαλερί που θα δημιουργήσουμε. Μπορείτε να παρακολουθήσετε το demo και, αν θέλετε, να κατεβάσετε το τελικό αποτέλεσμα της γκαλερί.

Σε αυτό το σεμινάριο θα σας δείξω πώς να δημιουργήσετε ένα μινιμαλιστικό, αλλά ταυτόχρονα βολικό και λειτουργικό γκαλερί φωτογραφιών στο jQuery, ή μια συλλογή εικόνων, όπως θέλετε. Η γκαλερί έχει τη δυνατότητα δημιουργίας κατηγοριών, ακολουθούμενη από φιλτράρισμα. Είναι επίσης δυνατή η έναρξη μιας προβολής διαφανειών. Η συλλογή λειτουργεί σε όλα τα προγράμματα περιήγησης, επομένως δεν θα υπάρχουν προβλήματα με την προσαρμογή.

Δύο δωρεάν βιβλιοθήκες θα χρησιμοποιηθούν για τη δημιουργία αυτής της γκαλερί JQuery: QuicksandΚαι PrettyPhoto. Κάνουν τη δημιουργία μιας γκαλερί πολύ πιο εύκολη. Όπως πάντα, μπορείτε να δείτε το αποτέλεσμα της εργασίας στη σελίδα επίδειξης και επίσης να κάνετε λήψη του αρχείου από τη συλλογή εργασίας και όλα τα αρχεία προέλευσης. Το μόνο μειονέκτημα, θα λέγαμε, είναι η χειροκίνητη δημιουργία μικρογραφιών για μεγάλες εικόνες. Και σε όλα τα άλλα αυτό στοάάξια προσοχής.

ΠΗΓΕΣ

Σήμανση HTML

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

Κατηγορίες:

Ολοι

Κατηγορία 1

Κατηγορία 2

Κατηγορία 3

Κατηγορία 4

Όνομα της εικόνας

Όπως αναφέρθηκε παραπάνω, τα στοιχεία της λίστας είναι εικόνες στη συλλογή. Κάθε στοιχείο λίστας περιλαμβάνει στοιχεία. Αυτή είναι η ίδια η εικόνα, ή μάλλον η μικρογραφία της, καθώς και μια περιγραφή. Η μικρογραφία είναι ένας σύνδεσμος προς την κύρια εικόνα. Το χαρακτηριστικό rel απαιτείται για να καλέσετε το javascript και να ανοίξετε την κύρια εικόνα.

Μην ξεχνάτε επίσης 2 σημαντικά πράγματα: το στοιχείο της λίστας li πρέπει να έχει ένα μοναδικό χαρακτηριστικό data-id. Το χαρακτηριστικό data-type περιέχει την κατηγορία κατηγορίας, τη λίστα της οποίας περιέγραψα παραπάνω. Όλα φαίνεται να αφορούν τη σήμανση.

Στυλ CSS

Δεν θα επικεντρωθώ ιδιαίτερα στα στυλ, καθώς χρησιμοποιούμε μια έτοιμη βιβλιοθήκη PrettyPhoto, το οποίο είναι υπεύθυνο για τη μεγέθυνση της εικόνας, και κώδικας cssαρκετά πολύ. Ωστόσο, αξίζει να σημειωθεί ότι υπάρχουν 5 επιλογές για το σχεδιασμό μιας μεγεθυσμένης εικόνας, αν και ιδανικά μόνο 3, αφού σε δύο επιλογές αφαιρείται μόνο η στρογγυλοποίηση.

Ως εκ τούτου, θα δείξω μόνο Στυλ CSSγια μικρογραφίες και λίστα κατηγοριών.

Κατηγορία χαρτοφυλακίου (margin-bottom:30px;)
.portfolio-categli (
οθόνη: inline;
margin-right:10px;
}
.image-block(
display:block;
θέση: σχετική;
}
.image-block img (
περίγραμμα: 1px συμπαγές #d5d5d5;
περίγραμμα-ακτίνα: 4px 4px 4px 4px;
φόντο:#FFFFFF;
padding: 10px;
}
.image-block img:hover (
περίγραμμα: 1px συμπαγές #A9CF54;
box-shadow:0 0 5px #A9CF54;
}
.portfolio-area li (
float: αριστερά;
περιθώριο: 0 12 px 20 px 0;
υπερχείλιση: κρυφό;
πλάτος: 245 px;
padding: 5px;
}
.home-portfolio-text ( margin-top:10px; )
li.active a ( κείμενο-διακόσμηση:υπογράμμιση; )

Κατ 'αρχήν, όλα πρέπει να είναι ξεκάθαρα με στυλ. Για να ευθυγραμμιστούν οι κατηγορίες, η ιδιότητα εμφάνισης έχει οριστεί σε ενσωματωμένη . Για να δώσετε το εφέ ενός περιγράμματος στην εικόνα, ορίστε το χρώμα φόντου (λευκό) και το padding σε 10 pixel. Τα μεγέθη των στοιχείων λίστας ορίζονται σε .portfolio-area li .

jQuery

Και τέλος, το πιο σημαντικό είναι για ποιο σκοπό είναι όλο το μάθημα. Αυτός είναι ο κώδικας jQuery. Ας ξεκινήσουμε φιλτράροντας τις εικόνες ανά κατηγορία.

// Επιλέξτε όλα τα θυγατρικά στοιχεία της περιοχής χαρτοφυλακίου και γράψτε σε μια μεταβλητή
var $data = $(".portfolio-area").clone();

$(".portfolio-categ li").click(function(e) (
$(".filter li").removeClass("active");

Var filterClass=$(this).attr("class").split(" ").slice(-1);

Αν (filterClass == "όλα") (
var $filteredData = $data.find(".portfolio-item2");
) άλλο (
var $filteredData = $data.find(".portfolio-item2");
}
$(".portfolio-area").quicksand($filteredData, (
διάρκεια: 600,
προσαρμογή ύψους: "αυτόματο"
), συνάρτηση () (

LightboxPhoto();
});
$(this).addClass("ενεργό");
επιστροφή ψευδής?
});

Χρησιμοποιώντας τη μέθοδο clone() και έναν επιλογέα, επιλέγουμε όλα τα θυγατρικά στοιχεία του .portfolio-area και τα γράφουμε στη μεταβλητή $data. Στη συνέχεια, παρακολουθούμε το κλικ σε μία από τις κατηγορίες, το στοιχείο li της λίστας με την κλάση .portfolio-categ . Κάνουμε όλες τις κατηγορίες ανενεργές αφαιρώντας το removeClass("ενεργό"), εάν αυτό δεν γίνει, τότε με την πάροδο του χρόνου όλες οι κατηγορίες θα είναι ενεργές και το φιλτράρισμα θα σταματήσει.

Εφόσον κάνουμε κλικ σε ένα στοιχείο λίστας, αυτός ο επιλογέας περιέχει ένα στοιχείο λίστας, δηλαδή li , από αυτό παίρνουμε την τιμή του χαρακτηριστικού class και χρησιμοποιώντας τη μέθοδο split χωρίζουμε το όνομα της κλάσης σε πολλά μέρη, το περίγραμμα είναι ένα κενό (δηλαδή αν η κλάση ήταν "όλα ενεργά" τότε μετά τον διαχωρισμό παίρνουμε έναν πίνακα "όλα" και "ενεργά"). Στη συνέχεια, χρησιμοποιώντας τη μέθοδο slice, επιλέγουμε το πρώτο στοιχείο του πίνακα (στην περίπτωσή μας, "all") και γράφουμε το αποτέλεσμα που προκύπτει στη μεταβλητή filterClass. Εάν δεν υπάρχει χώρος, το όνομα της κλάσης δεν θα αλλάξει.

Στη συνέχεια, ελέγχουμε αν η μεταβλητή filterClass περιέχει τη συμβολοσειρά όλοι, στη συνέχεια χρησιμοποιώντας τη μέθοδο .find επιλέγουμε όλα τα στοιχεία με την κλάση portfolio-item2 από τον πίνακα $data, που εξετάσαμε παραπάνω. Τα επιλεγμένα στοιχεία (και όλα αυτά είναι στοιχεία της λίστας, δηλαδή όλες οι εικόνες) τοποθετούνται στη μεταβλητή filteredData.

Διαφορετικά, εάν το filterClass δεν είναι ίσο όλοι, τότε δεν θα τοποθετήσουμε όλα τα στοιχεία της λίστας στη μεταβλητή filterData, αλλά μόνο εκείνα των οποίων το χαρακτηριστικό τύπου δεδομένων ταιριάζει με την κατηγορία κατηγορίας. Εν ολίγοις, στοιχεία μιας μόνο κατηγορίας.

Και τελικά περνάμε τη μεταβλητή που προκύπτει στη βιβλιοθήκη jquery quicksand, που φιλτράρει τις εικόνες. Αυτά για φιλτράρισμα.

Τώρα, όσον αφορά τη μεγέθυνση της εικόνας στο αναδυόμενο παράθυρο. Όλα είναι πολύ πιο απλά εδώ.

JQuery("a").prettyPhoto((
animationSpeed: "γρήγορη",
slideshow: 5000,
θέμα: "facebook",
show_title: ψευδής,
overlay_gallery: ψευδής
});

Ένα κλικ σε έναν σύνδεσμο του οποίου η ιδιότητα rel αρχίζει με το prettyPhoto παρακολουθείται. Μετά μπαίνει στο παιχνίδι η βιβλιοθήκη όμορφη φωτογραφία, και η εικόνα μεγεθύνεται ως εκ θαύματος. Παρεμπιπτόντως, περνάμε και αρκετές παραμέτρους. Όπως η ταχύτητα κινούμενης εικόνας είναι γρήγορη, η καθυστέρηση προβολής διαφανειών είναι 5 δευτερόλεπτα, το θέμα σχεδίασης Facebook (υπάρχουν 5 συνολικά θέματα, βρίσκονται στον φάκελο εικόνες/prettyPhoto), και επίσης απαγορεύουμε την εμφάνιση του ονόματος της εικόνας και μεγέθυνση της εικόνας όταν τοποθετείτε το ποντίκι.

Γεια σε όλους!
Οι προγραμματιστές όλων των γραμμών, όταν δημιουργούν το επόμενο web project τους, ενδιαφέρονται συχνά για το πώς να παρουσιάσουν στους χρήστες τους διάφορα είδηεικόνες, είτε φωτογραφίες είτε σετ εικόνων. Για αυτό, τα περίεργα μυαλά του διαδικτυακού χώρου, ως επί το πλείστον φυσικά πρόκειται για έναν χώρο «αστικό», αναζητούν όλο και περισσότερες νέες λύσεις για να δημιουργήσουν θεαματικά, πολύχρωμα και κυρίως λειτουργικά slide shows και γκαλερί φωτογραφιών. Ως επί το πλείστον, προσαρμόζονται από προγραμματιστές ώστε να ταιριάζουν με τη σχεδίαση του προτύπου του έργου web που δημιουργείται ή με τη μορφή προσθηκών και λειτουργικών μονάδων για μια συγκεκριμένη μηχανή διαχείρισης ιστότοπου. Αξίζει να κοιτάξετε τα σύγχρονα πρότυπα για τα οποία, ούτε ένα θέμα, με σπάνιες εξαιρέσεις, δεν μπορεί να κάνει χωρίς κάποιο είδος ρυθμιστικού πρόσθετου ή απλό περιστροφέα εικόνας. Επομένως, είναι κατανοητό ότι πολλοί προγραμματιστές ιστού θέλουν να έχουν κάτι τέτοιο στο οπλοστάσιό τους και να εκπλήσσουν τους αναγνώστες τους στο έπακρο παρουσιάζοντας αποτελεσματικά εικόνες στους ιστότοπούς τους.

Συνεχίζοντας τη συνεχιζόμενη σειρά κριτικών αναδυόμενων νέων λύσεων κατά τη δημιουργία, αποφάσισα να συγκεντρώσω μια πιο ολοκληρωμένη συλλογή από τα πιο ενδιαφέροντα και αποτελεσματικά slideshows και γκαλερί φωτογραφιών που έχω συναντήσει ποτέ, που δημιουργήθηκαν χρησιμοποιώντας τη μαγεία του jQuery.
Θα ήθελα να σας προειδοποιήσω αμέσως ότι οι πόροι που συζητούνται στην κριτική είναι κυρίως στα αγγλικά, αλλά νομίζω ότι όποιος το χρειάζεται θα το καταλάβει διαισθητικά ή με τη βοήθεια μεταφραστών, από τους οποίους υπάρχουν καμιά δεκαριά. Και αν ψάξετε αρκετά σκληρά, μπορείτε να βρείτε περιγραφές της τεχνικής για τη δημιουργία κάποιων γκαλερί και ρυθμιστικών στα ρωσικά, καθώς πολλοί από τους προγραμματιστές ιστού μας μεταφράζουν ενώ εργάζονται σε ένα συγκεκριμένο έργο, πρώτα για τον εαυτό τους και στη συνέχεια το ανεβάζουν στο δωρεάν πρόσβασηλεπτομερείς περιγραφές όλων των χειρισμών σας.
Για παράδειγμα, αυτό έκανα, όταν δούλευα στον μηχανισμό δημιουργίας , βρήκα για πρώτη φορά μια επιλογή γκαλερί που ήταν κατάλληλη για μένα στο burzhunet, τη μετέφρασα για καλύτερη κατανόηση του τι έκανα και στο μέλλον Αυτό αποδείχθηκε, τολμώ να ελπίζω, όχι ένα κακό άρθρο σχετικά με τη χρήση του σεναρίου Highslide, με παραδείγματα εργασίας σε διάφορες παραλλαγές εφαρμογής.
Και έτσι, αρκετοί από τους περιττούς στίχους, ας προχωρήσουμε κατευθείαν στην αναθεώρηση, ας παρακολουθήσουμε, ας διαβάσουμε σύντομες εξηγήσεις και ας επιλέξουμε από έναν τεράστιο αριθμό νέων προσθηκών και σεναρίων jQuery για την υλοποίηση ενδιαφέροντων ρυθμιστικών εικόνων, γκαλερί φωτογραφιών, προβολών διαφανειών στους ιστότοπούς σας: ρυθμιστικά αυτόματης και μη αυτόματης αλλαγής, ρυθμιστικά εικόνας φόντου, με και χωρίς μικρογραφίες κ.λπ. και τα λοιπά...

Τοποθεσία | Διαδήλωση

Μια πλήρης, προσαρμόσιμη συλλογή εικόνων jQuery με στοιχεία προβολής διαφανειών, εφέ μετάβασης και πολλαπλές επιλογές άλμπουμ. Συμβατό με όλα τα σύγχρονα προγράμματα περιήγησης για υπολογιστές και κινητά.

Ένα σεμινάριο για το πώς να δημιουργήσετε μια συλλογή πλήρους οθόνης χρησιμοποιώντας το jQuery. Η ιδέα είναι μια μικρογραφία της επιλεγμένης εικόνας πλήρους οθόνης να εμφανίζεται στο πλάι, με μια αντανάκλαση καθώς μετακινείστε μέσα στις εικόνες χρησιμοποιώντας τα βέλη ή το κλικ του ποντικιού. Οι μεγάλες εικόνες μετακινούνται προς τα πάνω ή προς τα κάτω σε στυλ προβολής διαφανειών ανάλογα με τη μετάβαση που επιλέγετε. Η δυνατότητα κλιμάκωσης της εικόνας, η οποία καθιστά την εικόνα στο φόντο ορατή σε λειτουργία πλήρους οθόνης ή προσαρμοσμένη στο μέγεθος της σελίδας.

Slider Parallax

Parallax SliderΜια ενδιαφέρουσα λύση για την οργάνωση της εμφάνισης εικόνων σε μορφή παρουσίασης με στοιχεία χειροκίνητου ελέγχου. Η αρχική τοποθέτηση των μικρογραφιών προσελκύει την προσοχή. Ο επίσημος ιστότοπος έχει μια πλήρη ανάλυση του τρόπου ενσωμάτωσης και διαμόρφωσης του ρυθμιστικού.

Μινιμαλιστική Συλλογή Slideshow με jQueryΜια εξαιρετική συλλογή εικόνων με στοιχεία για αυτόματη αλλαγή εικόνων, καθώς και δυνατότητα χειροκίνητου ελέγχου της εμφάνισης και της επιλογής εικόνων από ένα αναπτυσσόμενο μπλοκ με ένα πλέγμα μικρογραφιών. Ένα από τα μειονεκτήματα είναι η έλλειψη προβολής εικόνων πλήρους μεγέθους, αλλά αυτός είναι ο μινιμαλισμός αυτής της γκαλερί.

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

Minimit Galleryείναι ένα πρόσθετο jQuery με μεγάλη δυνατότητα προσαρμογής, με μεγάλη ποικιλία μεταβάσεων κατά την εμφάνιση εικόνων. Χρησιμοποιώντας τη συλλογή Minimit, μπορείτε να οργανώσετε μια εμφάνιση εικόνων με τη μορφή καρουζέλ, προβολής διαφανειών, ενός απλού περιστροφέα και ενός κανονικού προγράμματος κύλισης εικόνων.

είναι ένα μικροσκοπικό πρόσθετο jQuery (2 kb) που παρέχει έναν απλό, χωρίς νόημα τρόπο εμφάνισης εικόνων ως παρουσίαση.

είναι μια όμορφη γκαλερί javascript, με εύχρηστα χειριστήρια και απρόσκοπτη συμβατότητα σε όλους τους υπολογιστές, τα iPhone και τις κινητές συσκευές. Πολύ εύκολο στην εγκατάσταση και τη διαμόρφωση

Σε αντίθεση με πολλά ρυθμιστικά εικόνας Javascript και jQuery, το Slider.js είναι μια υβριδική λύση, που υποστηρίζεται από μεταβάσεις και κινούμενα σχέδια CSS3.

Αυτό είναι ένα πρότυπο μιας σελίδας για δημιουργία διάφορες παρουσιάσειςσε HTML5 και CSS3.

ΔιάποΤο slideshow είναι ένα έργο με ανοιχτού κώδικα. Εάν θέλετε, μπορείτε να προτείνετε αλλαγές ή βελτιώσεις. Μπορείτε να το κατεβάσετε και να το χρησιμοποιήσετε δωρεάν και τίποτα και κανείς δεν σας εμποδίζει να χρησιμοποιήσετε αυτό το ρυθμιστικό στα έργα σας. Το ρυθμιστικό είναι εύκολο να προσαρμοστεί, υπάρχουν ενδιαφέρουσες μεταβάσεις μεταξύ του παρουσιαζόμενου περιεχομένου και μπορείτε να τοποθετήσετε οτιδήποτε στο ρυθμιστικό, λειτουργεί αρκετά γρήγορα, χωρίς εμπλοκές.

δεν είναι τίποτα άλλο από ένα άλλο εργαλείο για τη δημιουργία προβολών διαφανειών σε ιστότοπους και άλλα έργα ιστού. Υποστηρίζει όλα τα σύγχρονα προγράμματα περιήγησης, οριζόντια και κάθετα κινούμενα σχέδια, υποστήριξη για προσαρμοσμένες μεταβάσεις, API επανάκλησης και πολλά άλλα. Μπορείτε να χρησιμοποιήσετε οποιοδήποτε στοιχεία htmlσε διαφάνειες, κατανοητές και προσβάσιμες για αρχάριους, διανέμονται εντελώς δωρεάν.

JavaScript Slideshow για ευέλικτη ανάπτυξη

Υλοποιήστε τα slideshow σας με αυτό το καταπληκτικό πρόσθετο jQuery. Εργαλείο εξαιρετικά προσαρμόσιμο για να μπορείτε να δημιουργήσετε την παρουσίαση του περιεχομένου σας σύμφωνα με τις απαιτήσεις σας. Για να παρέχεται ευκολότερη ενσωμάτωση με εξωτερικά δεδομένα ή δεδομένα από το CMS σας, χρησιμοποιείται η μορφή δεδομένων. Αυτό νέα έκδοσηκαι γραμμένο από την αρχή. Οι προγραμματιστές προσπάθησαν να περιγράψουν την όλη διαδικασία της συνεργασίας με το πνευματικό τέκνο τους πολύ καθαρά και κατανοητά.

είναι ένα πρόσθετο jQuery που σας επιτρέπει να μετατρέψετε μη ταξινομημένες λίστες σε slideshows με ελκυστικά εφέ κινούμενων σχεδίων. Σε μια παρουσίαση, μπορείτε να εμφανίσετε μια λίστα διαφανειών, είτε χρησιμοποιώντας αριθμούς ή μικρογραφίες, είτε χρησιμοποιώντας τα κουμπιά Προηγούμενο και Επόμενο. Το ρυθμιστικό έχει πολλούς πρωτότυπους τύπους κινούμενων εικόνων, όπως κύβο (με διάφορους υποτύπους), σωλήνα, μπλοκ και άλλα.

Ένα πλήρες σύνολο εργαλείων για την οργάνωση όλων των ειδών παρουσιάσεων διαφόρων περιεχομένων στα web project σας. Οι αστοί έκαναν ό,τι μπορούσαν, συμπεριλαμβανομένου σχεδόν όλων των τύπων διαφόρων ρυθμιστικών και γκαλερί χρησιμοποιώντας τη μαγεία του jQuery. Ρυθμιστικό φωτογραφιών, γκαλερί φωτογραφιών, δυναμική προβολή διαφανειών, καρουζέλ, ρυθμιστικό περιεχομένου, μενού καρτελών και πολλά άλλα, γενικά υπάρχει χώρος για την ακατανίκητη φαντασία μας να λειτουργεί.

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

— ένα απλό ρυθμιστικό χτισμένο σε jQuery, απλό από όλες τις απόψεις, που δεν απαιτεί ειδικές δεξιότητες, νομίζω ότι πολλοί θα το βρουν χρήσιμο για την εφαρμογή παρουσιάσεων στις ιστοσελίδες τους. Το πρόσθετο δοκιμάστηκε σε όλα τα σύγχρονα προγράμματα περιήγησης, συμπεριλαμβανομένου του αργού προγράμματος περιήγησης IE.

jbgalleryείναι ένα είδος widget διεπαφής χρήστη γραμμένο σε javascript της βιβλιοθήκης jQuery. Η λειτουργία του είναι να εμφανίζει μια μεγάλη εικόνα ως φόντο του ιστότοπου σε λειτουργία πλήρους οθόνης, πολλές εικόνες με τη μορφή ρυθμιστικού. Όλες οι λειτουργίες προβολής έχουν χειριστήρια προβολής. Είναι μια ενδιαφέρουσα λύση με τον δικό της τρόπο, και σε ορισμένες περιπτώσεις δεν είναι καν στάνταρ.

Είναι ένα εύχρηστο πρόσθετο jQuery για την εμφάνιση των φωτογραφιών σας ως slideshow με εφέ μετάβασης μεταξύ εικόνων (έχετε δει πιο ενδιαφέρουσες). Το jqFancyTransitions είναι συμβατό και έχει δοκιμαστεί εκτενώς με το Safari 2+. Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+.

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

Ένα άλλο πρόσθετο jQuery από τη σειρά Lightbox, αν και ζυγίζει εξωφρενικά λίγο (9 KB), αλλά έχει έναν τόνο λειτουργικότητας. Υπάρχει μια αξιοπρεπώς σχεδιασμένη διεπαφή που μπορείτε πάντα να βελτιώσετε ή να προσαρμόσετε χρησιμοποιώντας CSS.

Ήδη από το όνομα γίνεται σαφές ότι δεν υπάρχει τίποτα φανταχτερό, έχουμε ένα πολύ απλό αυτόματο scroller εικόνας, με χειριστήρια που λείπουν εντελώς. Ποιος ξέρει, ίσως αυτό το ρυθμιστικό να τραβήξει την προσοχή σας ακριβώς με τον μινιμαλισμό του.

Περιστροφέας εικόνας με διαφορετικούς τύπους μεταβάσεων. Λειτουργεί τόσο αυτόματα όσο και κάνοντας κλικ και είναι αρκετά εύκολο να ρυθμιστεί.

— μια πλήρης συλλογή εικόνων και όχι απλώς ένα ρυθμιστικό. Προεπισκόπηση μικρογραφιών και επιλογή εφέ μετάβασης, πλήρης υποστήριξη για όλα τα προγράμματα περιήγησης, λεπτομερής περιγραφήενσωμάτωση σε ένα έργο web και δωρεάν διανομή.

Αυτή είναι μια υλοποίηση έτοιμων προς χρήση slideshow χρησιμοποιώντας scriptaculous/prototype ή jQuery. Το Horinaja είναι κάπως μια καινοτόμος λύση επειδή σας επιτρέπει να χρησιμοποιήσετε έναν τροχό για να μετακινηθείτε στο περιεχόμενο που βρίσκεται στο ρυθμιστικό. Όταν ο δείκτης του ποντικιού βρίσκεται έξω από την περιοχή της παρουσίασης, η κύλιση πραγματοποιείται αυτόματα όταν ο δείκτης τοποθετηθεί πάνω από την παρουσίαση, η κύλιση σταματά.

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

s3Sliderείναι ένα πρόσθετο jQuery που δημιουργεί μια παρουσίαση από μια μη ταξινομημένη λίστα εικόνων και μπορεί εύκολα να εφαρμοστεί σε οποιαδήποτε πλατφόρμα Ιστού.

Αυτό είναι ένα πρόσθετο jQuery που έχει βελτιστοποιηθεί για την επεξεργασία μεγάλου όγκου φωτογραφιών εξοικονομώντας εύρος ζώνης.

Φόντο Βέγκας

Το πρόσθετο Vegas Background jQuery σάς επιτρέπει να προσθέσετε όμορφη πλήρη οθόνη εικόνες φόντουσε ιστοσελίδες, όλες με στοιχεία προβολής διαφανειών. Εάν μελετήσετε προσεκτικά τις περιπλοκές της εργασίας με την προσθήκη, μπορείτε να βρείτε πολλές ενδιαφέρουσες λύσεις, φυσικά, μόνο εάν τις χρειάζεστε.

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

είναι ένα ελαφρύ (περίπου 5 KB) javascript για την οργάνωση της προβολής εικόνων. Η αυτόματη αλλαγή μεγέθους και κλιμάκωση μεγάλων εικόνων σάς επιτρέπει να προβάλλετε την εικόνα σε πλήρες μέγεθος μέσα στο παράθυρο του προγράμματος περιήγησης

Η έκδοση 4 του PikaChoose jQuery Image Gallery είναι διαθέσιμη! Το Pikachoose είναι ένα ελαφρύ slideshow jQuery με εξαιρετικές δυνατότητες! Ενσωμάτωση με το Fancybox, εξαιρετικά θέματα (αν και όχι δωρεάν) και πολλά άλλα προσφέρονται στην προσοχή σας από τους προγραμματιστές των προσθηκών.

Ελέγχει τον αριθμό των εικόνων στην καταχώρισή σας και δημιουργεί δυναμικά ένα σύνολο συνδέσμων φωτογραφιών ως ψηφιακή πλοήγηση. Επιπλέον, κάνοντας κλικ σε κάθε εικόνα θα μετακινηθείτε προς τα εμπρός ή προς τα πίσω και μπορείτε επίσης να μετακινηθείτε στις εικόνες ανάλογα με την περιοχή στην οποία κάνετε κλικ στην εικόνα (για παράδειγμα: κάνοντας κλικ στην αριστερή πλευρά της εικόνας θα μετακινηθούν οι διαφάνειες εμπρός και πίσω, αντίστοιχα, για τη δεξιά πλευρά της εικόνας).

Ένα άλλο ρυθμιστικό jQuery που θα ταιριάζει τέλεια σε οποιοδήποτε πρότυπο WordPress.

Μια άλλη εξέλιξη του "Nivo", όπως όλα όσα κάνουν τα παιδιά από αυτό το στούντιο, το πρόσθετο είναι κατασκευασμένο με υψηλή ποιότητα, περιέχει 16 μοναδικά εφέ μετάβασης, πλοήγηση με πληκτρολόγιο και πολλά άλλα. Αυτή η έκδοση περιλαμβάνει ένα αποκλειστικό πρόσθετο απευθείας για το WordPress. Έτσι, για όλους τους λάτρεις αυτής της μηχανής blogging, το Nivo Slider θα είναι το κατάλληλο για εσάς.

Πρόσθετο jQuery που σας επιτρέπει να δημιουργήσετε γρήγορα ένα απλό, αποτελεσματικό και όμορφο ρυθμιστικό για εικόνες οποιουδήποτε μεγέθους.

Piroboxείναι ένα ελαφρύ σενάριο "lightbox" του jQuery, η προβολή πραγματοποιείται σε ένα αναδυόμενο μπλοκ που προσαρμόζεται αυτόματα στο μέγεθος της εικόνας, με όλα τα χειριστήρια.

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

Παρουσίαση σε πλήρη οθόνη με HTML5 και jQuery

Για να δημιουργήσουν slideshows και να εμφανίσουν εικόνες σε λειτουργία πλήρους οθόνης, οι προγραμματιστές χρησιμοποίησαν το ήδη γνωστό plugin Vegas jQuery, το οποίο περιέχει πολλές ιδέες και τεχνικές που περιγράφηκαν προηγουμένως λεπτομερώς στα άρθρα της ομάδας. Η παρουσία στοιχείων ήχου HTML5 και το στυλ των μεταβάσεων μεταξύ των εικόνων είναι ελκυστικές.

Μια άλλη εξέλιξη από την ομάδα Codrops, μια ολοκληρωμένη και λειτουργική συλλογή εικόνων, ωστόσο, δεν έχει νόημα να την περιγράψεις, πρέπει να τη δεις.

Παρουσίαση εικόνας, εικόνες εξαφανίζονται ακριβώς μπροστά στα μάτια σας, το αποτέλεσμα είναι απλά υπέροχο.

Είναι ένα πλαίσιο συλλογής εικόνων JavaScript χτισμένο πάνω από τη βιβλιοθήκη jQuery. Ο στόχος είναι να απλοποιηθεί η διαδικασία ανάπτυξης μιας επαγγελματικής συλλογής εικόνων για web και κινητές συσκευές. Μπορείτε να το δείτε σε ένα αναδυόμενο παράθυρο ή σε λειτουργία πλήρους οθόνης.

Ήσυχα αρχίζουμε να το συνηθίζουμε και περιμένουμε νέα έργα από την ομάδα της Codrops. Αποκτήστε ένα εξαιρετικό ρυθμιστικό εικόνας με ένα υπέροχο εφέ μετάβασης 3D για προβολή εικόνων σε λειτουργία πλήρους οθόνης.

Άλλο ένα πρόσθετο WordPress από τη σειρά slideshow organizer. Ενσωματώνεται εύκολα σε σχεδόν οποιοδήποτε σχέδιο και προσφέρει πολλές επιλογές προσαρμογής τόσο για έμπειρους όσο και για μη έμπειρους χρήστες.

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

Ένα καλό πρόσθετο slideshow για ενσωμάτωση στο WordPress. Το Xili-floom-slideshow εγκαθίσταται αυτόματα και επιτρέπονται επίσης οι προσωπικές ρυθμίσεις.

Slimbox2είναι μια καθιερωμένη προσθήκη WordPress για την εμφάνιση εικόνων με εφέ Lightbox. Υποστηρίζει αυτόματη προβολή διαφανειών και αλλαγή μεγέθους εικόνων στο παράθυρο του προγράμματος περιήγησης. Και γενικά, αυτό το πρόσθετο έχει πολλά πλεονεκτήματα σε σχέση με άλλα πρόσθετα αυτής της σειράς.

Αυτό το πρόσθετο/γραφικό στοιχείο σάς επιτρέπει να δημιουργείτε δυναμικές, ελεγχόμενες παρουσιάσεις και παρουσιάσεις για τον ιστότοπο ή το ιστολόγιό σας που εκτελείται στη μηχανή WordPress.

Αυτή η προσθήκη WordPress μετατρέπει τις ενσωματωμένες εικόνες γκαλερί σε μια απλή και ευέλικτη παρουσίαση. Η προσθήκη χρησιμοποιεί ρυθμιστικό εικόνας FlexSlider jQuery και προσωπικές ρυθμίσεις χρήστη.

είναι ένα πρόσθετο WordPress για την οργάνωση προβολών διαφανειών φωτογραφιών, εικόνων από το SmugMug, το Flickr, το MobileMe, το Picasa ή το Photobucket RSS, έργα και οθόνες χρησιμοποιώντας καθαρή Javascript.

Ένα απλό ρυθμιστικό για WordPress και πολλά άλλα. Τίποτα περιττό ή δυσκίνητο, η δουλειά γίνεται με μινιμαλιστικό στυλ, η έμφαση δίνεται στη σταθερότητα και την ταχύτητα, συνδέεται τέλεια με τη μηχανή διαχείρισης blog.

Κατά τη γνώμη μου, το Skitter είναι ένα από τα καλύτερα ρυθμιστικά που υποστηρίζει την εργασία με το WordPress. Με ελκύει η σταθερότητα και η ταχύτητα λειτουργίας, τα όχι πολύ εμφανή χειριστήρια, τα εφέ μετάβασης και η αρκετά απλή σύνδεση με το θέμα.

είναι ένα πρόσθετο για το WordPress με το οποίο μπορείτε εύκολα και γρήγορα να οργανώσετε μια συλλογή εικόνων στον ιστότοπό σας με δυνατότητα προβολής σε λειτουργία προβολής διαφανειών. Η οθόνη μπορεί να είναι είτε αυτόματη είτε πλήρως ελεγχόμενη με επίδειξη μικρογραφιών και λεζάντες για εικόνες.

Τοποθεσία | Διαδήλωση

Εμφανίζει όλες τις εικόνες για μια ανάρτηση/σελίδα ως παρουσίαση. Εύκολη εγκατάσταση. Αυτό το πρόσθετο απαιτεί Adobe Flashγια την έκδοση με κίνηση μετάβασης, εάν δεν βρεθεί Flash, το ρυθμιστικό λειτουργεί σε κανονική λειτουργία.

Ένα άλλο απλό ρυθμιστικό για το WordPress, εμφανίζει εικόνες για αναρτήσεις και σύντομες ανακοινώσεις άρθρων. Χρησιμοποιώ κατά καιρούς ένα τέτοιο πρόσθετο σε αυτό το ιστολόγιο.

Το Meteor Slides είναι ένα ρυθμιστικό WordPress jQuery με περισσότερα από είκοσι στυλ μετάβασης για να διαλέξετε. Ο συγγραφέας αποκάλεσε το πρόσθετο "μετέωρο", υπονοώντας πιθανώς την ταχύτητα λειτουργίας.

Η oQey Gallery είναι μια ολοκληρωμένη συλλογή εικόνων με στοιχεία προβολής διαφανειών για WordPress, με ενσωματωμένες δυνατότητες βίντεο και μουσικής.

Είναι ένα slideshow με στοιχεία κινούμενης εικόνας flash για προβολή εικόνων και βίντεο σε ιστότοπους και ιστολόγια. Μπορείτε να τοποθετήσετε αυτό το ρυθμιστικό σε οποιονδήποτε ιστότοπο, σε οποιοδήποτε μέγεθος και με όποιο περιεχόμενο θέλετε.

Η προσθήκη Flash Gallery μετατρέπει τις κανονικές γκαλερί σας σε εκπληκτικούς τοίχους εικόνων, με υποστήριξη για πολλά άλμπουμ ανά ανάρτηση, προβολή σε πλήρη οθόνη και λειτουργία προβολής διαφανειών.

Το WOW Slider είναι ένα ρυθμιστικό εικόνας jQuery για WordPress με εκπληκτικά οπτικά εφέ (Explosion, Fly, Blinds, Squares, Fragments, Basic, Fade, Stack, Vertical Stack και Linear) και επαγγελματικά σχεδιασμένα πρότυπα.

Το Promotion Slider είναι μια προσθήκη jQuery που διευκολύνει τη δημιουργία μιας απλής προβολής διαφανειών ή την εφαρμογή πολλαπλών ζωνών περιστρεφόμενων διαφημίσεων σε μια σελίδα, επειδή είναι ένα εξαιρετικά προσαρμόσιμο εργαλείο, θα έχετε τον πλήρη έλεγχο του τι εμφανίζετε στο ρυθμιστικό και του τρόπου η ενότητα λειτουργεί γενικά.

| Διαδήλωση

Νέο στην έκδοση 2.4: υποστήριξη για ταξινόμηση φωτογραφιών με drag-n-drop απευθείας Πρόγραμμα επεξεργασίας WordPress, καθώς και τη δυνατότητα προσθήκης συνδέσμων φωτογραφιών στις κύριες εικόνες. (Το IE8 μπορεί να έχει κάποια σφάλματα, λειτουργεί καλά σε όλα τα μεγάλα προγράμματα περιήγησης. Οι συγγραφείς υπόσχονται πλήρη υποστήριξη για τον IE8 στο μέλλον.)

| Διαδήλωση

Η τελευταία συγχορδία αυτής της κριτικής θα είναι αυτό το πρόσθετο για το WordPress, ένα άλλο ρυθμιστικό με ενδιαφέροντα οπτικά εφέ για την επιλογή και την αλλαγή εικόνων.

Κοιτάζω όλα όσα περιγράφηκαν παραπάνω και είμαι έκπληκτος, πόσο φανταχτερά έχουν αυτά τα ανθρώπινα όντα, αλλά δεν είναι μόνο αυτό για το οποίο έχουν επινοήσει διάφοροι προγραμματιστές ιστού πρόσφατασχετικά με το θέμα της οργάνωσης εικόνων σε έργα web. Είναι υπέροχο που είναι πλέον δυνατή η εφαρμογή τέτοιων υπέροχων λύσεων για τη δημιουργία γκαλερί και παρουσιάσεων.
Τολμώ να ελπίζω αθόρυβα ότι σε αυτή τη συλλογή θα βρείτε κάτι ενδιαφέρον για τον εαυτό σας, δημιουργήστε τη δική σας μοναδική γκαλερί ή slider, προς τέρψη των χρηστών σας και, φυσικά, του αγαπημένου σας εαυτού, και πού θα ήμασταν χωρίς αυτό...

Πέρασα πολύ καιρό επιλέγοντας το θέμα για το σημερινό θέμα. Ως αποτέλεσμα, παρατήρησα ότι δεν έχουμε κάνει ακόμη επιλογές με γκαλερί εικόνων. Νομίζω ότι είναι υπέροχο θέμα γιατί γκαλερίυπάρχουν σε πολλούς ιστότοπους. Ειλικρινά, δεν είναι όλα πολύ ελκυστικά. Λαμβάνοντας υπόψη τις τρέχουσες τάσεις ανάπτυξης jquery, html5κ.λπ. Σκέφτηκα, τελικά, πρέπει να υπάρχουν πολύ πιο ελκυστικές λύσεις από αυτές που είχα συναντήσει πριν. Ετσι. Αφού περάσαμε μια μέρα, καταφέραμε να βρούμε έναν τεράστιο αριθμό σεναρίων. Από όλο αυτό το βουνό, αποφάσισα να επιλέξω μόνο, γιατί αγαπώ, όπως ήδη προσέξατε από προηγούμενες αναρτήσεις.
Συλλογή εικόνωνισχύει όχι μόνο σε περίπτωση με άλμπουμ φωτογραφιών. Το σενάριο μπορεί να χρησιμοποιηθεί, νομίζω ότι θα ήταν ακόμα πιο σωστό, όπως χαρτοφυλάκιο για φωτογράφους, σχεδιαστέςκαι τα λοιπά. Εφέ Jqueryθα βοηθήσει στην προσέλκυση της προσοχής των επισκεπτών και θα προσθέσει απλώς κομψότητα στον ιστότοπό σας.
Ετσι. Συλλογή για την προσοχή σας Πρόσθετα συλλογής εικόνων jquery για τον ιστότοπο.
Μην ξεχάσετε να σχολιάσετε και να θυμάστε, για να μην χάσετε αυτή τη συλλογή, μπορείτε να την προσθέσετε στα αγαπημένα σας κάνοντας κλικ στο αστέρι στο κάτω μέρος του άρθρου.