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

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 με δυνατότητα φόρτωσης εικόνων και κειμένου είναι κατάλληλο για κάθε τοποθεσία. Θα ενθουσιάσει τους χρήστες με ένα ελαφρύ εφέ παράλλαξης και αργή εμφάνιση κειμένου.

Πέρασα πολύ καιρό επιλέγοντας το θέμα για το σημερινό θέμα. Ως αποτέλεσμα, παρατήρησα ότι δεν έχουμε κάνει ακόμη επιλογές με γκαλερί εικόνων. Νομίζω ότι είναι υπέροχο θέμα γιατί γκαλερίυπάρχουν σε πολλούς ιστότοπους. Ειλικρινά, δεν είναι όλα πολύ ελκυστικά. Λαμβάνοντας υπόψη τις τρέχουσες τάσεις ανάπτυξης 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 Gallery

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

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

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

Παρά την ευκολία χρήσης, το πρόσθετο είναι αρκετά ελαφρύ και αποτελεσματικό. Ας το ρίξουμε μια πιο προσεκτική ματιά.

Επίδειξη

Για να δείτε πώς λειτουργεί το πρόσθετο, μεταβείτε στον επίσημο ιστότοπο και εδώ είναι μπροστά σας!

Μπορείτε να επιλέξετε να ταξινομήσετε ανά πόλη, φύση, βιομηχανία, ανατολή, δύση του ηλίου ή εμφάνιση όλων των φωτογραφιών (προεπιλογή). Υπάρχει ένα κουμπί Ανάμιξη, το οποίο θα σας επιτρέψει να ανακατέψετε τις εικόνες. Κουμπιά A.S.C.Και DESCταξινομήστε τις εικόνες σε αύξουσα και φθίνουσα σειρά, αντίστοιχα. Εάν θέλετε να βρείτε μια εικόνα ανά θέση ή περιγραφή, επιλέξτε το επιθυμητό στοιχείο στην αναπτυσσόμενη λίστα και εισαγάγετε το ερώτημα στο πεδίο αναζήτησης. Όταν τοποθετείτε το ποντίκι σας πάνω από την εικόνα, η εικόνα μετατρέπεται από ασπρόμαυρη σε έγχρωμη.

Εγκατάσταση

Για να κατεβάσετε τη βιβλιοθήκη, κάντε κλικ στο κουμπί Κατεβάστεή χρήση NPM:

Npm εγκατάσταση filterizr

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

1) Περάστε ένα αντικείμενο με παραμέτρους στον κατασκευαστή JQuery

Var filterizd = $(".filtr-container").filterizr((
// επιλογές
})

2) Ξαναγράψτε τις παραμέτρους χρησιμοποιώντας setOptions()μέθοδος στο αντικείμενο Filterizr.

Filterizd.filterizr("setOptions", (
// επιλογές
})

Επιλογές

Προεπιλεγμένες παράμετροι:

Επιλογές = (
animationΔιάρκεια: 0,5,
ανακλήσεις: (
onFilteringStart: function() ( ),
onFilteringEnd: function() ( )
},
καθυστέρηση: 0,
DelayMode: "προοδευτικό",
easing: "ease-out",
φίλτρο: "όλα",
filterOutCss: (
αδιαφάνεια: 0,
transform: "scale(0.5)"
},
filterInCss: (
αδιαφάνεια: 0,
transform: "scale(1)"
},
διάταξη: "sameSize",
επιλογέας: ".filtr-container",
setupControls: true
}

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

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

Ένα παράδειγμα μπορείτε να δείτε εδώ:

Κατεβάστε

Θα εξετάσουμε λεπτομερέστερα πώς να δημιουργήσετε ένα μενού από το Demo 2, με το μενού να εμφανίζεται επάνω αριστερά.

Μέρος HTML

Πρώτα πρέπει να συνδέσετε τη βιβλιοθήκη jQuery, την οποία μπορείτε να κατεβάσετε εδώ, και το πρόσθετο Flipping Gallery, μεταξύ των ετικετών :

1 2 3 4 5 6

<κεφάλι > ... <"http://code.jquery.com/jquery-1.9.1.js"> <τύπος σεναρίου = "text/javascript" src = "http://code.jquery.com/jquery.flipping_gallery.js"> ... </κεφάλι>

Στη συνέχεια τακτοποιούμε τις εικόνες. Μπορείτε να προσθέσετε όσες εικόνες θέλετε:

1 2 3 4 5 6 7 8

<div class = "γκαλερί" > <a href = "#" > <a href = "#" > <a href = "#" > <a href = "#" > <a href = "#" > ... </div>

Και για να προσθέσετε μια περιγραφή για εικόνες (όπως στις επιδείξεις 4 και 5) πρέπει να χρησιμοποιήσετε το χαρακτηριστικό λεζάντα δεδομένων:

1 2 3 4 5 6 7 8

<div class = "γκαλερί" > <a href = "#" data-caption = "Πολύ" > <a href = "#" data-caption = "cool" > <a href = "#" data-caption = "γκαλερί" > <a href = "#" data-caption = "χρήση" > <a href = "#" data-caption = "Αναστροφή" > ... </div>

JS μέρος

1 2 3 4 5 6 7 8 9

$(".gallery") .flipping_gallery (( κατεύθυνση: "εμπρός" , επιλογέας: "> a" , διάστιχο: 10 , showMaximum: 15 , enableScroll: true , flipDirection: "bottom" , αυτόματη αναπαραγωγή: 500 ) );

Ας δούμε τι σημαίνει κάθε μέθοδος:

• κατεύθυνση— μια μέθοδος υπεύθυνη για τον τρόπο εμφάνισης των εικόνων. Εάν "εμπρός", τότε η εικόνα από την αρχή θα τοποθετηθεί στο τέλος, εάν "πίσω" - αντίστροφα. Η προεπιλεγμένη τιμή είναι "forward".
• εκλέκτορας— ένας επιλογέας με τον οποίο επιλέγουμε εικόνες μπορεί να αλλάξει όπως επιθυμείτε.
• απόσταση— ορίζει την απόσταση μεταξύ των εικόνων σε προοπτική.
• εμφάνισηΜέγιστο— ορίζει τον αριθμό των εικόνων που είναι ορατές στον χρήστη. Μπορείτε να χρησιμοποιήσετε τουλάχιστον 100 εικόνες, αλλά θα εμφανιστούν μόνο οι πρώτες 15, κάτι που είναι πολύ βολικό και δεν φορτώνει το πρόγραμμα περιήγησης.
• enableScroll- Μπορείτε να προβάλετε εικόνες χρησιμοποιώντας τον τροχό του ποντικιού.
• flipDirection— καθορίζει πού θα ολισθαίνει η εικόνα: "αριστερά" - αριστερά, "δεξιά" - δεξιά, "πάνω" - πάνω και "κάτω" - κάτω. Από προεπιλογή ολισθαίνει προς τα κάτω.
• αυτόματη αναπαραγωγή— αυτόματη εκκίνηση γκαλερί. Καθορίζεται σε χιλιοστά του δευτερολέπτου, δηλ. Πόσο καιρό θα χρειαστεί για να αλλάξουν οι εικόνες;

συμπέρασμα

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

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

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