Πώς να μεγεθύνετε εικόνες όπως το μέσο
Η πλατφόρμα blogging Medium χρησιμοποιεί a εφέ προσαρμοσμένης μεγέθυνσης εικόνας στις σελίδες του ιστολογίου τους. Κάθε φορά που ο χρήστης κάνει κλικ σε μια εικόνα, θα μεγεθύνεται αυτόματα σε μεγαλύτερο μέγεθος.
Είναι ένα μεγάλο αποτέλεσμα και σίγουρα μοναδικό για το Medium, αλλά ποτέ δεν ήταν κάτι που θα μπορούσε εύκολα να αντιγραφεί.
Τώρα, με το MediumLightbox script, είναι πιο εύκολο από ποτέ. Αυτό το σενάριο JS είναι ελαφρύ και εύκολο να προστεθεί σε οποιαδήποτε ιστοσελίδα ή blog.
Εάν θέλετε να δείτε πώς λειτουργεί αυτό, μπορείτε να επισκεφτείτε το ζωντανή σελίδα επίδειξης που φιλοξενείται από τον δημιουργό Davide Calignano.
Ξόδεψε για λίγο το ακριβές αποτέλεσμα μετάβασης και προσαρμοσμένης κίνησης δημιουργήστε μια εικόνα καθρέφτη της μεγέθυνσης εικόνας του Medium. Ολόκληρη η βιβλιοθήκη είναι γραμμένο σε καθαρό JavaScript, έτσι δεν βασίζεται σε καμία 3rd όπως το jQuery.
Θα χρειαστεί να γνωρίζετε ένα μικρό JS για να το εγκαταστήσετε, αλλά σίγουρα δεν χρειάζεται να είστε ειδικός.
Κάθε εικόνα μπορεί να πάρει Δεδομένα- * χαρακτηριστικά για τον καθορισμό του ύψους και πλάτους πλήρους μεγέθους, τα οποία είναι όλα τράβηξε δυναμικά από το plugin lightbox. Ο κωδικός εγκατάστασης είναι πολύ απλός και μπορεί στοχεύουν τις ίδιες τις εικόνες, ή δοχεία όπως το
Εδώ είναι το ενιαίο απόσπασμα κώδικα που χρειάζεστε για να εκτελέσετε το plugin:
MediumLightbox ('effect.zoom-effect'); Μέσα στη λειτουργία, θα περάστε έναν επιλογέα για όλα τα στοιχεία (π.χ.. .εφέ ζουμ τάξη. Αυτή η τάξη είναι συγκεκριμένα στο φύλλο στυλ MediumLightbox, οπότε είναι καλύτερο να το χρησιμοποιήσετε και στη σελίδα σας.
¶Και, μόλις αυτή έχει ρυθμιστεί, είστε έτοιμοι!
Στην περιοχή περιεχομένου σελίδας, μπορείτε να ολοκληρώσετε όλες τις εικόνες σε α
Για να κατεβάσετε ένα αντίγραφο αυτού του σεναρίου και να ξεκινήσετε, απλώς επισκεφθείτε το κύριο repos GitHub. Εδώ, θα βρείτε επίσης τεκμηρίωση μαζί με αποσπάσματα κώδικα μπορείτε να αντιγράψετε για να ρυθμίσετε γρήγορα.
