Ενσωματώστε Κινούμενα GIF Όπως το Facebook με το jqGifPreview
Το Twitter και το Facebook έχουν πολλούς ανθρώπους κοινή χρήση κινούμενων GIF καθημερινά. Αν όλα αυτά παίζονται αυτόματα, θα μπορούσαν να είναι τρομακτικά σε μια τροφή.
Και τα δύο δίκτυα περιστρέφονται γύρω από αυτό με ένα κάντε κλικ στη λειτουργία προεπισκόπησης για όλα τα GIF. Αυτό επιτρέπει στον χρήστη να επιλέξει ποια κινούμενα σχέδια θέλουν να δουν επιλέγοντας πότε θα ξεκινήσει / σταματήσει η κινούμενη εικόνα.
Με το jqGifPreview plugin, μπορείτε να έχετε την ίδια λειτουργικότητα στον ιστότοπό σας.
Αυτό δωρεάν plugin jQuery λειτουργεί σε όλα τα GIF στη σελίδα ή μπορεί να στοχεύει συγκεκριμένα όσα θέλετε. Είναι ένας φανταστικός πόρος, αλλά χρειάζεται λίγο χρόνο για να το στήσετε.
Ένα πακέτο GIF είναι πραγματικά δίκαιο ένα πλαίσιο της κινούμενης εικόνας, εμφανίζεται στη σελίδα.
Δυστυχώς, αυτό το πρόσθετο δεν τραβήξτε αυτόματα μια στατική εικόνα από το GIF για σενα. Αλλά, μπορείτε να το ολοκληρώσετε χρησιμοποιώντας PHP ή οποιαδήποτε άλλη γλώσσα backend, έτσι ώστε με ένα κομμάτι κώδικα, αυτό μπορεί να αυτοματοποιηθεί.
Αυτό το πρόσθετο χρησιμοποιεί ένα χαρακτηριστικό δεδομένων * προς αποθηκεύστε τη θέση εικόνας GIF. Μόλις ο χρήστης κάνει κλικ στην εικόνα, θα φορτωθεί αυτόματα στο src
χαρακτηριστικό της εικόνας και να εμφανίζεται στην οθόνη.
Απλό, αποτελεσματικό και σίγουρα ένα καθαρό αποτέλεσμα! Το μόνο που χρειάζεστε είναι τα αρχεία CSS / JS για αυτό το plugin που μπορείτε τραβήξτε απευθείας από το GitHub. Και φυσικά, θα το κάνετε χρειάζονται ένα αντίγραφο του jQuery, πολύ.
Από εκεί, ορίσατε την εικόνα σας ως εξής:
Το κύριο src
χαρακτηριστικό πρέπει περιέχει τη στατική εικόνα. Μπορείτε είτε να δημιουργήσετε ένα σενάριο για να το δημιουργήσετε, είτε μπορείτε να επεξεργαστείτε και να μεταφορτώσετε με μη αυτόματο τρόπο μια στατική λήψη για κάθε GIF.
ο data-gif
Χαρακτηριστικό κρατά το πραγματικό κινούμενο GIF και θα ανταλλάξουν με κλικ εάν εσείς στοχεύει στην κύρια κατηγορία εικόνων (σε αυτή την περίπτωση, είναι .myImg
). Τώρα, το μόνο που χρειάζεστε είναι μια γραμμή jQuery για να το καταφέρετε:
$ (".myImg") .jqGifPreview ();
Σίγουρα, ένα από τα πιο cool jQuery plugins που έχω δει αυτό το μήνα και είναι πολύ εύκολο να δημιουργηθεί.
Μπορείτε να μάθετε περισσότερα με την επίσκεψη στο Σελίδα GitHub και υπάρχει επίσης a ζωντανή προεπισκόπηση προεπισκόπησης που φιλοξενείται στον ιστότοπο του προγραμματιστή.