ZooMove jQuery Plugin για τη ζουμ των εικόνων στην πλοήγηση

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

ο Προσθήκη plugin ZooMove είναι ένας πολύ καλός τρόπος να αντιγράψτε αυτό το αποτέλεσμα στον ιστότοπό σας. Του powered by jQuery, ώστε να μπορείτε να το κατεβάσετε γρήγορα χωρίς πολύ κωδικό.

Το ZooMove είναι εντελώς δωρεάν και ανοιχτό, διαθέσιμο στο GitHub για τυχόν περίεργους προγραμματιστές. Μπορεί να εγκατασταθεί μέσω npm, Κληματαριά, Νήμα, ή να κατεβάσετε απευθείας από CDNJS.

Για να ρυθμίσετε μια εικόνα του ZooMove, θα χρειαστείτε τρία συγκεκριμένα αρχεία στην κεφαλίδα της σελίδας σας:

1. jQuery
2. ZooMove CSS
3. ZooMove JS

Και τα δύο αρχεία ZooMove μπορεί να εξομαλυνθεί αν θέλετε ταχύτερη φόρτωση σελίδας. Θα μπορούσατε επίσης να συνδυάσετε το αρχείο CSS στο κύριο φύλλο στυλ σας, αν αυτό είναι πιο εύκολο.

Όλη η πραγματική μαγεία συμβαίνει στο HTML όπου μπορείτε ορίστε HTML5 Δεδομένα- * χαρακτηριστικά για τα διαφορετικά αποτελέσματα.

Αυτό σας επιτρέπει να δημιουργήσετε το δικό σας δικό σας εφέ ζουμ με βάση τέσσερις διαφορετικές παραμέτρους:

1. δεδομένα-ζωολογική κλίμακα - ορίζει το το συνολικό μέγεθος του ζουμ όταν αιωρείται (π.χ. 2.0 για 200%)
2. δεδομένα-κίνηση-ζωολογικό κήπο - καθορίζει αν η εικόνα κινείται μαζί με τον κέρσορα
3. δεδομένα-ζωολογικό κήπο - ορίζει την μεγέθυνση της εικόνας εμφανίζονται πάνω από το πρωτότυπο
4. δεδομένα-ζωολογικός δρομέας - ορίζει το σημείο δρομέα

Μια τελευταία πέμπτη παράμετρος σας επιτρέπει να ορίσετε ποια είναι η νέα διεύθυνση URL εικόνας πρέπει να είναι (αν χρειαστεί).

Μπορείτε να χρησιμοποιήσετε το ZooMove σε όλα τα μεγάλα προγράμματα περιήγησης, συμπεριλαμβανομένου του IE9 +. Αυτό το πρόσθετο είναι υποστηρίζεται ευρέως και προσφέρει ένα heck μιας εμπειρίας χρήστη.

Αν ψάχνετε για ένα απλή βιβλιοθήκη με το hover-to-zoom Το ZooMove είναι μια εξαιρετική επιλογή. Του αρκετά ελαφρύ για να τρέχει σε οποιονδήποτε ιστότοπο και είναι powered by jQuery, έτσι δεν θα χρειαστεί να γράψετε τόσο πολύ κώδικα για να λειτουργήσει.

Επισκεφθείτε την κύρια σελίδα για να την δείτε σε δράση και δείτε την τεκμηρίωση στο GitHub για να μάθετε περισσότερα.