Εκπληκτικό zoom στις εικόνες σας

Ένα υπέροχο εφέ, για να βάλετε στις εικόνες σας, όπου όταν κινείτε το ποντίκι από πάνω τους, τότε γίνετε zoom in μέσα στην εικόνα.

Δοκιμάστε το στην εικόνα της Αντζελίνα Τζολί ή κάντε κλικ στο κουμπί παρακάτω για να δείτε περισσότερα παραδείγματα.

Δείτε demo






Για να εφαρμόσουμε το εφέ στο blog μας, Από το αριστερό μενού του Blogger επιλέγουμε το [Πρότυπο] και [επεξεργασία HTML]

Με Ctrl + F αναζητούμε το </head> και ακριβώς από πάνω του επικολλάμε τον παρακάτω κώδικα:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
<script src='http://suyb.googlecode.com/files/cloud-zoom.1.0.2.js' type='text/javascript'/>

[Αποθήκευση] και τέλος.

Τώρα για να εφαρμόσετε το zoom σε μία φωτογραφία, θα προσθέτετε μέσα της αυτό:
class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2"

δηλαδή ο κώδικας της φωτογραφίας θα γίνει έτσι :
<a class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2" href="ΔΙΕΥΘΥΝΣΗ (URL) ΕΙΚΟΝΑΣ"><img src="ΔΙΕΥΘΥΝΣΗ (URL) ΕΙΚΟΝΑΣ"/></a>

Στην περίπτωση που δε θέλουμε να εφαρμόσουμε το εφέ σε ολόκληρο το blog μας αλλά μόνο σε κάποια άρθρα μας, τότε δε γράφουμε τον κώδικα πριν από το </head> αλλά στο τέλος κάθε άρθρου που θέλουμε το εφέ, θα γράφουμε το παρακάτω:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'></script> 
<script src='http://suyb.googlecode.com/files/cloud-zoom.1.0.2.js' type='text/javascript'></script> 




0 σχόλια:

Δικά μου

Larissakid

Χρησιμοποιώ