Η μεγεθυμένη εικόνα θα εμφανίζετε στο κέντρο της της οθόνης μας , μέχρι να κάνουμε κλικ πάνω της και μετά θα επιστρέψει στο αρχικό της μέγεθος .
Για να κάνουμε να δουλέψει το script και για να το βάλουμε στο blog μας ακολουθούμε τα εξής βήματα :
Θα χρειαστούμε αρχικά δύο εξωτερικά JavaScript αρχεία , μεταφορτώσετε τα και αποθηκεύστε τα αρχεία
jquery.magnifier.js
magnify.cur
Έπειτα ανεβάζουμε το αρχείο “ magnify.cur “ σε μια υπηρεσία δωρεάν φιλοξενίας και αποθήκευσης για τα αρχεία των χρηστών << π.χ. http://www.4shared.com/ , http://sites.google.com/ >> η όποια εσείς χρησιμοποιείτε . ( Το αρχείο “ jquery.magnifier.js “ δεν το ανεβάζουμε ακόμη , χρειάζεται επεξεργασία ) .
Τώρα ανοίγουμε το αρχείο jquery.magnifier.js και ψάχνουμε στο JavaScript τις παρακάτω γραμμές :
cursorcss: 'url(magnify.cur), -moz-zoom-in', //Value for CSS's 'cursor' attribute, added to original image
Αλλάζουμε το “ magnify.cur “ με το URL του αντιστοίχου αρχείου μας και αποθηκεύουμε το JavaScript αρχείο . ( Δείτε το Screenshot κάτω )
Σε αυτό το σημείο μπορούμε να ανεβάσουμε και το αρχείο “ jquery.magnifier.js “ σε μια υπηρεσία δωρεάν φιλοξενίας και αποθήκευσης για τα αρχεία των χρηστών << π.χ. http://www.4shared.com/ , http://sites.google.com/ >> η όποια εσείς χρησιμοποιείτε .
1) Τώρα πηγαίνουμε Διάταξη >> Επεξεργασία HTML >> Επέκταση προτύπων γραφικών στοιχείων ( Πριν επεξεργαστούμε το πρότυπό μας, κάνουμε πάντα ένα αντίγραφο ασφαλείας , πατώντας : Λήψη πλήρους προτύπου) , ψάχνουμε να βρούμε το </head> και κολλάμε ακριβώς από πάνω τον παρακάτω κώδικα :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.magnifier.js">
/***********************************************
* jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
Τώρα αντικαταστούμε το αρχείο : jquery.magnifier.js με το URL του αντιστοίχου αρχείου μας και αποθηκεύουμε το πρότυπο μας .
Κάθε φορά που θέλουμε οι εικόνες μας να έχουν αυτό το zoom Effect εισάγουμε στις εικόνες το " class " στοιχείο και ο κώδικας μας θα είναι κάπως έτσι :
<img class="magnify" magnifyby="3" style="width: 501px; height: 250px;" src="http://blogspot.com/.../...../.../...../...png" alt="jQuery Image Magnifier Blogger" id="BLOGGER_PHOTO_ID_............" border="0" />
Η
<img src="ΧΧΧΧΧ.gif" class="magnify" style="width:200px; height:150px" /> <img src="ΥΥΥΥ.gif" class="magnify" border="0" />
Δείτε το DEMO κάτω ( Κάντε κλικ πάνω στις εικόνες ) :
Demos
Μεγέθυνση 3x, duration=0.5
second:

Μεγέθυνση 3.5x, duration=0.5
second:



Αν έχετε οποιοδήποτε πρόβλημα με την εγκατάσταση , αισθανθείτε ελεύθεροι να μου αφήσετε ένα σχόλιο και θα σας βοηθώ ΤΟ ΣΥΝΤΟΜΟΤΕΡΟ ΔΥΝΑΤΟΝ