Ο χρόνος δεν σταματά και μαζί του και η πρόοδος. Αυτό επηρέασε και το Διαδίκτυο. Μπορείτε ήδη να παρατηρήσετε πώς αλλάζει η εμφάνιση των τοποθεσιών, είναι ιδιαίτερα δημοφιλής προσαρμοστικός σχεδιασμός. Και ως αποτέλεσμα, πολλά νέα αποκριτικά ρυθμιστικά jquery, γκαλερί, καρουζέλ ή παρόμοια πρόσθετα.
1. Ρυθμιστικό Responsive Horizontal Posts

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

2. Ρυθμιστικό στο Glide.js

Αυτό το ρυθμιστικό είναι κατάλληλο για κάθε ιστότοπο. Αυτό χρησιμοποιεί το Glide.js with ανοιχτή πηγή. Τα χρώματα του ρυθμιστικού μπορούν εύκολα να αλλάξουν.

3. Παρουσίαση με κλίση περιεχομένου

Αποκριτικό ρυθμιστικό περιεχομένου. Το αποκορύφωμα αυτού του ρυθμιστικού είναι το 3d εφέ των εικόνων, καθώς και διάφορα κινούμενα σχέδια τυχαίας εμφάνισης.

4. Ρυθμιστικό χρησιμοποιώντας καμβά HTML5

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

5. Ρυθμιστικό μορφοποίησης εικόνας

Ρυθμιστικό με εφέ μορφοποίησης (Ομαλή μετατροπή από το ένα αντικείμενο στο άλλο). ΣΤΟ αυτό το παράδειγματο ρυθμιστικό είναι κατάλληλο για το χαρτοφυλάκιο ενός προγραμματιστή ιστού ή ενός web studio με τη μορφή χαρτοφυλακίου.

6. Κυκλικό ρυθμιστικό

Ρυθμιστικό σε μορφή κύκλου με εφέ αναστροφής της εικόνας.

7. Θολό ρυθμιστικό φόντου

Αποκριτικό ρυθμιστικό με εναλλαγή και θάμπωμα φόντου.

8. Αποκριτικό ρυθμιστικό μόδας

Απλό, ελαφρύ και ανταποκρινόμενο ρυθμιστικό ιστότοπου.

9. Slicebox - slider εικόνας jQuery 3D(ΕΠΙΚΑΙΡΟΠΟΙΗΜΕΝΟ)

Ενημερωμένη έκδοση του ρυθμιστικού Slicebox με διορθώσεις και νέες δυνατότητες.

10.Δωρεάν κινούμενο πλέγμα απόκρισης εικόνας

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

11.Ρυθμιστικό Flex

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

12. Κορνίζα

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

ΥΣΤΕΡΟΓΡΑΦΟ.Έβαλα το ρυθμιστικό αρκετές φορές και νομίζω ότι είναι από τα καλύτερα

13. Δωρεάν και αποκριτικό ρυθμιστικό 3D Thumbnail Gallery.

Πειραματική συλλογή slider 3DPanelLayoutμε πλέγμα και ενδιαφέροντα εφέ κινουμένων σχεδίων.

14. Ρυθμιστικό στο css3

Αποκριτικό ρυθμιστικό κατασκευασμένο με χρήση css3 με ομαλή εμφάνιση περιεχομένου και ελαφριά κινούμενη εικόνα.

15. WOW Slider

WOW Sliderείναι ένα ρυθμιστικό εικόνας με εκπληκτικά οπτικά εφέ.

17.Ελαστικό

Ελαστικό ρυθμιστικό με πλήρη απόκριση και μικρογραφίες διαφανειών.

18. Σχισμή

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

19. Responsive photo gallery plus

Απλός δωρεάν ρυθμιστικό-γκαλερί με ανέβασμα εικόνων.

20. Αποκριτικό ρυθμιστικό για WordPress

Αποκριτικό δωρεάν ρυθμιστικό για WP.

21. Ρυθμιστικό περιεχομένου Parallax

Ρυθμιστικό με εφέ παράλλαξης και έλεγχος κάθε στοιχείου με CSS3.

22. Ρυθμιστικό με δέσιμο μουσικής

Ρυθμιστικό χρησιμοποιώντας JPlayer ανοιχτού κώδικα. Αυτό το ρυθμιστικό μοιάζει με παρουσίαση με μουσική.

23. Ρυθμιστικό με jmpress.js

Το αποκριτικό ρυθμιστικό βασίζεται στο jmpress.js και επομένως θα επιτρέψει την εφαρμογή μερικών ενδιαφέροντων τρισδιάστατων εφέ στις διαφάνειες.

24. Fast Hover Slideshow

παρουσίαση με γρήγορη εναλλαγήδιαφάνειες. Διακόπτης διαφανειών σε λειτουργία αιώρησης.

25. Ακορντεόν εικόνας με CSS3

Ακορντεόν εικόνας με css3.

26. Προσθήκη βελτιστοποιημένης συλλογής με άγγιγμα

Αυτή είναι μια αποκριτική συλλογή που είναι βελτιστοποιημένη για συσκευές αφής.

27. Γκαλερί 3D

3D Wall Gallery- δημιουργήθηκε για το πρόγραμμα περιήγησης Safari, όπου θα είναι ορατό το 3D εφέ. Όταν προβάλλεται σε διαφορετικό πρόγραμμα περιήγησης, η λειτουργικότητα θα είναι καλή, αλλά το εφέ 3D δεν θα είναι ορατό.

28. Ρυθμιστικό με σελιδοποίηση

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

29.Μοντάζ εικόνας με jQuery

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

30. Γκαλερί 3D

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

31. Λειτουργία πλήρους οθόνης με εφέ 3D σε css3 και jQuery

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

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

Η διάταξη της σελίδας, το εκτελέσιμο javascript και κάποια στοιχεία σχεδίασης, έδωσαν «στο βουνό», έναν υπέροχο σχεδιαστή και προγραμματιστή ιστοσελίδων Kevin Liew (queness.com). Κατά την επιλογή της βέλτιστης λύσης, ήταν σημαντικό για μένα ότι ήταν η ευκολία εκτέλεσης, η λειτουργικότητα του πρόσθετου jQuery, η σωστή λειτουργία σε όλα τα σύγχρονα προγράμματα περιήγησης και δεδομένης της συνεχώς αυξανόμενης δημοτικότητας της χρήσης διαφόρων κινητών συσκευών για περιήγηση στο Διαδίκτυο, η προσαρμοστικότητα του σχεδιασμού της μελλοντικής σελίδας. Χωρίς επιτηδευμένα, κουδούνια και σφυρίχτρες σχεδιαστών και βαριά πρόσθετα.

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

Εκτελέστε το πρόσθετο MixItUp, επικολλήστε αυτόν τον κώδικα μετά τα παραπάνω αρχεία:

< script type= "text/javascript" >$(function () ( var filterList = ( init: function () ( $("#portfoliolist" ) . mixitup(( targetSelector: ".portfolio" , filterSelector: ".filter" , effect: [ "fade" ] , easing : "snap" , // καλέστε το εφέ αιώρησης στοMixEnd: filterList. hoverEffect() ) ;) , hoverEffect: συνάρτηση () ( $("#portfoliolist .portfolio" ) . hover( function () ($(this) . find(".label" ) .stop() .animate(( bottom: 0 ) , 200 , "easeOutQuad" ) ; $(this) .find("img" ) .stop() .animate(( top: - 30 ) , 500 , "easeOutQuad" ) ;) , συνάρτηση () ( $(this) . find(".label" ) . stop() . animate(( bottom: - 40 ) , 200 , "easeInQuad" ) ; $( this) .find("img" ) .stop() .animate(( top: 0 ) , 300 , "easeOutQuad" ) ; ) ) ; ) ) ; filterList.init() ; ) ) ;

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

Για να σχηματίσετε τη διάταξη της σελίδας και την εμφάνιση των στοιχείων, συνδέστε μερικά αρχεία στο έγγραφο . , ένα για τα βασικά στυλ, ας το ονομάσουμε layout.css και ένα άλλο μικρό αρχείο CSS normalize.css , για καλύτερη συνέπεια του προγράμματος περιήγησης στο τυπικό σχέδιοστοιχεία:

< link rel= "stylesheet" href= "css/normalize.css" > < link rel= "stylesheet" href= "css/layout.css" >

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

< ul id= "filters" class = "clearfix" > < li>< span class = "filter active" data- filter= "app card icon logo web" >Ολα < li>< span class = "filter" data- filter= "app" >Εφαρμογές < li>< span class = "filter" data- filter= "card" >επαγγελματικές κάρτες < li>< span class = "filter" data- filter= "icon" >εικονίδια < li>< span class = "filter" data- filter= "logo" >Λογότυπο < li>< span class = "filter" data- filter= "web" >Σχεδιασμός ιστοσελίδων

  • Ολα
  • Εφαρμογές
  • επαγγελματικές κάρτες
  • εικονίδια
  • Λογότυπο
  • Σχεδιασμός ιστοσελίδων

Στον πίνακα πλοήγησης, τοποθετούμε ολόκληρη τη λίστα των έργων, χωρισμένη σε κατηγορίες. Πρέπει να συνδέσουμε κάθε κατηγορία χαρτοφυλακίου μέσω του χαρακτηριστικού data-cat με ένα ή άλλο στοιχείο γραμμής πλοήγησης σύμφωνα με την τιμή στο χαρακτηριστικό data-filter. Αντιστοιχίζοντας τις τιμές του φίλτρου δεδομένων με το data-cat , τα στοιχεία χαρτοφυλακίου θα φιλτράρονται ανά κατηγορία.
Επιπλέον, στη μικρογραφία, κρυφή προς το παρόν, θα προσθέσουμε ένα μικρό πλαίσιο με το όνομα του έργου και τον τίτλο της κατηγορίας, το οποίο εμφανίζεται μόνο όταν τοποθετείτε το δείκτη του ποντικιού πάνω από την εικόνα. Και για να διευκολύνουμε τον σχηματισμό της εμφάνισης ολόκληρης αυτής της δομής στο CSS, θα γράψουμε τις αντίστοιχες κλάσεις στα στοιχεία:

< div id= "portfoliolist" > < div class = "portfolio logo" data- cat= "logo" > < div class = "portfolio-wrapper" > < img src= "img/portfolios/logo/5.jpg" alt= "" /> < div class = "label" > < div class = "label-text" > < a class = "text-title" >Φιλοξενία Beget. Ru < span class = "text-category" >Λογότυπο < div class = "label-bg" > .........

.........

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

css

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

.container (θέση: σχετική; πλάτος: 960 px; περιθώριο: 0 αυτόματο; /* Θα μπορείτε να δείτε την αλυσίδα πλοήγησης όταν αλλάξει το μέγεθος του παραθύρου του προγράμματος περιήγησης */-webkit-transition: all 1s easy? -moz-transition: all 1s ease? -o-transition: all 1s ease? μετάβαση: όλα τα 1s ευκολία? ) #filters ( περιθώριο : 1% ; padding : 0 ; list-style : none ; ) #filters li ( float : left ; ) #filters li span ( οθόνη : block ; padding : 5 px 20 px ; text-decoration : none ; χρώμα : #666 ; /* προσθέστε λίγη σκιά στο κείμενο */ text-shadow : 1px 1px #FFFFFF ; δρομέας : δείκτης ; ) /* αλλαγή φόντου κατηγορίας με το δείκτη του ποντικιού */#filters li span: hover (φόντο : #34B7CD ; text-shadow : 0 0 2px #004B7D ; χρώμα : #fff ; ) /* φόντο του ενεργού στοιχείου κατηγορίας */#filters li span.active ( background : rgb (62 , 151 , 221 ) ; text-shadow : 0 0 2px #004B7D ; color : #fff ; ) #portfoliolist .portfolio ( -webkit-box-sizing: border-box ; -moz-box-sizing: border-box ; -o-box-sizing: border-box ; πλάτος : 23% ; margin : 1% ; display : none ; float : left ; overflow : hidden ; ) .portfolio-wrapper ( υπερχείλιση : κρυφό ;θέση : σχετική !σημαντικό; φόντο : #666 ; δρομέας : δείκτης ; ) .portfolio img ( μέγ. πλάτος : 100% , θέση : σχετική ; ) /* οι υπότιτλοι είναι κρυμμένοι από προεπιλογή */.portfolio .label (θέση : απόλυτη ; πλάτος : 100% ; ύψος : 40 εικονοστοιχεία ; κάτω : -40 εικονοστοιχεία ; ) % ; θέση : απόλυτη ; επάνω : 0 ; αριστερά : 0 ; ) .portfolio .label-text ( χρώμα : #fff ; θέση : σχετική ; δείκτης z : 500 ; πλήρωση : 5 εικονοστοιχεία 8 εικονοστοιχεία ; ) οθόνη : μπλοκ ; μέγεθος γραμματοσειράς : 9 εικονοστοιχεία ; )

Κοντέινερ ( θέση: σχετική, πλάτος: 960 εικονοστοιχεία, περιθώριο: 0 αυτόματο ease; -o- transition: all 1s ease; transition: all 1s ease; ) #filters ( margin:1%; padding:0; list-style:none; ) #filters li ( float:left; ) #filters li span ( οθόνη: μπλοκ; padding: 5px 20px; text-decoration:none; color:#666; /* προσθήκη λίγης σκιάς στο κείμενο */ text-shadow: 1px 1px #FFFFFF; δρομέας: δείκτης; ) /* αλλαγή φόντου κατηγορίας στο hover */ #filters li span:hover ( φόντο: #34B7CD; text-shadow: 0 0 2px #004B7D; color:#fff; ) /* φόντο του ενεργού στοιχείου κατηγορίας */ #filters li span.active ( φόντο: rgb(62, 151, 221); text-shadow: 0 0 2px #004B7D; color:#fff; ) #portfoliolist .portfolio ( -webkit-box-sizing: border-box; -moz-box-sizing: border- πλαίσιο; -o-box- μέγεθος: πλαίσιο-πλαίσιο; πλάτος:23%; περιθώριο:1%; εμφάνιση:κανένα; float:αριστερά; υπερχείλιση:κρυφό; ) .po rtfolio-wrapper ( υπερχείλιση:κρυφό; θέση: σχετική !σημαντική; φόντο: #666; δρομέας:δείκτης; ) .portfolio img ( μέγ. πλάτος: 100%; θέση: σχετική; ) /* οι ετικέτες κρύβονται από προεπιλογή */ .portfolio .label ( θέση: απόλυτη; πλάτος: 100%; ύψος: 40 εικονοστοιχεία; κάτω: -40 εικονοστοιχεία; ) . portfolio .label-bg ( φόντο: rgb(62, 151, 221); πλάτος: 100%; ύψος:100%; θέση: απόλυτη; επάνω:0; αριστερά:0; ) .portfolio .label-text ( χρώμα: # fff; θέση: σχετική; z-index: 500; padding: 5px 8px; ) .portfolio .text-category ( display:block; μέγεθος γραμματοσειράς:9px; )

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

/* Tablet */ Οθόνη @media only και (ελάχ. πλάτος : 768 εικονοστοιχεία ) και (μέγ. πλάτος : 959 εικονοστοιχεία ) ( .κοντέινερ ( πλάτος : 768 εικονοστοιχεία ; ) ) /* Κινητό - Σημείωση: Σχεδιασμός για πλάτος 320 px*/Μόνο οθόνη @media και (μέγιστο πλάτος : 767 εικονοστοιχεία ) ( .container ( πλάτος : 95% ; ) #portfoliolist .portfolio (πλάτος : 48% ; περιθώριο : 1% ; ) ) /* Κινητό - Σημείωση: Σχεδιασμός για πλάτος 480 px */Μόνο οθόνη @media και (ελάχ. πλάτος : 480 εικονοστοιχεία ) και (μέγιστο πλάτος : 767 εικονοστοιχεία ) ( .container (πλάτος : 70% ; ) )

/* Tablet */ @media only οθόνη και (ελάχ. πλάτος: 768 εικονοστοιχεία) και (μέγιστο πλάτος: 959 εικονοστοιχεία) ( .container ( πλάτος: 768 εικονοστοιχεία; ) ) /* Κινητό - Σημείωση: Σχεδιασμός για πλάτος 320 εικονοστοιχείων*/ μόνο @μέσα οθόνη και (μέγιστο πλάτος: 767 εικονοστοιχεία) ( .container ( πλάτος: 95%; ) #portfoliolist .portfolio (πλάτος:48%; περιθώριο:1%; ) ) /* Κινητό - Σημείωση: Σχεδιασμένο για πλάτος 480 εικονοστοιχεία */ @media μόνο οθόνη και (ελάχ. πλάτος: 480 εικονοστοιχεία) και (μέγιστο πλάτος: 767 εικονοστοιχεία) ( .container (πλάτος: 70%; ) )

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

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

Καλή επιτυχία σε όλους και με το όφελος του σώματος περάστε το υπόλοιπο σύντομο καλοκαίρι!

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

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

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

Slick - μοντέρνο πρόσθετο ρυθμιστικού καρουζέλ

Το Slick είναι ένα δωρεάν πρόσθετο jQuery του οποίου οι προγραμματιστές ισχυρίζονται ότι η λύση τους θα ικανοποιήσει όλες τις απαιτήσεις σας για το slider. Ρυθμιστικό με απόκριση - το καρουζέλ μπορεί να λειτουργήσει σε λειτουργία "πλακάκι" για κινητές συσκευές και σε λειτουργία "σύρετε και απόθεση" για την έκδοση για επιτραπέζιους υπολογιστές.

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

Λειτουργία επίδειξης | Κατεβάστε

Owl Carousel 2.0 - πρόσθετο jQuery για συσκευές αφής

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

Το ρυθμιστικό έχει ορισμένες ενσωματωμένες προσθήκες για τη βελτίωση της συνολικής λειτουργικότητας. Κινούμενα σχέδια, αναπαραγωγή βίντεο, αυτόματη αναπαραγωγή ρυθμιστικού, τεμπέλης φόρτωση, αυτόματη ρύθμιση ύψους - τα κύρια χαρακτηριστικά του Owl Carousel 2.0.

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

Παραδείγματα | Κατεβάστε

Πρόσθετο jQuery Silver Track

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

Παραδείγματα | Κατεβάστε

AnoSlide - Εξαιρετικά συμπαγές ρυθμιστικό jQuery με απόκριση

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

Παραδείγματα | Κατεβάστε

Κουκουβάγια Carousel - jquery slider - carousel

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

Παραδείγματα | Κατεβάστε

3D γκαλερί - καρουζέλ

Χρησιμοποιεί τρισδιάστατες μεταβάσεις που βασίζονται σε στυλ CSS και κάποιο κώδικα Javascript.

Παραδείγματα | Κατεβάστε

Τρισδιάστατο καρουζέλ χρησιμοποιώντας TweenMax.js και jQuery

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

Παραδείγματα | Κατεβάστε

Καρουζέλ χρησιμοποιώντας bootstrap

Αποκριτικό ρυθμιστικό καρουζέλ που χρησιμοποιεί τεχνολογία bootstrap ακριβώς για τον νέο σας ιστότοπο.

Παραδείγματα | Κατεβάστε

Ρυθμιστικό με βάση το bootstrap - καρουζέλ Moving Box

Το πιο περιζήτητο σε ιστότοπους χαρτοφυλακίου και επιχειρήσεων. Παρόμοιος τύπος slider - carousel συναντάται συχνά σε ιστότοπους οποιουδήποτε τύπου.

Παραδείγματα | Κατεβάστε

Tiny Circleslider

Αυτό το μικροσκοπικό ρυθμιστικό μεγέθους είναι έτοιμο να λειτουργήσει σε συσκευές με οποιαδήποτε ανάλυση οθόνης. Το ρυθμιστικό μπορεί να λειτουργήσει τόσο σε κυκλική όσο και σε λειτουργία καρουζέλ. Ο μικροσκοπικός κύκλος παρουσιάζεται ως εναλλακτική λύση σε άλλα ρυθμιστικά αυτού του τύπου. Διαθέτει ενσωματωμένη υποστήριξη λειτουργικά συστήματα IOS και Android.

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

Παραδείγματα | Κατεβάστε

Ρυθμιστικό περιεχομένου Thumbelina

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

Παραδείγματα | Κατεβάστε

wow ρυθμιστικό καρουζέλ

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

Παραδείγματα | Κατεβάστε

Αποκριτικό ρυθμιστικό περιεχομένου jQuery bxSlider

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

Παραδείγματα | Κατεβάστε

jCarousel

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

Παραδείγματα | Κατεβάστε

ScrollBox - Πρόσθετο jQuery

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

Παραδείγματα | Κατεβάστε

dbpasΚαρουσέλ

Ένα απλό ρυθμιστικό καρουζέλ. Εάν χρειάζεστε ένα γρήγορο πρόσθετο, αυτό είναι 100% κατάλληλο. Διατίθεται μόνο με τα βασικά χαρακτηριστικά που απαιτούνται για να λειτουργήσει το ρυθμιστικό.

Παραδείγματα | Κατεβάστε

Flexisel: Responsive JQuery Carousel Slider Plugin

Οι δημιουργοί του Flexisel εμπνεύστηκαν από το old-school πρόσθετο jCarousel, δημιουργώντας ένα αντίγραφό του, εστιάζοντας στη σωστή λειτουργία του ρυθμιστικού σε κινητές συσκευές και συσκευές tablet.

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

Παραδείγματα | Κατεβάστε

Elastislide - Responsive Carousel Slider

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

Παράδειγμα | Κατεβάστε

Flex Slider 2

Ρυθμιστικό δωρεάν λογισμικού από την Wootemes. Δικαιωματικά θεωρείται ένα από τα καλύτερα ρυθμιστικά απόκρισης. Το πρόσθετο περιέχει πολλά πρότυπα και θα είναι χρήσιμο τόσο για αρχάριους χρήστες όσο και για ειδικούς.

Παράδειγμα | Κατεβάστε

Καταπληκτικό καρουζέλ

Το Amazing Carousel είναι ένα ρυθμιστικό εικόνας jQuery με απόκριση. Υποστηρίζει πολλά συστήματα διαχείρισης περιεχομένου όπως WordPress, Drupal και Joomla. Υποστηρίζει επίσης εκδόσεις Android και IOS και επιτραπέζιους υπολογιστές λειτουργικών συστημάτων χωρίς προβλήματα συμβατότητας. Τα ενσωματωμένα εκπληκτικά πρότυπα καρουζέλ σάς επιτρέπουν να χρησιμοποιείτε το ρυθμιστικό σε κάθετες, οριζόντιες και κυκλικές λειτουργίες.

Παραδείγματα | Κατεβάστε

Σε αυτό το σεμινάριο, θα γράψουμε ένα όμορφο χαρτοφυλάκιο χρησιμοποιώντας jQuery, CSS3 και το πρόσθετο Timeline. Το Timeline είναι ένα πρόσθετο jquery που ειδικεύεται στην εμφάνιση μιας γραμμής χρόνου συμβάντων. Σε αυτό το χαρτοφυλάκιο, μπορείτε να ενσωματώσετε ΔΙΑΦΟΡΕΤΙΚΟΙ ΤΥΠΟΙδεδομένα πολυμέσων: tweets, βίντεο, χάρτες, εικόνες, εγγραφές και, στη συνέχεια, τακτοποιήστε τα σύμφωνα με την ημερομηνία. Εάν εργάζεστε στο σχέδιο, θα έχετε ένα όμορφο χαρτοφυλάκιο που θα αντικατοπτρίζει τα ενδιαφέροντα και τη δουλειά σας.

HTML

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

Αρχικά, ας δούμε τη βασική σήμανση html της σελίδας:

δείκτης.html

Χρονολόγιο Χαρτοφυλακίου | Επίδειξη Tutorialzine

Στην ενότητα head, έχουμε τα στυλ πρόσθετων - timeline.css και styles.css - τα οποία θα περιέχουν τις σχεδιαστικές επιλογές μας. Στο τέλος της σελίδας, συμπεριλαμβάνουμε τη βιβλιοθήκη jQuery, την προσθήκη γραμμής χρόνου και το scripts.js που θα αρχικοποιήσει το πρόσθετο.

Όταν καλούμε το πρόσθετο, βρίσκει ένα μπλοκ DIV με ID=timeline. Μέσα στο μπλοκ, προσαρτά τη σήμανση html, μετά την οποία η σελίδα γίνεται η εξής:

Johnny B Goode

σχεδιαστής & προγραμματιστής

Μάρτιος 2009

Το πρώτο μου πείραμα στη φωτογραφία time-lapse

Η φύση στα καλύτερά της σε αυτό το βίντεο.

Μάρτιος 2010
Σχεδιασμός λογότυπου για κατάστημα κατοικίδιων ζώων
Ιούνιος 2009
Άλλο ένα time-lapse πείραμα

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

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

jQuery

Για να αρχικοποιήσουμε το πρόσθετο, πρέπει να καλέσουμε τη μέθοδο VMM.Timeline():

$(function()( var timeline = new VMM.Timeline(); timeline.init("data.json"); ));

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

Για να μάθετε περισσότερα για το πώς λειτουργείδεδομένα.json, κατεβάστε τις πηγές μαθήματος. Δεν υπάρχει τίποτα περίπλοκο εδώ, δεν χρειάζεται να περιγράψουμε τη δομή αυτού του αρχείου.

css

Με το Firebug HTML Inspector, μπορείτε να ορίσετε επιλογείς για ένα στοιχείο HTML, οι οποίοι ορίζονται στο timeline.css. Μετά από αυτό, χρησιμοποιώντας τους ίδιους επιλογείς, μπορείτε να αντιστοιχίσετε τα στυλ σας στο αρχείο styles.css. Σε ορισμένες περιπτώσεις, έχω χρησιμοποιήσει ! σπουδαίοςνα δώσετε προτεραιότητα στα δικά σας στυλ.

Όλες οι αλλαγές που θα δείτε παρακάτω προστίθενται χειροκίνητα χρησιμοποιώντας Στυλ CSS. Τα υπόλοιπα στοιχεία στυλ ορίζονται από την προσθήκη από προεπιλογή.

Πρώτα απ 'όλα, αφού διαμορφώσουμε γενικά τη σελίδα, θα αλλάξουμε το φόντο του χαρτοφυλακίου:

#timeline( background:none; ) /* Τα μεμονωμένα συμβάντα στο ρυθμιστικό */ .slider .slider-container-mask .slider-container( background:none; ) /* Ορισμός προσαρμοσμένης εικόνας φόντου */ #timeline div.navigation ( φόντο: url("../img/timeline_bg.jpg") επανάληψη; border-top:none; )

Για να δημιουργήσετε ένα εφέ 3D, μπλοκ πλοήγησης, θα πρέπει να χρησιμοποιήσουμε . Το στοιχείο :after είναι το σκοτεινό επάνω μέρος και χρησιμοποιεί μια γραμμική κλίση για να του δώσει ένα τρισδιάστατο εφέ.

#timeline div.navigation:before( position:absolute; content:""; ύψος:40px; πλάτος:100%; left:0; top:-40px; background: url("../img/timeline_bg.jpg") επανάληψη; ) #timeline div.navigation:after( position:absolute; content:""; ύψος:10px; πλάτος:100%; αριστερά:0; top:-40px; background:repeat-x; background-image: linear- gradient(bottom, #434446 0%, #363839 100%); background-image: -o-linear-gradient(bottom, #434446 0%, #363839 100%); background-image: -moz-linear-gradient( bottom, #434446 0%, #363839 100%); background-image: -webkit-linear-gradient(bottom, #434446 0%, #363839 100%); background-image: -ms-linear-gradient(bottom, #434446 0%, #363839 100%); )

#timeline div.timenav-background( background-color:rgba(0,0,0,0.4) !important; ) #timeline .navigation .timenav-background .timenav-interval-background( background:none; ) #timeline .top -επισήμανση( χρώμα φόντου: διαφανές !σημαντικό; )

Σχεδιασμός των κουμπιών μεγέθυνσης και σμίκρυνσης στη γραμμή εργαλείων:

#timeline .toolbar( border:none !important; background-color: #202222 !important; ) #timeline .toolbar div( border:none !important; )

Στυλ κλίμακας στο κάτω μέρος:

#timeline .navigation .timenav .time .time-interval-minor .minor( margin-left:-1px; ) #timeline .navigation .timenav .time .time-interval div( χρώμα: #CCCCCC; )

Βέλη για το προηγούμενο και το επόμενο συμβάν:

Slider .nav-previous .icon ( φόντο: url("timeline.png") χωρίς επανάληψη κύλισης 0 -293px διαφανές; ) .slider .nav-previous,.slider .nav-next( font-family:"Segoe UI" ,sans-serif; ) .slider .nav-next .icon ( φόντο: url("timeline.png") χωρίς επανάληψη κύλισης 72px -221px διαφανές; πλάτος: 70px !important; ) .slider .nav-next:hover . εικονίδιο( position:relative; right:-5px; ) .slider .nav-previous:hover, .slider .nav-next:hover ( χρώμα: #666; δρομέας: δείκτης; ) #timeline .μικρογραφία ( περίγραμμα: μεσαίο κανένα; )

Φόρτωση φόντου:

#timeline .feedback (χρώμα φόντου: #222222; πλαίσιο-σκιά: 0 0 30 εικονοστοιχεία rgba(0, 0, 0, 0.2) ένθετο; περίγραμμα: κανένα; ) #timeline .feedback div( χρώμα: #AAAAAA; μέγεθος γραμματοσειράς : 14 εικονοστοιχεία !important; βάρος γραμματοσειράς: κανονικό; )

#timeline .slider-item h2, #timeline .slider-item h3( font-family:"Antic Slab","Segoe UI",sans-serif; ) #timeline .slider-item h2( color:#fff; ) # timeline .slider-item p( font-family:"Segoe UI",sans-serif; ) #timeline .slider-item img, #timeline .slider-item iframe( border:none; )

Στο τέλος, θα αλλάξουμε το κάλυμμα. Χρησιμοποίησα το nth-child(1) για να συνδέσω μόνο την πρώτη διαφάνεια (το εξώφυλλο) που περιέχει τον τίτλο και την περιγραφή του χαρτοφυλακίου. Αυτά τα δεδομένα αποθηκεύονται σε ένα αρχείο JSON.

/* Προσαρμογή της πρώτης διαφάνειας - το εξώφυλλο */ #timeline .slider-item:nth-child(1) h2( font:normal 70px/1 "Antic Slab","Segoe UI",sans-serif; background:rgba( 0,0,0,0,3); λευκό διάστημα: nowrap; padding: 10px 5px 5px 20px; position:relative; right:-60px; z-index:10; ) #timeline .slider-item:nth-child(1 ) p i( γραμματοσειρά:κανονική κανονική 40px "Dancing Script","Segoe UI",sans-serif; background:rgba(0,0,0,0.3); white space: nowrap; padding:5px 20px; position:relative; right:-60px; z-index:10; ) #timeline .slider-item:nth-child(1) p .c1( color:#1bdff0; ) #timeline .slider-item:nth-child(1) p . c2( color:#c92fe6; ) #timeline .slider-item:nth-child(1) .media-container ( αριστερά: -30px; position: relative; z-index: 1; ) #timeline .slider-item:nth -child(1).credit( text-align: center; )

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

Τι να το κάνεις;

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

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