Ένα σύνολο χρήσιμων λειτουργιών jQuery Ajax CSS3 για προγραμματιστές ιστού. Όμορφες συμβουλές εργαλείων χρησιμοποιώντας πρόσθετα jQuery για τη δημιουργία ρυθμιστικών και καρουζέλ
Παρουσίαση με μικρογραφίες και περιγραφές διαφανειών. Διάφορα εφέ αλλαγής εικόνας. Υπάρχουν δύο επιλογές: με και χωρίς αυτόματη αλλαγή διαφάνειας.
2. Pure CSS3 Slider
Ωραίο ρυθμιστικό εικόνας με περιγραφή και αυτόματη αλλαγή διαφανειών. Όταν τοποθετείτε το δείκτη του ποντικιού πάνω από την εικόνα, η περιστροφή σταματά. Η στάση συνοδεύεται από ένα εφέ CSS3.
3. Πρόσθετο jQuery "Photorama"
Ωραίο ρυθμιστικό συλλογής.
4. Εφέ κειμένου "Εφέ τυπογραφίας"
Ενδιαφέροντα εφέ για εργασία με τυπογραφία χρησιμοποιώντας CSS3 και jQuery. 7 διαφορετικά δροσερά εφέ.
5. Πρόσθετο Darkbox
Ένα μικρό, ελαφρύ πρόσθετο για την εμφάνιση εικόνων σε ένα αναδυόμενο μπλοκ.
6. Εφέ αιώρησης με jQuery
Εφέ κύκλου κατά την αιώρηση.
7. Κινούμενα κουμπιά jQuery CSS3
Πολλά διαφορετικά κινούμενα εφέ CSS3 για να δημιουργήσετε εκπληκτικά κουμπιά για τον ιστότοπό σας. Απλώς πολύ όμορφα εφέ αιώρησης.
8. HTML5 jQuery που αλλάζει τις εικόνες φόντου
Όταν κάνετε κλικ στις μικρογραφίες, οι εικόνες φόντου αντικαθιστούν η μία την άλλη με ένα εφέ θαμπώματος. Όταν αλλάζετε το μέγεθος του παραθύρου του προγράμματος περιήγησης, αλλάζει το μέγεθος της εικόνας φόντου.
8. Διαδραστικά εφέ τυπογραφίας
Ενδιαφέροντα εφέ κειμένου με χρήση HTML5 και jQuery (4 διαφορετικά εφέ). Τοποθετήστε το δείκτη του ποντικιού πάνω από το κείμενο για να δείτε το αποτέλεσμα.
9. Αναδυόμενες λεζάντες εικόνων
Πολλά διαφορετικά κινούμενα εφέ αιώρησης για την εφαρμογή λεζάντες αναδυόμενων εικόνων.
10. Πρόσθετο "Portamento"
Κυμαινόμενο μπλοκ στο jQuery. Παραμένει πάντα ορατό κατά την κύλιση προς τα κάτω στη σελίδα.
11. Περιεχόμενο Scrollers
Πρόσθετο jQuery για εμφάνιση κύλισης σε μπλοκ σταθερών μεγεθών. Αρκετά στυλ.
12. Πρόσθετο Scrollbars
Εφαρμογή jQuery οριζόντιας και κάθετης κύλισης περιεχομένου σε μπλοκ σταθερών μεγεθών.
13. Πρόσθετο Tiny Scrollbar
Πρόσθετο jQuery για την υλοποίηση κάθετης και οριζόντιας κύλισης περιεχομένου.
Διαδήλωση
Κατεβάστε
14. Πρόσθετο "jScrollPane"
Κύλιση περιεχομένου σε ένα μπλοκ μέσω προγράμματος περιήγησης.
15. Κυμαινόμενο μπλοκ "Scroll Follow"
Πρόσθετο για τη δημιουργία ενός μπλοκ που θα πραγματοποιεί κύλιση κατά την κύλιση της σελίδας. Είναι δυνατό να διορθώσετε ένα μπλοκ κάνοντας κλικ σε έναν σύνδεσμο.
16. Αναδυόμενες πλευρικές γραμμές
Πτυσσόμενα πάνελ σε όλες τις πλευρές της ιστοσελίδας.
17. Αποτελεσματικές λύσεις CSS3 για το σχεδιασμό σελίδων στέλεχος
Τρεις επιλογές για την εφαρμογή κινούμενων εφέ για τη δημιουργία στέλεχος "Ιστότοπος υπό ανάπτυξη".
17. Εφέ κατά την κύλιση της σελίδας
Ένα εκπληκτικό εφέ κατά την κύλιση της σελίδας: στοιχεία απομακρύνονται από την περιοχή πίσω από την οθόνη ή, αντίθετα, κρύβονται πίσω από την περιοχή της οθόνης. Αυτή η λύση είναι ιδανική για χρήση σε ιστότοπους χαρτοφυλακίου, για αποτελεσματική παρουσίαση ολοκληρωμένων έργων με σύντομη περιγραφή.
19. Πρόσθετο "fancyBox 2"
Μια νέα, πλήρως ξαναγραμμένη έκδοση του γνωστού plugin fancybox για την εμφάνιση εικόνων και άλλου περιεχομένου σε modal windows.
20. Minimit Gallery
Ένα λειτουργικό πρόσθετο με μεγάλη γκάμα χαρακτηριστικών: γκαλερί, καρουζέλ, ρυθμιστικό, μενού, επέκταση, κινούμενα κουμπιά.
21. jQuery News TickerΠεριστροφέας ειδήσεων στον ιστότοπο. Τα μηνύματα διαδέχονται το ένα το άλλο και εμφανίζονται χρησιμοποιώντας ένα ενδιαφέρον εφέ γραφομηχανής. Μπορείτε να σταματήσετε την αλλαγή ειδήσεων κάνοντας κλικ στο κουμπί "Παύση". Μπορείτε να χρησιμοποιήσετε τα βέλη για να μετακινηθείτε από το ένα μήνυμα στο άλλο.
22. Προσαρμοστικές εικόνες
Κλιμακούμενες εικόνες για εμφάνιση σε κινητές συσκευές. Τα μεγέθη της εικόνας εξαρτώνται από το μέγεθος του παραθύρου. Τεχνολογίες που χρησιμοποιούνται: JavaScript και PHP5.
23. vScroller
Κάθετο jQuery, CSS3 scroller. Ρυθμιζόμενη ταχύτητα κύλισης και χρόνος καθυστέρησης.
24. Αναπτυσσόμενο μενού πολλαπλών επιπέδων "jQSimpleMenu"
Ένα νέο πρόσθετο jQuery για τη δημιουργία οριζόντιων αναπτυσσόμενων μενού πολλαπλών επιπέδων σε έναν ιστότοπο.
25. "jsCarousel 2.0"
Πρόσθετο jQuery για την υλοποίηση κάθετων και οριζόντιων καρουζέλ.
26. Rotator "Dynamic News"
Πρόσθετο jQuery για μια ωραία εμφάνιση των τελευταίων ειδήσεων από τη ροή RSS.
27. Κινούμενο μενού
Κινούμενο εφέ όταν τοποθετείτε το δείκτη του ποντικιού πάνω από ένα στοιχείο μενού.
28. Εφέ κινούμενου κειμένου
Τρία εντυπωσιακά παραδείγματα εργασίας με την ιδιότητα CSS "background-clip: text". Το εφέ CSS3 δεν λειτουργεί σε παλαιότερα προγράμματα περιήγησης.
29. Εφέ θολώματος CSS3 jQuery
Όταν τοποθετείτε το δείκτη του ποντικιού πάνω από ένα μπλοκ, αυτό μεγεθύνεται και τα υπόλοιπα μπλοκ κειμένου θαμπώνουν στο παρασκήνιο.
30. Συμβουλές εργαλείων CSS3 jQuery
Υλοποίηση μπλοκ παρόμοιων με σημειώσεις με κείμενο.
34. Rlightbox
Εμφάνιση περιεχομένου πολυμέσων σε μπλοκ αναδυόμενων παραθύρων: εικόνες, βίντεο, Flash.
35. jQuery buzzer
Διεύρυνση του τετραγώνου.
36. Περιγραφή εικόνας CSS3 jQuery
Πρόσθετο "Based Sliding Door Content Gallery" για την εφαρμογή περιγραφών αναδυόμενων εικόνων. Όταν τοποθετείτε το δείκτη του ποντικιού σας πάνω από οποιαδήποτε από τις εικόνες που παρουσιάζονται, εμφανίζεται μια σύντομη περιγραφή με έναν σύνδεσμο προς το πλήρες άρθρο. On hover: εφέ ανύψωσης γκαραζόπορτας.
37. Εφέ "Πριν και Μετά" Πρόσθετο jQuery "uCompare"
Σέρνοντας την κουρτίνα μπορείτε να συγκρίνετε δύο επάλληλες εικόνες. Ιδανικό για εκείνες τις περιπτώσεις που πρέπει να εμφανίσετε δύο εκδόσεις για κάτι στη σελίδα: πριν και μετά.
38. Εφέ περιστροφής εικόνας
Πολλά διαφορετικά κινούμενα εφέ μετάβασης μεταξύ διαφανειών.
Βρήκα την ιδέα στην ιστοσελίδα του ηλεκτρονικού λογιστή “Elba”. Έχει μια ωραία και φιλική προς το χρήστη διεπαφή και μου άρεσαν πολύ οι συμβουλές εργαλείων που υπάρχουν παντού.
Ήθελα απλώς να πάρω τον κώδικα σεναρίου από τον πηγαίο κώδικα του ιστότοπου που θα το εφαρμόσει, αλλά αυτό δεν συνέβη. Εκεί έχουν τόσα πολλά διαφορετικά σενάρια μαζεμένα σε ένα σωρό (δεν ξέρω πώς λέγεται σωστά στην επαγγελματική γλώσσα) που ήταν δύσκολο για μένα να βγάλω κάτι συγκεκριμένο από εκεί.
Πήγα λοιπόν και έγραψα το δικό μου σενάριο, το οποίο κάνει περίπου το ίδιο πράγμα. Γνωρίζω ότι υπάρχουν ήδη πολλές έτοιμες λύσεις, αλλά με ενδιαφέρει περισσότερο να γράψω ένα σενάριο ο ίδιος από την αρχή για να εξασκηθώ ξανά με το jQuery.
ΕπίδειξηΜπορείτε να δείτε ένα παράδειγμα τόσο στον ιστότοπο Share42.com όσο και στον ιστότοπο, όπου ο πηγαίος κώδικας περιέχει μόνο ό,τι είναι απαραίτητο για τη λειτουργία του σεναρίου.
ΕγκατάστασηΟ κώδικας του σεναρίου μοιάζει με αυτό:
(function($)( $(function() ( $("span.jQtooltip").each(function() ( var el = $(this); var title = el.attr("title"); if (title && title != "") ( el.attr("title", "").append("" + title + ""); var width = el.find("div").width(); var ύψος = el.find("div").height(); height + 20), 200).show(200).animate((πλάτος: πλάτος, ύψος: ύψος), 200 function() ( el.find("div") .animate((width: width + 20), ύψος: ύψος + 20), 150) .animate((πλάτος: "απόκρυψη", ύψος: "απόκρυψη"), 150 )).mouseleave(function() ( if (el.children().is( ":hidden" )) el.find("div").clearQueue());
Αποθηκεύστε το σε ένα αρχείο με την επέκταση .js, για παράδειγμα, scripts.js και συνδέστε το στον ιστότοπο πριν από την ετικέτα, χωρίς να ξεχάσετε να συνδέσετε το πλαίσιο jQuery ταυτόχρονα, εάν αυτό δεν έχει ήδη γίνει. Εκείνοι. Ο παρακάτω κώδικας προστίθεται στον κώδικα html του ιστότοπου:
JQtooltip ( θέση: σχετική; δρομέας: βοήθεια; κάτω περιθώριο: 1 εικονοστοιχεία με κουκκίδες; ) .jQtooltip div ( οθόνη: κανένα; θέση: απόλυτη; κάτω: -1 px; αριστερά: -1 px; z-index: 1000; πλάτος: 190 px; padding: 8px 12px color: #000px 3px #C4C4C4;
Τώρα το μόνο που μένει είναι να τοποθετήσετε το απαιτούμενο κείμενο σε μια ετικέτα με την κλάση jQtooltip και το χαρακτηριστικό title, δηλ. σαν αυτό:
κείμενο
Εάν θέλετε να υπάρχει ένα τετράγωνο αντί για κείμενο, όπως στο, τότε πρέπει να προσθέσετε τα ακόλουθα στυλ στο αρχείο CSS:
JQtooltip.mini ( οθόνη: inline-block; κατακόρυφη στοίχιση: κάτω; μέγεθος γραμματοσειράς: 11px; πλάτος: 14px; ύψος γραμμής: 13px; στοίχιση κειμένου: κέντρο; περιθώριο-αριστερό: 2px; επάνω: -2px; χρώμα : #9A4D18: 1px συμπαγές #FAD28F: #FFF6BD;
Και ο κώδικας html σε αυτήν την περίπτωση θα είναι ως εξής:
!
Ανάλογα με τις προτιμήσεις σας, μπορείτε να αλλάξετε τον κωδικό CSS σε ό,τι θέλετε. Δηλαδή, όπως μπορείτε να δείτε, η επεξήγηση εργαλείου μπορεί να σχεδιαστεί με οποιονδήποτε τρόπο, απλά πρέπει να κατανοήσετε το CSS.
Αυτό είναι όλο, στην πραγματικότητα.
ΥΣΤΕΡΟΓΡΑΦΟ.
Δεν έχω καμία αμφιβολία ότι το σενάριο θα μπορούσε να γίνει πιο εγγράμματο, αλλά, καταρχήν, είμαι ικανοποιημένος με τον τρόπο που προέκυψε.
Ψάχνετε πού να φιλοξενήσετε τον ιστότοπό σας στην Ουκρανία; Επιλέξτε φιλοξενία δοκιμασμένη στο χρόνο - X-HOST. Θα λάβετε υψηλής ποιότητας και αξιόπιστη φιλοξενία σε ανταγωνιστικές τιμές.
Λόγω της ποικιλίας των εργαλείων που προσφέρονται, έχω συντάξει μια σύντομη επισκόπηση των πιο αξιοσημείωτων εξελίξεων των ρυθμιστικών εικόνων απόκρισης jQuery που εμφανίστηκαν πρόσφατα και διανέμονται χωρίς περιορισμούς, π.χ. εντελώς δωρεάν.
WOW SliderΑποκριτικό ρυθμιστικό εικόνας jQuery με ένα υπέροχο σύνολο οπτικών εφέ (περιστροφή, διαφυγή, θάμπωμα, σπείρες, περσίδες, κ.λπ...) και πολλά έτοιμα πρότυπα. Με τον ενσωματωμένο οδηγό εισαγωγής σελίδας του WOW Slider, μπορείτε εύκολα και αβίαστα να δημιουργήσετε εκπληκτικές παρουσιάσεις διαφανειών μέσα σε λίγα λεπτά. Ο ιστότοπος του προγραμματιστή περιέχει όλη την απαραίτητη τεκμηρίωση για τη ρύθμιση και τη χρήση της προσθήκης στα ρωσικά, καθώς και εξαιρετικά ζωντανά παραδείγματα για το πώς λειτουργεί η προσθήκη. Ένα ξεχωριστό πρόσθετο Wordpress και μια ενότητα για το Joomla είναι επίσης διαθέσιμα για λήψη. Είμαι σίγουρος ότι θα αρέσει σε πολλούς αυτό το υπέροχο ρυθμιστικό, τόσο στους αρχάριους όσο και στους έμπειρους webmasters.
HiSliderHiSlider - HTML5, ρυθμιστικό Jquery και συλλογή εικόνων, εντελώς δωρεάν πρόσθετο για προσωπική χρήση σε ιστότοπους που εκτελούν δημοφιλή συστήματα - WordPress, Joomla, Drupal. Με τη βοήθεια αυτού του απλού αλλά αρκετά λειτουργικού εργαλείου, μπορείτε εύκολα να δημιουργήσετε εκπληκτικά και ζωντανά slide shows, θεαματικές παρουσιάσεις και ανακοινώσεις νέων μηνυμάτων στις σελίδες των ιστοσελίδων σας. Πολλά έτοιμα πρότυπα και skins για το slider, εκπληκτικά εφέ μετάβασης (αλλαγής) περιεχομένου, έξοδος διαφόρων πολυμέσων περιεχομένου: βίντεο από το YouTube και το Vimeo, ευέλικτες ρυθμίσεις χρήστη κ.λπ.
Το Nivo Slider είναι ένα παλιό καλό, γνωστό σε όλους τους γνωστούς, ένα από τα πιο όμορφα και εύχρηστα ρυθμιστικά εικόνας. Το πρόσθετο JQuery Nivo Slider είναι δωρεάν για λήψη και χρήση και διαθέτει άδεια χρήσης βάσει της άδειας MIT. Υπάρχει επίσης ένα ξεχωριστό πρόσθετο για το WordPress, αλλά δυστυχώς είναι ήδη πληρωμένο και θα πρέπει να πληρώσετε 29 $ για μία άδεια. Είναι καλύτερα να κάνετε λίγη μαγεία με τα αρχεία θέματος WP και να επισυνάψετε τη δωρεάν έκδοση jQuery της προσθήκης Nivo Slider στο ιστολόγιό σας, καθώς υπάρχουν πολλές πληροφορίες για το πώς να το κάνετε αυτό στο Διαδίκτυο.
Όσο για τη λειτουργικότητα, όλα είναι σε τέλεια τάξη. Χρησιμοποιεί τη βιβλιοθήκη jQuery v1.7+, όμορφα εφέ μετάβασης, απλές και πολύ ευέλικτες ρυθμίσεις, προσαρμοστική διάταξη, αυτόματη περικοπή εικόνας και πολλά άλλα.
Η ιδέα του ρυθμιστικού εμπνεύστηκε από τους προγραμματιστές, οι οποίοι είναι γνωστοί για το στυλ παρουσίασης των προϊόντων της Apple, όπου πολλά μικρά αντικείμενα (εικόνες) αλλάζουν κάνοντας κλικ στην επιλεγμένη κατηγορία με ένα απλό εφέ κίνησης. Το Codrops παρουσιάζει στη διάθεσή σας ένα λεπτομερές σεμινάριο για το πώς να δημιουργήσετε αυτό το ρυθμιστικό, μια πλήρη διάταξη της σήμανσης Html, ένα σύνολο κανόνων CSS και ένα εκτελέσιμο πρόσθετο jQuery, καθώς και ένα υπέροχο ζωντανό παράδειγμα χρήσης του ρυθμιστικού.
Ρυθμιστικό εικόνας πλήρους οθόνης με χρήση JQuery και CSS3 + λεπτομερές σεμινάριο για την ενσωμάτωση της προσθήκης σε σελίδες ιστότοπου. Η ιδέα είναι να τεμαχίσετε την ανοιχτή τρέχουσα διαφάνεια με συγκεκριμένο περιεχόμενο κατά τη μετάβαση στο επόμενο ή προηγούμενο περιεχόμενο. Χρησιμοποιώντας κινούμενα σχέδια JQuery και CSS, μπορείτε να δημιουργήσετε μοναδικές μεταβάσεις μεταξύ διαφανειών. Η διάταξη απόκρισης του ρυθμιστικού διασφαλίζει ότι φαίνεται εξίσου καλή σε διαφορετικούς τύπους συσκευών χρήστη.
Ένα ρυθμιστικό περιεχομένου που προσαρμόζεται αυτόματα σε πλάτος και ύψος ανάλογα με το μέγεθος του γονικού κοντέινερ στο οποίο βρίσκεται. Αρκετά απλό στην εφαρμογή και ευέλικτο στις ρυθμίσεις, το ρυθμιστικό εκτελείται στο JQuery, με πλοήγηση στο κάτω μέρος, όταν το μέγεθος της οθόνης αλλάζει προς τα κάτω, η πλοήγηση εμφανίζεται με τη μορφή εικονιδίων. Πολύ αναλυτική τεκμηρίωση (εκμάθηση δημιουργίας) και ζωντανά παραδείγματα χρήσης.
Μια πειραματική έκδοση του ρυθμιστικού που δείχνει εικόνες με μεταβάσεις από το τρισδιάστατο επίπεδο. Οι εικόνες χωρίζονται σε δύο οριζόντιες στοίβες, χρησιμοποιώντας τα βέλη πλοήγησης για αλλαγή και μετάβαση κάθε επόμενης εικόνας στην κατάσταση προβολής. Γενικά, τίποτα το ιδιαίτερο, αλλά η ίδια η ιδέα και η τεχνική εκτέλεσης είναι αρκετά ενδιαφέρουσες.
Ένα πολύ απλό ρυθμιστικό εικόνας jQuery με 100% απόκριση και πλήρη οθόνη. Η εργασία του ρυθμιστικού βασίζεται σε μεταβάσεις CSS (η ιδιότητα μετάβασης) σε συνδυασμό με τη μαγεία του jQuery. Η τιμή μέγιστου πλάτους έχει οριστεί στο 100% από προεπιλογή, επομένως το μέγεθος των εικόνων θα αλλάξει ανάλογα με τις αλλαγές στο μέγεθος της οθόνης. Δεν υπάρχουν ειδικά εφέ κινουμένων σχεδίων ή διακοσμητικά στοιχεία στο σχεδιασμό, όλα είναι απλά και σχεδιασμένα για απρόσκοπτη λειτουργία.
Το όνομα μιλάει από μόνο του, αυτό είναι ίσως ένα από τα πιο ελαφριά και μινιμαλιστικά ρυθμιστικά εικόνας jQuery που έχω συναντήσει (πρόσθετο 1kb). Το ResponsiveSlides.js είναι ένα μικρό πρόσθετο JQuery που δημιουργεί slideshows χρησιμοποιώντας στοιχεία μέσα σε ένα κοντέινερ. Λειτουργεί με ένα ευρύ φάσμα προγραμμάτων περιήγησης, συμπεριλαμβανομένων όλων των εκδόσεων του IE - το διάσημο φρένο στην πρόοδο, από IE6 και νεότερες εκδόσεις. Η εργασία χρησιμοποιεί μεταβάσεις CSS3 σε συνδυασμό με javascript για αξιοπιστία. Απλή διάταξη με χρήση λίστας χωρίς σειρά, προσαρμογή μεταβάσεων και χρονικών διαστημάτων, αυτόματος και χειροκίνητος έλεγχος εναλλαγής διαφανειών, καθώς και υποστήριξη για πολλαπλές παρουσιάσεις ταυτόχρονα. Εδώ είναι ένα τόσο παιχνιδιάρικο "μωρό".
Το Camera είναι ένα δωρεάν πρόσθετο JQuery για την οργάνωση προβολών διαφανειών σε σελίδες ιστότοπων, ένα ελαφρύ ρυθμιστικό με πολλά εφέ μετάβασης, μια διάταξη που ανταποκρίνεται 100% και πολύ απλές ρυθμίσεις. Ταιριάζει τέλεια στις οθόνες οποιασδήποτε συσκευής χρήστη (οθόνες υπολογιστή, tablet, smartphone και κινητά τηλέφωνα). Δυνατότητα επίδειξης ενσωματωμένου βίντεο. Αυτόματη αλλαγή διαφανειών και χειροκίνητος έλεγχος με χρήση κουμπιών και μπλοκ μικρογραφιών εικόνας. Μια σχεδόν πλήρης συλλογή εικόνων σε συμπαγή σχεδιασμό.
Ένα άλλο αρκετά απλό ρυθμιστικό με απόκριση στο jQuery. Μπορείτε να τοποθετήσετε οποιοδήποτε περιεχόμενο, βίντεο, εικόνες, κείμενο και άλλα στοιχεία στις διαφάνειές σας. Διευρυμένη υποστήριξη για οθόνες αφής. Χρήση κινούμενων εικόνων μετάβασης CSS. Ένας μεγάλος αριθμός διαφορετικών παραλλαγών προβολών διαφανειών και συμπαγών γκαλερί εικόνων. Αυτόματος και χειροκίνητος έλεγχος. Αλλάξτε τις διαφάνειες χρησιμοποιώντας κουμπιά και επιλέγοντας μικρογραφίες. Μικρό μέγεθος αρχείου προέλευσης, πολύ εύκολο στη διαμόρφωση και την εφαρμογή.
FlexSlider 2 - Μια ενημερωμένη έκδοση του ομώνυμου ρυθμιστικού, με βελτιωμένη απόκριση, ελαχιστοποίηση του σεναρίου και ελαχιστοποίηση της αναδιαμόρφωσης/επανασχεδίασης. Το πρόσθετο περιλαμβάνει ένα βασικό ρυθμιστικό, έλεγχο διαφανειών με μικρογραφίες, ενσωματωμένα βέλη αριστερά-δεξιά και μια κάτω γραμμή πλοήγησης με τη μορφή κουμπιών. Δυνατότητα προβολής βίντεο σε διαφάνειες (vimeo), ευέλικτες ρυθμίσεις (μεταβάσεις, σχεδιασμός, χρονικό διάστημα), πλήρως προσαρμοστική διάταξη.
Ένα πολύ γνωστό και αρκετά δημοφιλές responsive πρόσθετο jQuery για τη δημιουργία γκαλερί εικόνων και ρυθμιστικών υψηλής ποιότητας. Η διεπαφή του ρυθμιστικού, χάρη στον πίνακα ελέγχου του, μοιάζει οπτικά με ένα οικείο πρόγραμμα αναπαραγωγής βίντεο, το πρόσθετο περιλαμβάνει πολλά διαφορετικά θέματα σχεδίασης. Υποστήριξη για ενσωματωμένα βίντεο και εικόνες από δημοφιλείς υπηρεσίες: Flickr, Vimeo, YouTube και άλλες. Λεπτομερής τεκμηρίωση για τη ρύθμιση και τη χρήση.
Ένα απλό, δωρεάν ρυθμιστικό εικόνας jQuery γραμμένο ειδικά για αποκριτικό σχεδιασμό ιστοσελίδων. Το Blueberry είναι ένα πειραματικό πρόσθετο jQuery ανοιχτού κώδικα. Μινιμαλιστικός σχεδιασμός, χωρίς εφέ, μόνο ομαλά αναδυόμενες εικόνες που αντικαθιστούν η μία την άλλη μετά από ένα ορισμένο χρονικό διάστημα. Όλα είναι πολύ απλά, εγκαταστήστε, συνδεθείτε και πηγαίνετε...
Ένα πολύ συμπαγές ρυθμιστικό εικόνας jQuery με στοιχεία Lightbox. Χάρη στις ευέλικτες διαστάσεις του, είναι πολύ εύκολο να ενσωματωθεί σε οποιοδήποτε κοντέινερ, σε μία μόνο καταχώρηση με τη μορφή μικρογραφιών, όταν τοποθετείτε τον κέρσορα του ποντικιού ή κάνετε κλικ πάνω τους, ενεργοποιείται ένα lightbox με μεγεθυμένη εικόνα και χειριστήρια. Είναι βολικό να τοποθετήσετε ένα τέτοιο ρυθμιστικό σε πλαϊνά πάνελ για να παρουσιάσετε προϊόντα ή ανακοινώσεις ειδήσεων. Μια εξαιρετική λύση για ιστότοπους με μεγάλο όγκο πληροφοριών.
Δωρεάν αποκριτικό ρυθμιστικό με προηγμένες μεταβάσεις CSS3. Μινιμαλιστικό στυλ, 3 θέματα σχεδίασης, Κάθε καρέ ολισθαίνει οριζόντια, εμφανίζεται στο κέντρο, η εικόνα πηγαίνει προς τα αριστερά, η υπογραφή προς τα δεξιά, οι μικρογραφίες αντιγράφονται στην κάτω δεξιά γωνία. Σελιδοποίηση προβολών προϊόντων για προβολή σε κάθε πλαίσιο. Τα χειριστήρια περιλαμβάνουν επίσης κουμπιά πίσω και εμπρός. Υποστηρίζεται από όλα τα σύγχρονα προγράμματα περιήγησης.
Ένα πολύ απλό ρυθμιστικό εικόνας τόσο από άποψη λειτουργικότητας όσο και από τις ρυθμίσεις, υπάρχει αλλαγή στην ταχύτητα αλλαγής διαφανειών, ενεργοποίηση της χειροκίνητης λειτουργίας (ενεργοποιούνται τα κουμπιά ελέγχου), η συνεχής προβολή διαφανειών. Αυτό το ρυθμιστικό έχει το δικαίωμα να υπάρχει και με τράβηξε μόνο επειδή υπάρχει δεν βρήκα κάτι ιδιαίτερα ενδιαφέρον σε αυτήν την εξέλιξη, ίσως δεν το έψαχνα καλά)))
Ένα τόσο όμορφο, προσαρμοστικό ρυθμιστικό εικόνας από τον Vladimir Kudinov, σύντροφοι. Ένα συμπαγές, καλά σχεδιασμένο εργαλείο, που παρέχεται με ενδεικτικά παραδείγματα και λεπτομερείς οδηγίες για τη δημιουργία, την εγκατάσταση και τη χρήση. Προσαρμοστικός σχεδιασμός, ωραία κουμπιά και πράσινα βέλη, όλα είναι αρκετά ωραία και ήρεμα, χωρίς πίεση.
Δωρεάν πρόσθετο slider JQuery με εφέ parallax για εικόνες και διαφάνειες κειμένου. Τα κινούμενα σχέδια διαφανειών έχουν πολλαπλές τιμές εμφάνισης με πλήρη έλεγχο σε κάθε ρύθμιση χρονισμού και κίνησης. Η δυνατότητα κίνησης πολλών στοιχείων σε μια διαφάνεια ταυτόχρονα. Μπορείτε να ορίσετε διαφορετικές μεθόδους κινούμενης εικόνας, σβήσιμο διαφανειών ή μεταβάσεις από μια συγκεκριμένη κατεύθυνση. Αυτόματη εμφάνιση και χειροκίνητος έλεγχος χρησιμοποιώντας βέλη πλοήγησης που εμφανίζονται όταν τοποθετείτε το δείκτη του ποντικιού πάνω από την εικόνα. 10 είδη εφέ κινουμένων σχεδίων διαφανειών και πολλά άλλα...
Η αναθεώρηση αποδείχθηκε αρκετά εκτενής, αλλά όχι αρκετά ενημερωτική λόγω του μεγάλου αριθμού προϊόντων που εξετάστηκαν. Μπορείτε να μάθετε όλες τις λεπτομέρειες και λεπτομερείς περιγραφές της λειτουργικότητας ενός συγκεκριμένου πρόσθετου απευθείας στις σελίδες των προγραμματιστών. Μπορώ μόνο να ελπίζω ότι έχω καταστήσει ευκολότερο για κάποιον να βρει αυτό το πολύ απαραίτητο εργαλείο για τη δημιουργία πολύχρωμων ρυθμιστικών εικόνων στις σελίδες των ιστότοπών του.
Έχετε σκεφτεί ποτέ ότι θα ήταν ωραίο να μπορέσετε να εργαστείτε με πρότυπα στη ρωσική γλώσσα; Σκεφτείτε το για ένα λεπτό. Δεν χάνετε χρόνο εργασίας με πρότυπα αγγλικής γλώσσας. Σπεύδουμε να σας ευχαριστήσουμε που μπορείτε πλέον να το βρείτε στην αγορά TemplateMonster. Το κείμενο για καθένα από αυτά γράφτηκε στο χέρι. Και, φυσικά, όλες οι έτοιμες λύσεις είναι απίστευτα εύχρηστες.
Με όλο τον σεβασμό, Andrew
1. Πρόσθετο jQuery "Hover Zoom"Μια πρωτότυπη λύση για την υλοποίηση περιγραφών εικόνων όταν τοποθετείτε τον κέρσορα χρησιμοποιώντας το εφέ Ζουμ.
2. Πρόσθετο Captify 3. Περιγραφή jQuery των εικόνων στη συλλογήΌταν τοποθετείτε τον κέρσορα, εμφανίζεται μια περιγραφή της εικόνας και η ίδια η εικόνα γεμίζει με ένα ημιδιαφανές στρώμα συγκεκριμένου χρώματος.
4. Υλοποίηση jQuery λεζάντες εικόνωνΠολλές επιλογές για την εφαρμογή λεζάντες για εικόνες που εμφανίζονται όταν τοποθετείτε τον κέρσορα του ποντικιού πάνω από την εικόνα.
5. Εφέ συρόμενης πόρτας jQueryΌταν τοποθετείτε το δείκτη του ποντικιού πάνω από μια μικρογραφία, μια περιγραφή εμφανίζεται ουσιαστικά στη θέση της.
6. Πρόσθετο jQuery "Zoominfo"Όταν τοποθετείτε το δείκτη του ποντικιού πάνω από μια εικόνα, αυτή συρρικνώνεται και εμφανίζεται ο τίτλος και η περιγραφή της φωτογραφίας.
7. Πρόσθετο jQuery "Mosaic"Υλοποίηση περιγραφών αναδυόμενων εικόνων όταν τοποθετείτε τον κέρσορα του ποντικιού. Υπάρχουν 8 διαφορετικοί τύποι αναδυόμενων λεζάντων. Μπορείτε να τα δείτε στη σελίδα επίδειξης.
Όταν τοποθετείτε το ποντίκι σας πάνω από την εικόνα, εμφανίζεται μια σύντομη περιγραφή με έναν σύνδεσμο προς λεπτομερείς πληροφορίες.
9. Πρόσθετο για την υλοποίηση υπογραφών εικόναςΜια άλλη επιλογή για την εφαρμογή υποτίτλων αναδυόμενων εικόνων στο δείκτη του ποντικιού. Είναι δυνατή η επιλογή από δύο εφέ jQuery για την εμφάνιση των λεζάντων.
10. Περιγραφή εικόνων "Παράθυρο προεπισκόπησης"Πρόσθετο για τη δημιουργία λεζάντας εικόνων. Όταν τοποθετείτε τον κέρσορα του ποντικιού με ένα κινούμενο εφέ, εμφανίζεται μια περιγραφή της εικόνας. Το jQuery χρησιμοποιείται για τη δημιουργία κινούμενων εικόνων.
Παρασκευάζεται από υλικά
