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

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

Στο σημερινό άρθρο, συγκεντρώσαμε τις καλύτερες γκαλερί εικόνων και ρυθμιστικά jQuery για εσάς.

Για να τα εγκαταστήσετε, απλώς προσθέστε τα επιλεγμένα πρόσθετα στην ενότητα κεφαλής σελίδες HTMLμαζί με τη βιβλιοθήκη jQuery και ρυθμίστε τα σύμφωνα με την τεκμηρίωση (μόλις μερικές γραμμές κώδικα).

Επιλέξτε ποιο από αυτά τα στοιχεία θα ταιριάζει απόλυτα στο έργο σας.

1. Ρυθμιστικό Bootstrap

Το Bootstrap Slider είναι ένα δωρεάν ρυθμιστικό εικόνας βελτιστοποιημένο για κινητά με κύλιση με άγγιγμα και σάρωση. Θα φαίνεται εκπληκτικό σε οποιαδήποτε οθόνη και σε οποιοδήποτε πρόγραμμα περιήγησης. Μπορείτε να ανεβάσετε εικόνες, βίντεο, κείμενο, μικρογραφίες και κουμπιά σε ρυθμιστικά.

2. Ρυθμιστικό προεπισκόπησης προϊόντος

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

3. Επεκτάσιμη Συλλογή εικόνων

Η Expandable Image Gallery είναι μια καταπληκτική προσθήκη που μετατρέπεται σε μια συλλογή πλήρους οθόνης με ένα μόνο κλικ. Μπορεί να χρησιμοποιηθεί για την ενότητα "Σχετικά με εμάς" ή για προβολή πληροφοριών προϊόντος.

4. Φωτόραμα

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

5. Immersive Slider

Το Immersive Slider σάς επιτρέπει να δημιουργήσετε μια μοναδική εμπειρία προβολής διαφανειών παρόμοια με το ρυθμιστικό Google TV. Μπορείτε να αλλάξετε την εικόνα φόντου ώστε να είναι θολή για να διατηρήσετε την εστίαση στις κύριες φωτογραφίες.

6. Leastjs

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

7. Πρότυπο συρόμενου πίνακα

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

8. Πρότυπο χαρτοφυλακίου Squeezebox

Το Squeezebox Portfolio Template προσφέρει εφέ κίνησης χαρτοφυλακίου. Όταν τοποθετείτε το δείκτη του ποντικιού πάνω από την κύρια εικόνα (ή μπλοκ), εμφανίζονται αγκυρωμένα στοιχεία.

9. Ανακάτεμα εικόνων

Το Shuffle Images είναι ένα καταπληκτικό πρόσθετο με απόκριση που σας επιτρέπει να δημιουργήσετε μια συλλογή με εικόνες που αλλάζουν κατά την τοποθέτηση του ποντικιού.

10. Δωρεάν πρόσθετο jQuery Lightbox

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

11. PgwSlider - Αποκριτικό ρυθμιστικό για jQuery

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

12. Σκεπαστή Polaroids Gallery

Το Scattered Polaroids Gallery είναι ένα εκπληκτικό ρυθμιστικό κατασκευασμένο επίπεδη σχεδίαση. Τα στοιχεία του κινούνται τυχαία κατά την εναλλαγή εικόνων, κάτι που φαίνεται εκπληκτικό.

13. Φίλτρο περιεχομένου Bouncy

Το Bouncy Content Filter είναι η τέλεια λύση για το χαρτοφυλάκιό σας. Αυτό το πρόσθετο επιτρέπει στους χρήστες να μετακινούνται γρήγορα από τη μια κατηγορία στην άλλη.

14. Απλό slider jQuery

Το απλό jQuery Slider ανταποκρίνεται στο όνομά του. Αυτό το πρόσθετο συνδυάζει στοιχεία JavaScript, HTML5 και CSS3. Στην επίδειξη, μόνο η φόρτωση κειμένου είναι διαθέσιμη από προεπιλογή, αλλά αν κάνετε μερικές αλλαγές, μπορείτε να προσθέσετε και οπτικό περιεχόμενο.

15. Glide JS

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

16. Ρυθμιστικό μεταφοράς πλήρους οθόνης με παράλλαξη

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

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

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

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

Παρακάτω είναι η λίστα των Τα καλύτερα Responsive jQuery Image Gallery Plugins που αξίζει να εξεταστούν το 2016.

Το Bootstrap Photo Gallery είναι ένα απλό πρόσθετο jQuery που θα δημιουργήσει μια αποκριτική συλλογή φωτογραφιών που βασίζεται στο Bootstrap για τις εικόνες σας.
Αυτό το πρόσθετο υποστηρίζει μεταβλητό ύψος για τις εικόνες και τις λεζάντες. Περιλαμβάνεται επίσης ένα προαιρετικό πλαίσιο "modal" με "επόμενη" και "προηγούμενη" σελιδοποίηση.
Επίδειξη & Λήψη

2. JK Responsive YouTube και Gallery εικόνων


Είναι μια μοντέρνα γκαλερί σε στυλ lightbox για την εμφάνιση εικόνων και βίντεο YouTube στον ιστότοπό σας. Η διεπαφή της συλλογής αποκρίνεται πλήρως και λειτουργεί όμορφα σε όλες τις μεγάλες ή μικρές συσκευές.
Επίδειξη & Λήψη

3.Φάμπα


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

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


Το xGallerify είναι ένα ελαφρύ πρόσθετο γκαλερί με απόκριση που σας επιτρέπει να δημιουργείτε όμορφες γκαλερί εικόνων για τους ιστότοπούς σας. Αυτό το πρόσθετο είναι ελαφρύ (μέγεθος αρχείου 3 kb), εύκολο στη χρήση και διαθέτει πολλές προσαρμόσιμες επιλογές και στυλ.
Επίδειξη & Λήψη


Το Instagram Element είναι ένα premium πρόσθετο Instagram για bloggers, φωτογράφους, μοντέλα και οποιονδήποτε θέλει να αυξήσει την παρουσία του στο Instagram.
Αυτή η προσθήκη είναι πλήρως αποκριτική και σας επιτρέπει να διαχειρίζεστε εύκολα 50+ επιλογές και σας επιτρέπει να προβάλλετε όμορφα τις φωτογραφίες σας σε οποιαδήποτε συσκευή.


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

Είναι πλήρως αποκριτικό, προσαρμόσιμο και σας επιτρέπει να επιλέξετε την απόσταση μεταξύ των εικόνων, το ελάχιστο επιτρεπόμενο πλάτος πριν από τη στοίβαξη και τον μέγιστο αριθμό στηλών, με περισσότερες επιλογές στο δρόμο!
Επίδειξη & Λήψη


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

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


Το Unite Gallery είναι μια γκαλερί JavaScript πολλαπλών χρήσεων που βασίζεται στη βιβλιοθήκη jQuery. Είναι κατασκευασμένο με μια αρθρωτή τεχνική με μεγάλη έμφαση στην ευκολία χρήσης και προσαρμογής. Είναι πολύ εύκολο να προσαρμόσετε τη συλλογή, αλλάζοντας το δέρμα της μέσω css, ακόμα και γράφοντας το δικό σας θέμα. Ωστόσο, αυτή η συλλογή είναι πολύ ισχυρή, γρήγορη και έχει τα περισσότερα χαρακτηριστικά που πρέπει να διαθέτει σήμερα, όπως η απόκριση, η δυνατότητα αφής και ακόμη και η λειτουργία ζουμ, είναι μοναδικό εφέ.
Επίδειξη & Λήψη


Το jQuery lightGallery είναι μια ελαφριά γκαλερί jQuery lightbox για την εμφάνιση γκαλερί εικόνων και βίντεο.

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

Το Lightgallery διαθέτει έναν πολυάριθμο αριθμό επιλογών, οι οποίες σας επιτρέπουν να προσαρμόσετε το πρόσθετο πολύ εύκολα. Μπορείτε εύκολα να προσαρμόσετε την εμφάνιση και την αίσθηση της γκαλερί ενημερώνοντας τις μεταβλητές SASS.
Επίδειξη & Λήψη


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


Το blueimp Gallery είναι μια γκαλερί εικόνων και βίντεο με δυνατότητα προσαρμογής, με δυνατότητα προσαρμογής και προσαρμογής, καρουζέλ και lightbox, βελτιστοποιημένη τόσο για προγράμματα περιήγησης ιστού για κινητά όσο και για επιτραπέζιους υπολογιστές.

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


Το nanoGALLERY είναι μια συλλογή εικόνων με δυνατότητα αφής και απόκρισης με αιτιολογημένη, διαδοχική διάταξη και διάταξη πλέγματος. Υποστηρίζει εικόνες που φιλοξενούνται από τον εαυτό τους και έλκουν άλμπουμ φωτογραφιών Flickr, Picasa, Google+ και SmugMug.

Διαθέτει πλοήγηση πολλαπλών επιπέδων σε άλμπουμ, συνδυαστικά εφέ αιώρησης σε μικρογραφίες, μεγέθη μικρογραφιών με απόκριση, πολλαπλές διατάξεις, προβολή διαφανειών, πλήρη οθόνη, σελιδοποίηση, αργή φόρτωση εικόνας και πολλά άλλα.
Επίδειξη & Λήψη


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

Αυτό το πρόσθετο έχει επίσης μια έκδοση premium που συνοδεύεται από μερικές έξυπνες δυνατότητες και σίγουρα περιλαμβάνει ανταπόκριση.
Επίδειξη & Λήψη


Το Fancy Gallery είναι ένα ανταποκρινόμενο πρόσθετο συλλογής εικόνων jQuery που σας επιτρέπει να προβάλλετε τις εικόνες και τα βίντεό σας με φανταχτερό στυλ. Αυτά τα πρόσθετα έχουν πολλές επιλογές προσαρμογής και μπορείτε να προσθέσετε απεριόριστα άλμπουμ, βίντεο, εικόνες και πολλά άλλα.

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


Το Balanced Gallery είναι ένα πρόσθετο jQuery που κατανέμει ομοιόμορφα τις φωτογραφίες σε γραμμές ή στήλες, αξιοποιώντας στο έπακρο τον παρεχόμενο χώρο. Οι φωτογραφίες κλιμακώνονται με βάση το μέγεθος του στοιχείου «κοντέινερ» από προεπιλογή, καθιστώντας τη Balanced Gallery μια καλή επιλογή για αποκριτικούς ιστότοπους.
Επίδειξη & Λήψη

Γκαλερί 16.S


Το S Gallery χρησιμοποιεί το API πλήρους οθόνης της HTML5 και βασίζεται σε μεγάλο βαθμό στην καλή ποιότητα των κινούμενων εικόνων CSS3 και στους μετασχηματισμούς CSS3, επομένως θα λειτουργεί μόνο σε προγράμματα περιήγησης που υποστηρίζουν αυτές τις δυνατότητες.
Επίδειξη & Λήψη

17. Ultimate Grid Responsive Gallery


Αυτό είναι ένα HTML | css | jQuery Grid με ένα Lightbox, μπορείτε να καθορίσετε μικρογραφίες για το πλέγμα και όταν κάνετε κλικ σε αυτό για να ανοίξετε το lightbox θα φορτώσει την κανονική εικόνα, μπορείτε να καθορίσετε το κείμενο για τους υπότιτλους και για το lightbox. Επίσης, δεν χρειάζεται να φορτώσετε όλες τις εικόνες ταυτόχρονα (για λόγους απόδοσης), ώστε να μπορείτε να καθορίσετε τον αριθμό των εικόνων που θα φορτωθούν κατά την πρώτη φόρτωση και τον αριθμό των εικόνων που θα φορτωθούν όταν κάνετε κλικ στο κουμπί "φόρτωση περισσότερων εικόνων".


Η Responsive Thumbnail Gallery είναι ένα πρόσθετο jQuery για τη δημιουργία γκαλερί εικόνων που κλιμακώνονται ώστε να ταιριάζουν στο κοντέινερ τους.
Επίδειξη & Λήψη


Το SuperBox είναι ένα πρόσθετο jQuery που πηγαίνει ολόκληρη την «εικόνα» και το «lightbox» ένα βήμα παραπέρα, μειώνοντας την εξάρτηση από το JavaScript και το φορτίο εικόνας για να γίνει το lightbox παρελθόν! Χρησιμοποιώντας χαρακτηριστικά HTML5 data-*, αποκριτικές διατάξεις και jQuery.

Το SuperBox κάνει θαύματα ως μια στατική συλλογή εικόνων, στην οποία μπορείτε να κάνετε κλικ για να αποκαλύψετε μια πλήρη έκδοση της εικόνας.
Επίδειξη & Λήψη


Η γκαλερί Ultimate Thumbnail είναι μια πλήρως αποκριτική προσθήκη συλλογής εικόνων που διατίθεται σε δύο τύπους διάταξης (πλέγμα και γραμμή, κάθετη και οριζόντια), με κύλιση (jScrollPane) ή πλοήγηση με κουμπί. Τα κουτιά μικρογραφιών υποστηρίζουν οποιοδήποτε στοιχείο HTML μέσα σε αυτά.

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

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

Σήμανση HTML

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

1
2
3
4
5
6
7
8

<ul class="portfolio-categ filter">
<li >Κατηγορίες:</li>
<liclass="all active"> Ολα</a>
<li class="cat-item-1"> Κατηγορία 1</a>
<li class="cat-item-2"> Κατηγορία 2</a>
<li class="cat-item-3"> Κατηγορία 3</a>
<li class="cat-item-4"> Κατηγορία 4</a>
</ul>

1
2
3
4
5
6
7
8
9
10
11


    		•

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

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

    Στυλ CSS

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

    Επομένως, θα εμφανίσω μόνο στυλ CSS για μικρογραφίες και τη λίστα κατηγοριών.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28

    Κατηγορία χαρτοφυλακίου (περιθώριο-κάτω : 30 εικονοστοιχεία ; )
    .portfolio-categ li(
    οθόνη: ενσωματωμένη
    margin-right : 10px ;
    }
    .image-block(
    οθόνη : μπλοκ ;
    θέση : σχετική ;
    }
    .image-block img(
    περίγραμμα : 1px συμπαγές #d5d5d5 ;
    περίγραμμα-ακτίνα : 4 εικονοστοιχεία 4 εικονοστοιχεία 4 εικονοστοιχεία 4 εικονοστοιχεία ;
    φόντο : #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 ( κείμενο-διακόσμηση : υπογράμμιση ; )

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

    jQuery

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23

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

    $(".portfolio-categli" ) .click (συνάρτηση (e) (
    $(".filter li" ) .removeClass ("active") ;

    var filterClass= $(this ) .attr ("class" ) .split (" " ) .slice (- 1 ) [ 0 ] ;

    if (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("active"), αν αυτό δεν γίνει, τότε με την πάροδο του χρόνου όλες οι κατηγορίες θα είναι ενεργές και το φιλτράρισμα θα σταματήσει.

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

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

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

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

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

    1
    2
    3
    4
    5
    6
    7

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

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

    Για να μείνετε ενημερωμένοι με τα πιο πρόσφατα άρθρα και μαθήματα, εγγραφείτε στο

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

    ΦΩΤΟΚΟΥΤΙ
    Δωρεάν, ελαφριά συλλογή εικόνων με απόκριση, στο οποίο όλα τα εφέ, οι μεταβάσεις γίνονται χρησιμοποιώντας css3. Ιδανικό για τη δημιουργία ιστότοπου χαρτοφυλακίου για φωτογράφο.

    Γκαλερί S
    Ελκυστικός Πρόσθετο για τη συλλογή εικόνων jquery. Το animation λειτουργεί με css3.

    DIAMONDS.JS
    Πρωτότυπο πρόσθετο συλλογής εικόνων. Οι μινιατούρες είναι διαμορφωμένες ρόμβοςπου είναι πολύ δημοφιλές αυτή τη στιγμή. Αυτή η φόρμα γίνεται με css3. Το μόνο αρνητικό αυτής της γκαλερί είναι η έλλειψη ενός lightbox που θα άνοιγε τη φωτογραφία σε πλήρες μέγεθος. Δηλαδή, πρέπει να στερεώσετε το πρόσθετο lightbox με καραβίδες. Αυτό το σενάριο δημιουργεί ένα προσαρμοστικό πλέγμα εικόνας σε σχήμα διαμαντιού.

    Superbox
    Σύγχρονη γκαλερί εικόνων χρησιμοποιώντας jquery, css3 και html5. Όλοι έχουμε συνηθίσει στο γεγονός ότι όταν κάνετε κλικ στην προεπισκόπηση, η πλήρης εικόνα ανοίγει σε ένα lightbox (αναδυόμενο παράθυρο). Οι προγραμματιστές αυτής της προσθήκης αποφάσισαν ότι το lightbox έχει ήδη ξεπεράσει τη χρησιμότητά του. Οι εικόνες σε αυτήν τη συλλογή ανοίγουν κάτω από την προεπισκόπηση. Ρίξτε μια ματιά στο demo και δείτε πώς αυτή η λύση φαίνεται πολύ πιο σύγχρονη.
    |
    Smooth Diagonal Fade Gallery
    Σύγχρονη γκαλερί εικόνων στην οποία οι προεπισκοπήσεις διανέμονται σε ολόκληρο τον χώρο της οθόνης. Το σενάριο μπορεί να σαρώσει έναν φάκελο με φωτογραφίες στον διακομιστή, δηλαδή δεν χρειάζεται να εισάγετε κάθε εικόνα ξεχωριστά. Αρκεί να ανεβάσετε εικόνες σε ένα φάκελο στο διακομιστή και να καθορίσετε τη διαδρομή προς τον κατάλογο στις ρυθμίσεις. Τότε το σενάριο θα κάνει τα πάντα μόνο του.

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

    ΠΛΕΓΜΑ ΜΙΚΡΟΓΡΑΦΙΩΝ ΜΕ ΕΠΕΚΤΑΣΗ ΠΡΟΕΠΙΣΚΟΠΗΣΗΣ
    Το πρόσθετο είναι προσαρμοστικό πλέγμα εικόνας. Κάνοντας κλικ παρακάτω θα εμφανιστεί μια μεγαλύτερη φωτογραφία και περιγραφή. Καλό για δημιουργία χαρτοφυλακίου.

    jGallery
    jGallery είναι ΠΛΗΡΗΣ ΟΘΟΝΗ, προσαρμοστική γκαλερίεικόνες. Τα εφέ, οι μεταβάσεις, ακόμη και το στυλ προσαρμόζονται εύκολα.

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

    Μωσαϊκό Ροή
    Απλό, προσαρμοστικό συλλογή εικόνων με πλέγμα στυλ Pinterest.

    Εκθεσιακός χώρος
    Άλλη μια κομψή γκαλερί πλέγματος στυλ Pinterest με φίλτρο κατηγορίας. Λειτουργεί σε προγράμματα περιήγησης: Chrome, Safari, Firefox, Opera, IE7+, πρόγραμμα περιήγησης Android, Chrome για κινητά, Firefox για κινητά.

    τουλάχιστον.js
    Εξοχος δωρεάν γκαλερί εικόνωνΜε χρησιμοποιώντας JQUERY, 5 και CSS3. Έχει μια πολύ ελκυστική εμφάνισηκαι σίγουρα θα τραβήξει την προσοχή των επισκεπτών σας.

    flipLightBox
    Μια απλή συλλογή εικόνων. Όταν κάνετε κλικ στην προεπισκόπηση, η πλήρης εικόνα ανοίγει στο lightbox.

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

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

    από τον Andy
    Μια εξαιρετικά προσαρμόσιμη προσθήκη γκαλερί/προθήκης για το jQuery.

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

    Tonic Gallery - jQuery XML Portfolio Gallery | $6

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

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

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

    του Victor Zambrano – frwrd.net
    Το Minishowcase είναι μια μικρή και απλή διαδικτυακή συλλογή φωτογραφιών php/javascript, που υποστηρίζεται από AJAX που σας επιτρέπει να προβάλλετε εύκολα τις εικόνες σας στο διαδίκτυο, χωρίς περίπλοκες βάσεις δεδομένων ή κωδικοποίηση, επιτρέποντας να έχετε μια ενημερωμένη συλλογή σε λίγα λεπτά.

    του Κάσπαρ Ντέιβιντ Φρίντριχ
    Το EOGallery είναι μια γκαλερί παρουσίασης διαφανειών με κινούμενα σχέδια στο διαδίκτυο που δημιουργήθηκε με jQuery. Χρησιμοποιεί μόνο βασικές λειτουργίες jQuery και το Thickbox του Cody Lindley για να εμφανίζει μεγαλύτερες εικόνες.

    από τον Arnault Pachot
    Ένα καρουζέλ πολλαπλών μορφών για jQuery, μη παρεμποδιστικό και προσβάσιμο χαρτοφυλάκιο που υποστηρίζει πολλαπλά μέσα: φωτογραφίες, βίντεο (flv), ήχο (mp3). Αυτό το πρόσθετο για το jQuery θα εντοπίσει αυτόματα την επέκταση κάθε μέσου και θα εφαρμόσει το προσαρμοσμένο πρόγραμμα αναπαραγωγής.

    The Wall - Media Gallery - jQuery powered | $5

    από τον Stefan Peter
    Ένα άλλο πρόσθετο συλλογής εικόνων με εφέ χώρου, πολύ ελαφρύ και απλό πρόσθετο.

    του Moreno Di Domenico
    Το jmFullWall είναι ένα πρόσθετο jQuery για τη δημιουργία ενός εντυπωσιακού χαρτοφυλακίου.

    του Fabrizio Calderan
    Το Mosaiqy είναι ένα πρόσθετο jQuery για προβολή και μεγέθυνση φωτογραφιών σε Opera 9+, Firefox 3.6+, Safari 3.2+, Chrome και IE7+. Οι φωτογραφίες ανακτώνται από μια δομή δεδομένων JSON/JSONP και μετακινούνται τυχαία μέσα στο πλέγμα. Όλα τα ακριβά κινούμενα σχέδια αναλαμβάνονται από την GPU σας σε πρόσφατα προγράμματα περιήγησης που χρησιμοποιούν μεταβάσεις CSS3, ελαχιστοποιώντας την επιβάρυνση της CPU.

    από τον Cody
    Το ακόλουθο πρόσθετο jQuery μετατρέπει ένα σύνολο εικόνων σε μια μικροσκοπική συλλογή με πολλές επιλογές. Η Micro Image Gallery επιτρέπει την εναλλαγή μεταξύ μιας προβολής πλέγματος που εμφανίζει μια προεπισκόπηση των εικόνων ως μικρογραφίες και μιας μεμονωμένης προβολής που εμφανίζει μόνο μία εικόνα.

    VION - Πρόσθετο jQuery Image Gallery | $7

    από τον Malihu
    Μια απλή, αλλά κομψή συλλογή εικόνων πλήρους οθόνης που δημιουργήθηκε με το πλαίσιο jQuery και μερικά απλά CSS.