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

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

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

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

Δημιουργήστε μια Συλλογή εικόνων με το jQuery

Αλλά πριν γράψουμε κώδικα Java Script, πρέπει να περάσουμε από μερικά προπαρασκευαστικά βήματα.

Πρώτα, πρέπει να προετοιμάσετε τις εικόνες σας. Θα έχουμε δύο τύπους εικόνων: μικρογραφίες και μεγάλες εικόνες. Δημιούργησα έναν φάκελο “img”, στον οποίο δημιούργησα άλλους 2 φακέλους: “big” και “small”. Αποθήκευσα μεγάλες εικόνες στον φάκελο "μεγάλο" (όλες έχουν περίπου το ίδιο μέγεθος σε πλάτος και ύψος, περίπου 500px επί 500px). Ο "μικρός" φάκελος περιέχει μικρογραφίες των ίδιων εικόνων (τα μεγέθη τους πρέπει επίσης να είναι περίπου ίδια. Όταν λέω περίπου, αυτό σημαίνει ότι μια διαφορά 2-3 pixel δεν έχει μεγάλη σημασία).

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

Δεύτερον, πρέπει να δημιουργήσουμε ένα αρχείο html, να δημιουργήσουμε τη διάταξη της σελίδας με τη συλλογή μας σε αυτό και να συνδέσουμε ένα αρχείο css (φύλλο στυλ) σε αυτό το αρχείο.

Ας το κάνουμε τώρα.

1. Ανοίξτε το πρόγραμμα επεξεργασίας για να δημιουργήσετε τον κώδικά μας και δημιουργήστε ένα νέο αρχείο html. Ας το ονομάσουμε “gallery.html” και ας το αποθηκεύσουμε στον ίδιο κατάλογο όπου βρίσκεται ο φάκελος με τις εικόνες “img”.

Τώρα ας γράψουμε τα περιεχόμενα αυτού του αρχείου.

Μεταξύ των ετικετών "body" θα υπάρχει ένα div με το αναγνωριστικό "wrapper". Θα περιέχει 2 κύρια στοιχεία: μια ετικέτα κεφαλίδας, η οποία θα περιέχει τον τίτλο και ένα div με το αναγνωριστικό «περιεχόμενο», που θα περιέχει ολόκληρη τη συλλογή μας.

Το "content" div θα περιέχει ένα div με αναγνωριστικό "main", το οποίο θα περιέχει τον τίτλο για τη συλλογή. ένα div με το αναγνωριστικό "gallery", όπου βρίσκονται οι μικρογραφίες των εικόνων μας, και ένα άλλο div με το αναγνωριστικό "photo". Το div με το αναγνωριστικό "φωτογραφία" θα είναι κενό προς το παρόν, αλλά όταν εκτελείται η συλλογή, θα εμφανίζονται σε αυτό μεγάλες εικόνες των αντίστοιχων μικρογραφιών.

Αυτό είναι βασικά όλο. Ο κώδικας για όλα τα παραπάνω θα μοιάζει με αυτό:

Γκαλερί jQuery

Γκαλερί με jQuery

Η γκαλερί μου

Έτσι θα μοιάζει η σελίδα αν την ανοίξουμε σε πρόγραμμα περιήγησης:

2. Τώρα πρέπει να γίνει στυλ στη σελίδα. Για να το κάνετε αυτό, δημιουργήστε ένα αρχείο φύλλου στυλ "style.css" και αποθηκεύστε το στον ίδιο κατάλογο με το έγγραφο html.

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

Το φύλλο στυλ είναι συνδεδεμένο και τώρα ήρθε η ώρα να προσθέσουμε στυλ για όλα τα στοιχεία μας. Μεταβείτε στο αρχείο "style.css" και γράψτε τον ακόλουθο κώδικα:

body(background:rgba(102,102,153,1);) #wrapper(margin:0 auto; πλάτος:80%;) header(text-align:center;).logo(font-family:Helvetica, sans-serif; font- Μέγεθος: 36 εικονοστοιχεία:#DD8D15; κείμενο-σκιά:2εικ. 2εικ. 2px 2px #333; text-align:center;) #gallery(float:left; width:90px; margin-left:20px; border-right:1px solid #fff;) #gallery img(margin:0 0 10px 0; οθόνη: inline-block; ;)

Εδώ ορίζουμε το χρώμα για τη σελίδα μας, ορίζουμε το πλάτος για το div με το αναγνωριστικό "wrapper" και ορίζουμε τη θέση του στο κέντρο.

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

Εκχωρούμε ένα αριστερό float, πλάτος, padding και δεξί περίγραμμα στο div με το αναγνωριστικό "gallery".

Για τις μικρογραφίες, τους δίνουμε επίσης ένα πλαίσιο με εσοχή και μια ιδιότητα "display:inline-block", η οποία δημιουργεί ένα στοιχείο μπλοκ που τυλίγεται γύρω από άλλα στοιχεία της ιστοσελίδας.

Ρυθμίζουμε το div με το αναγνωριστικό «φωτογραφία» στα αριστερά, το επάνω πλαίσιο, και επίσης το τοποθετούμε σχετικά και τοποθετούμε τις μεγάλες εικόνες που θα εμπίπτουν σε αυτό απολύτως.

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

3. Και το τελευταίο προπαρασκευαστικό βήμα είναι να συνδέσετε τη βιβλιοθήκη jQuery στη σελίδα μας και να δημιουργήσετε ένα αρχείο js για το δικό σας σενάριο.

Μπορείτε να κατεβάσετε το αρχείο της βιβλιοθήκης jQuery από το http://jquery.com/ ή να το κατεβάσετε από τις πηγές αυτού του σεμιναρίου από το φάκελο που ονομάζεται "js".

Για λήψη ενός αρχείου για σύνδεση της βιβλιοθήκης από τον ιστότοπο jquery.comΧρειάζομαι:

1. Κάντε κλικ στο κουμπί «Λήψη» στο μενού τοποθεσίας.
2. Στη σελίδα που ανοίγει, βρείτε τον σύνδεσμο «Λήψη του συμπιεσμένου, παραγωγής jQuery 1.10.2» (οι τελευταίοι αριθμοί είναι η έκδοση της βιβλιοθήκης, ενδέχεται να διαφέρουν).
3. Κάντε δεξί κλικ στο σύνδεσμο και επιλέξτε "Αποθήκευση στόχου ως...", μετά από το οποίο πρέπει να επιλέξετε τη θέση όπου θέλετε να αποθηκεύσετε το αρχείο.

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

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

Αλλά πριν το γράψουμε, πρέπει να συνδέσουμε αυτά τα δύο αρχεία στη σελίδα html μας.

Για να το κάνετε αυτό, μεταβείτε ξανά στο αρχείο "gallery.html" και πριν από την ετικέτα κλεισίματος κεφαλιού προσθέστε τις ακόλουθες γραμμές:

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

4. Ανοίξτε το αρχείο "my_script.js" και γράψτε τις ακόλουθες γραμμές:

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

Πρώτα πρέπει να επιλέξουμε όλους τους συνδέσμους που βρίσκονται στο div με id "gallery" και να τους αντιστοιχίσουμε ένα συμβάν κλικ του ποντικιού. Θα περάσουμε μια ανώνυμη συνάρτηση στο συμβάν κλικ, η οποία θα εκτελέσει ορισμένες ενέργειες. Σε αυτήν την περίπτωση, η συνάρτηση θα έχει μια μεταβλητή "evt", η οποία θα αποθηκεύει το αντικείμενο συμβάντος (δηλαδή τον σύνδεσμο που έγινε κλικ).

$(document).ready(function() ( $("#gallery a").click(function(evt)( )); ));

Συνήθως, το πρόγραμμα περιήγησης αντιδρά στο κλικ σε έναν σύνδεσμο με τον ακόλουθο τρόπο: μας στέλνει στη σελίδα που καθορίζεται στην παράμετρο «href» του συνδέσμου. Αλλά σε αυτή την περίπτωση δεν το χρειαζόμαστε. Θέλουμε μεγάλες εικόνες να εμφανίζονται στην ίδια σελίδα στην οποία βρισκόμαστε αυτήν τη στιγμή, σε ένα χώρο που έχει καθοριστεί για αυτές. Επομένως, το πρώτο βήμα είναι να παρακάμψετε την προεπιλεγμένη συμπεριφορά του προγράμματος περιήγησης όταν κάνετε κλικ στους συνδέσμους μας. Απλώς για αυτό χρειαζόμαστε τη μεταβλητή "evt", στην οποία αποθηκεύεται το αντικείμενο συμβάντος. Πρέπει να εφαρμόσουμε τη συνάρτηση αντικειμένου συμβάντος "preventDefault" σε αυτό.

$(document).ready(function() ( $("#gallery a").click(function(evt)( evt.preventDefault(); )); ));

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

Αρχικά, θα εξαγάγουμε το χαρακτηριστικό "href" της μεγάλης εικόνας της οποίας έγινε κλικ στη μικρογραφία και θα το τοποθετήσουμε στη μεταβλητή "imgPath".

Δεύτερον, θα δημιουργήσουμε μια μεταβλητή "oldImg", η οποία θα αποθηκεύει τη μεγάλη εικόνα που βρίσκεται αυτήν τη στιγμή στην περιοχή της εικόνας.

Τρίτον, θα δημιουργήσουμε μια μεταβλητή “newImg” στην οποία θα σχηματίσουμε μια ετικέτα img για τη νέα εικόνα που θα πρέπει να εμφανίζεται στην περιοχή της εικόνας. Εδώ χρειαζόμαστε τη μεταβλητή "imgPath", η οποία περιέχει το χαρακτηριστικό "href" για αυτήν την εικόνα.

$(document).ready(function() ( $("#gallery a").click(function(evt)( evt.preventDefault(); var imgPath = $(this).attr("href"); var oldImg = $("#photo img" var newImg = $("" ));

Έχουμε δημιουργήσει όλες τις μεταβλητές που χρειαζόμαστε. Το μόνο που μένει είναι να κάνουμε κάποια πράγματα μαζί τους.

Άρα, χρειαζόμαστε τη νέα εικόνα, τη μικρογραφία της οποίας μόλις έκανε κλικ ο επισκέπτης, να εξαφανιστεί πρώτη. Ρωτάς: «Γιατί;» Το γεγονός είναι ότι για να δημιουργήσουμε ένα αποτέλεσμα εκδήλωσης, πρέπει πρώτα να κρύψουμε εντελώς την εικόνα. Αυτό μπορούμε να το πετύχουμε χρησιμοποιώντας τη συνάρτηση hide().

Η επόμενη ενέργεια θα είναι να προσθέσουμε μια νέα εικόνα στην ετικέτα με το αναγνωριστικό “photo” και εδώ θα χρησιμοποιήσουμε τη συνάρτηση prepend(), η οποία θα προσθέσει τον κώδικα html της εικόνας στην ετικέτα, δηλαδή στην αρχή.

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

$(document).ready(function() ( $("#gallery a").click(function(evt)( evt.preventDefault(); var imgPath = $(this).attr("href"); var oldImg = $("#photo img"); $("").

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

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

Και θα το κάνουμε ως εξής: πρώτα θα κρύψουμε την παλιά εικόνα μέσα σε 1 δευτερόλεπτο (με αυτόν τον τρόπο θα έχουμε μια ομαλή μετάβαση μεταξύ των εικόνων). Η συνάρτηση fadeOut() θα μας βοηθήσει σε αυτό.

Αλλά αυτό δεν αρκεί, πρέπει όχι μόνο να αποκρύψετε την εικόνα, αλλά και να την αφαιρέσετε από την ετικέτα "φωτογραφία", και επομένως θα περάσουμε τον χρόνο εφέ (1000 χιλιοστά του δευτερολέπτου) ως την πρώτη παράμετρο στη συνάρτηση fadeOut() και ως δεύτερη παράμετρος μια συνάρτηση που θα διαγράψει την παλιά εικόνα χρησιμοποιώντας τη συνάρτηση remove().

$(document).ready(function() ( $("#gallery a").click(function(evt)( evt.preventDefault(); var imgPath = $(this).attr("href"); var oldImg = $("#photo img"); $("");

Η γκαλερί μας είναι πλέον σε λειτουργία. Μπορείτε να φορτώσετε ξανά τη σελίδα του προγράμματος περιήγησης και να ελέγξετε αν λειτουργεί.

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

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

Πρέπει να προσθέσουμε μόνο μία γραμμή σχεδόν στο τέλος. Έτσι, όλος ο κώδικας JavaScript μας θα μοιάζει με αυτό:

$(document).ready(function() ( $("#gallery a").click(function(evt)( evt.preventDefault(); var imgPath = $(this).attr("href"); var oldImg = $("#photo img"); $(""); $("#gallery a:first").click());

Ολα! Η γκαλερί είναι έτοιμη! Μπορείτε να δείτε τη δουλειά της κάνοντας κλικ στο εικονίδιο που λέει "Demo" στην αρχή της ανάρτησης.

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

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

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

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

Και σε αυτό το σημείωμα, θα σας αποχαιρετήσω.

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

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

Σας συγχαίρω επίσης για τις γιορτές της Πρωτοχρονιάς που πλησιάζουν και σας εύχομαι να περάσετε όμορφα!

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

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

ΠΗΓΕΣ

Σήμανση HTML

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

• Κατηγορίες:


• Ολα


• Κατηγορία 1


• Κατηγορία 2


• Κατηγορία 3


• Κατηγορία 4

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

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

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

Στυλ CSS

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

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

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

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

jQuery

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Λοιπόν, έπρεπε να καταφέρεις να βγάλεις τόσες πολλές φωτογραφίες που ακόμη και η πεθερά σου έχει τις φωτογραφίες κάτω από το κρεβάτι της. Σου είπε η γυναίκα σου να μην βγάζεις άλλες φωτογραφίες στο σπίτι; Ωχ-χο! Τότε ήρθε η ώρα να μεταφέρετε όλη την εργασία σας στον εικονικό χώρο. Και για αυτό θα χρειαστείτε μια συλλογή φωτογραφιών για τον ιστότοπο:

Συλλογή φωτογραφιών για τον ιστότοπο

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

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

• Η δυνατότητα εμφάνισης όλων των εικόνων (φωτογραφιών) ταυτόχρονα - μερικές φορές οι χρήστες είναι πολύ τεμπέληδες για να πατήσουν κουμπιά για κύλιση. Και στην κλασική συλλογή φωτογραφιών, όλα τα αντικείμενα είναι άμεσα διαθέσιμα για προβολή.
• Ευκολία υλοποίησης - ένα τυπικό πρότυπο μπορεί να δημιουργηθεί εύκολα χρησιμοποιώντας html.
• Ανοιχτότητα – μια συλλογή φωτογραφιών (σε σύγκριση με ένα άλμπουμ) έχει μεγαλύτερο «ανοιχτό», το οποίο σε υποσυνείδητο επίπεδο σας επιτρέπει να εμπνεύσετε εμπιστοσύνη από την πλευρά των χρηστών.

Ταυτόχρονα, η γκαλερί έχει και μειονεκτήματα. Το κυριότερο είναι ο όγκος. Λόγω του «τεράστιου» μεγέθους του, καταλαμβάνει πολύ χώρο στη σελίδα του ιστότοπου. Ως εκ τούτου, είναι πολύ δύσκολο να ενταχθεί στο συνολικό σχέδιο. Επιπλέον, η συλλογή φωτογραφιών έχει ένα στενό "εύρος δράσης", επειδή η χρήση της δικαιολογείται μόνο σε πλήρεις εκδόσεις πόρων. Και η εφαρμογή του «κλασικού» του σχήματος για κινητές συσκευές είναι πολύ δύσκολη.

Παράδειγμα κλασικής συλλογής φωτογραφιών

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

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

φωτογραφίες

Κωδικός παιδικής ιστοσελίδας:

Πίσω

Συλλογή φωτογραφιών με χρήση CSS

Το προηγούμενο παράδειγμα, αν και απλό στην εφαρμογή, είναι πολύ βαρύ. Και μοιάζει περισσότερο με τη «ραχοκοκαλιά» ενός απλού ιστότοπου. Επομένως, για να μην χρησιμοποιείτε πολλά διασυνδεδεμένα έγγραφα Ιστού στην υλοποίηση μιας συλλογής φωτογραφιών, μπορείτε να χρησιμοποιήσετε τις δυνατότητες Javascript για να επεξεργαστείτε το συμβάν (κάντε κλικ στην εικόνα προεπισκόπησης). Αλλά θα παραλείψουμε την κωδικοποίηση προς το παρόν και θα χρησιμοποιήσουμε CSS για να εφαρμόσουμε μια φωτογραφία στο ακόλουθο παράδειγμα:

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

Παράδειγμα κώδικα Html για το πώς να δημιουργήσετε μια συλλογή φωτογραφιών σε έναν ιστότοπο:

Συλλογές φωτογραφιών CSS:

#gall ( θέση: σχετική; padding-top: 50%; -moz-user-select: none; user-select: none; ) #gall img ( position: absolute; top: 25%; left: 12,5%; max- πλάτος: 24,5% max-height: 49,5% -webkit-transform(-50%) 4n-2) (αριστερά: 37,5%;) #gall img:nth-child(4n-1) (αριστερά: 62,5%;) #gall img:nth-child(4n ) (αριστερά: 87,5%;) #gall img :nth-child(n+5) (επάνω: 75%;) #gall img:focus ( θέση: απόλυτη; επάνω: 50%; αριστερά: 50%; δείκτης z : 1; μέγ. πλάτος: 100%, περίγραμμα : κανένας δείκτης: καμία;

Συλλογή φωτογραφιών βασισμένη στο Jquery

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

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

Ας δούμε ένα βήμα προς βήμα παράδειγμα σύνδεσης της Galleria σε έναν κανονικό ιστότοπο html:

• Συνδέουμε τη βιβλιοθήκη Jquery στην ιστοσελίδα μας - για να το κάνετε αυτό, εισάγετε τη γραμμή μέσα στην ετικέτα:

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

$("body").text("jQuery λειτουργεί");

Εάν η σύνδεση γίνει σωστά, τότε όταν εκκινήσετε την ιστοσελίδα, το αντίστοιχο κείμενο θα εμφανιστεί στο πρόγραμμα περιήγησης:

• Εγκατάσταση Galleria - σε αυτό το στάδιο θα πρέπει να κάνετε λήψη του αρχείου με τη συλλογή φωτογραφιών για τον ιστότοπο και να το αποσυσκευάσετε στον κατάλογο όπου βρίσκεται το αρχείο html μας. Για να συνδέσετε το πρόσθετο, τοποθετήστε τον ακόλουθο κώδικα ακριβώς κάτω από τη γραμμή με την οποία ενεργοποιήσαμε την υποστήριξη Jquery στο προηγούμενο βήμα:

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

if (Galleria) ( $("body").text("Η Galleria λειτουργεί") )

Εάν η συλλογή είναι συνδεδεμένη σωστά, το πρόγραμμα περιήγησης θα εμφανίσει το μήνυμα "Η Galleria λειτουργεί":

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

Στη συνέχεια προσθέτουμε εικόνες για εμφάνιση:

• Ενεργοποιούμε την προσθήκη και ορίζουμε το θέμα της συλλογής φωτογραφιών για τον ιστότοπο - για να γίνει αυτό, αμέσως κάτω από το επίπεδο εικόνας τοποθετούμε τις ακόλουθες γραμμές κώδικα:

Στο παράδειγμα εγκαθιστούμε το κλασικό θέμα. Άλλα θέματα είναι διαθέσιμα για λήψη στον ιστότοπο της προσθήκης, αλλά όλα πληρώνονται:

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

Έγγραφο χωρίς τίτλο .galleria (πλάτος: 700 εικονοστοιχεία; ύψος: 400 εικονοστοιχεία; φόντο: #000 ) Galleria.loadTheme("galleria/themes/classic/galleria.classic.min.js"); Galleria.run(".galleria");

Αλλες επιλογές

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

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

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

Αναζήτηση

Το ερώτημά σας vkontakte gallery βρήκε 137 αποτελέσματα

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

  Αγώνας: 6

• Μια άλλη όμορφη γκαλερί jQuery είναι το Pirobox. Λειτουργεί τόσο σε κανονικά προγράμματα περιήγησης όσο και στο αγαπημένο IE6-7 όλων.

  Αγώνας: 6

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

  Αγώνας: 6

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

  Αγώνας: 6

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

  Αγώνας: 6

• Αυτό το μάθημα παρουσιάζει μια συλλογή εικόνων πλήρους οθόνης (16 διαφάνειες). Όλες οι εικόνες συγκεντρώνονται σε ένα τεράστιο πεδίο 4x4. Η πλοήγηση πραγματοποιείται χρησιμοποιώντας έναν μικροσκοπικό χάρτη, στον οποίο μπορείτε να επιλέξετε το επιθυμητό τμήμα της συλλογής ή χρησιμοποιώντας βέλη στις εικόνες. Η μετάβαση μεταξύ των εικόνων πραγματοποιείται με ομαλή ολίσθηση.

  Αγώνας: 6

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

  Αγώνας: 6

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