Hi! Welcome...

Premium Blogger Template
FREE Premium Blogger Templates
Μοναδικά Free Blogger πρότυπα για το blog σας
Slimbox 2.02 με jquery-1.3.2 στο Bloggspot .
Πώς να εγκαταστήσετε SlimBox σε Blogger
ΙmgBox
Για να παρουσιάσετε τις εικόνες σας με στυλ !!!
31 καλυτέρα Blogger Widgets και addon
Κατάλογος συνδέσμων όπου μπορείτε να ανακαλύψετε περισσότερα widgets για το blog σας.
1 2 3 4 5

Δευτέρα, Νοεμβρίου 2

0

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

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

0:

 

© 2010 Bloggertrics

WordPress Theme by: WooThemes. | Converted into Blogger Templates by : Bloggertrics

ΑΡΧΙΚΗ| Sitemap| Posts RSS