jQuery Image Magnify Effect

   jQuery Image Magnify Effect μας επιτρέπει να κάνουμε      μεγέθυνση σε κάθε εικόνα στο blog μας , όταν κάνουμε κλικ πάνω στις εικόνες  .
Η μεγεθυμένη εικόνα θα εμφανίζετε στο κέντρο της της οθόνης μας , μέχρι να κάνουμε κλικ πάνω της και μετά θα επιστρέψει στο αρχικό της μέγεθος .

 

 Για να κάνουμε να δουλέψει το 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:

φωτο απο : coolimagebank.gr

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