jQuery jCarousel Script

• Απρίλιος 27, 2024

Το jQuery έχει κάνει την προσθήκη εικόνων σε ιστοσελίδες μια εύκολη εργασία. Υπάρχουν πολλά σενάρια jQuery που κυκλοφορούν υπό τις άδειες MIT και / ή GPL. Τα περισσότερα από αυτά είναι scripts plug-and-play (plug in) που δεν απαιτούν καμία γνώση προγραμματισμού για χρήση στον ιστότοπό σας ή να εγκαταστήσετε στον ιστότοπο του πελάτη σας. Ίσως θελήσετε να εξετάσετε την προσθήκη jQuery scripts στις υπηρεσίες σχεδιασμού σας.

Ένα τέτοιο jQuery script από τον Jan Sorgalla είναι το jCarousel. Αυτό το βύσμα μπορεί να έχει πολλές εφαρμογές τόσο για γραφικά όσο και για κείμενο. Η κύρια λειτουργία του σεναρίου είναι η μετακίνηση περιεχομένου οριζόντια ή κάθετα. Το περιεχόμενο μπορεί να είναι στατικό ή φορτωμένο δυναμικά μέσω Ajax, JavaScript, PHP ή Flickr. Φυσικά, αυτή η δεύτερη επιλογή απαιτεί εξοικείωση με αυτές τις γλώσσες. Το jCarousel συνεργάζεται επίσης με το Thickbox 3, έτσι ώστε μια εικόνα μεγάλου μεγέθους να ανοίγει στο Thickbox όταν η μικρογραφία πατηθεί στο carousel.

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

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

Η ενσωμάτωση με τη ροή φωτογραφιών Flickr και το API Flickr είναι ένα ωραίο χαρακτηριστικό που δεν φαίνεται στα περισσότερα σενάρια. Έχει δοκιμαστεί για να λειτουργήσει σε διάφορα προγράμματα περιήγησης συμπεριλαμβανομένου του διαβόητου Internet Explorer 6.

Ίσως να αναρωτιέστε γιατί θα χρησιμοποιούσατε αυτό αντί για ένα απλό animation gif που μπορείτε να δημιουργήσετε στο Photoshop. Ο κύριος λόγος είναι η ευκολία ενημέρωσης του καρουσέλ μόλις εγκατασταθεί. Είναι πιο εύκολο να αλλάξετε περιεχόμενο στη λίστα UL από το να δημιουργήσετε ένα νέο gif κάθε φορά που θα πρέπει να διαθέτετε διαφορετικό σύνολο εικόνων.

//sorgalla.com/projects/jcarousel/

Οδηγίες Βίντεο: jQuery Tutorial #6 - Building a jQuery Image Slider (Απρίλιος 2024).