Image Zoom 2 (code)

Φίλοι bloggers γεια σας !!!Το προηγούμενο zoom in άρεσε πάρα πολύ, και έτσι σκέφτηκα να παρουσιάσω άλλο ένα zoom του Professor Cloud !!! Εφαρμογές θα βρείτε σε πολλά εμπορικά e-shops όπου χρησιμοποιούν με αυτό το κώδικα τη μεγέθυνση του προϊόντων τους...DEMO
Στις εικόνες δείτε πού μπαίνουν οι κώδικες:

...και ΠΡΙΝ το </head> , επικολλήστε τον κώδικα:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link href="http://www.professorcloud.com/styles/cloud-zoom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://pantel.googlecode.com/files/cloud-zoom.1.0.2.js"></script>

...μετά πηγαίνετε =>

και επικολλήστε τον κώδικα :

<div class="zoom-section">    
      <div class="zoom-small-image"><a href='ΔΙΕΥΘΥΝΣΗ URL ΜΕΓΑΛΗΣ ΕΙΚΟΝΑΣ 1' class = 'cloud-zoom' id='zoom1' rel="adjustX: 10, adjustY:-4"><img src="ΔΙΕΥΘΥΝΣΗ URL ΜΕΣΑΙΑΣ ΕΙΚΟΝΑΣ 1" alt='' title="ΤΙΤΛΟΣ ΤΟΥ GALLERY" /></a></div>
      <div class="zoom-desc">
        <h3>OI ΕΙΚΟΝΕΣ ΜΟΥ</h3>    
        <p><a href='ΔΙΕΥΘΥΝΣΗ URL ΜΕΓΑΛΗΣ ΕΙΚΟΝΑΣ 1' class='cloud-zoom-gallery' title='TITLOΣ' rel="useZoom: 'zoom1', smallImage: 'ΔΙΕΥΘΥΝΣΗ URL ΜΕΣΑΙΑΣ ΕΙΚΟΝΑΣ 1' "><img class="zoom-tiny-image" src="ΔΙΕΥΘΥΝΣΗ URL ΜΙΚΡΗΣ ΕΙΚΟΝΑΣ 1" alt = "Thumbnail 1"/></a>
     
          <a href='ΔΙΕΥΘΥΝΣΗ URL ΜΕΓΑΛΗΣ ΕΙΚΟΝΑΣ 2' class='cloud-zoom-gallery' title='ΤΙΤΛΟΣ' rel="useZoom: 'zoom1', smallImage: ' ΔΙΕΥΘΥΝΣΗ URL ΜΕΣΑΙΑΣ ΕΙΚΟΝΑΣ 2' "><img class="zoom-tiny-image" src="ΔΙΕΥΘΥΝΣΗ URL ΜΙΚΡΗΣ ΕΙΚΟΝΑΣ 2" alt = "Thumbnail 2"/></a>                
        <a href='ΔΙΕΥΘΥΝΣΗ URL ΜΕΓΑΛΗΣ ΕΙΚΟΝΑΣ 3' class='cloud-zoom-gallery' title='ΤΙΤΛΟΣ' rel="useZoom: 'zoom1', smallImage: 'ΔΙΕΥΘΥΝΣΗ URL ΜΕΣΑΙΑΣ ΕΙΚΟΝΑΣ 3' "><img class="zoom-tiny-image" src="ΔΙΕΥΘΥΝΣΗ URL ΜΙΚΡΗΣ ΕΙΚΟΝΑΣ 3" alt = "Thumbnail 3"/></a></p>
          </div>
</div>

***Δεν είναι μόνον zoom in, αλλά και gallery εικόνων
***Διαλέξτε τις ανάλογες εικόνες (μικρή-100px)(μεσαία-400px)(μεγάλη-1400px)...η ίδια εικόνα δηλαδή σε 3 διαφορετικές διαστάσεις....
***Η google ξανά έβαλε  σε εφαρμογή το slideshow των εικόνων στις αναρτήσεις, χωρίς να μεγεθύνει πιά την εικόνα "read more" (το διόρθωσε)...έτσι θα σας δημιουργήσει μία μικρή σύγχυση στην αλλαγή του thumbnail ....
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!(αν χρειαστείτε βοήθεια, στείλτε μήνυμα η σχόλιο)

Πηγή : thanks to  Professor Cloud

{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}