GADGETS FOR BLOGS

Facebook Google plus YouTube Pinterest Tumblr Delicius DIIGO Start.me NETVIBES feedburner

ΚΩΔΙΚΑΣ ΓΙΑ ZOOM ΣΤΙΣ ΦΩΤΟΓΡΑΦΙΕΣ Νο 1

PHOTO ZOOM
ΚΩΔΙΚΑΣ ΓΙΑ ZOOM ΣΤΙΣ ΦΩΤΟΓΡΑΦΙΕΣ Νο 1
Με τον παρακάτω κώδικα μπορούμε να κάνουμε zoom πάνω στις φωτογραφίες μας περνώντας το ποντίκι από πάνω τους. Θα χρειαστεί να βάλετε 2 link ένα για την μικρή φωτογραφία και ένα για την μεγάλη. Το link της μικρής φωτογραφίας είναι αυτό που έχω χρωματίσει με μώβ χρώμα και το link της μεγάλης είναι αυτό που έχω χρωματίσει με πορτοκαλί χρώμα. Εάν βάλετε πάνω από μία φωτογραφίες θα χρειαστεί να αλλάζετε το id="zoom_05" σε id="zoom_05a", id="zoom_05b" κ.ο.κ για κάθε πρόσθετη φωτογραφία που βάζετε. Το ίδιο ισχύει και εντός του <script> "#zoom_05", "#zoom_05a", "#zoom_05b" κ.ο.κ




<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script src='http://yourjavascript.com/11698041362/image-zoom.js'></script>
<img id="zoom_05" src="https://lh6.googleusercontent.com/-WC6LtVBeoGw/VPgSnJu1M_I/AAAAAAAAPsw/cFO-vpDMCoU/w304-h190-no/Santorini-18.jpg" data-zoom-image="http://i.imgur.com/O0b0ER3.jpg"/>
<img id="zoom_05a" src="https://lh4.googleusercontent.com/-RnYavSy3lpg/UnebuG327NI/AAAAAAAAJ7s/S2jRhqn6OVA/w304-h190-no/SANTORINI-123.jpg" data-zoom-image="http://i.imgur.com/3U9E1Vj.jpg"/>
<img id="zoom_05b" src="https://lh4.googleusercontent.com/-J2-VLHIOGaY/UfEEJCtBiwI/AAAAAAAAIWk/U2ub8rfJXlA/w304-h190-no/LEYKADA-24.jpg" data-zoom-image="http://i.imgur.com/rcivwQJ.jpg"/>
<script>
$("#zoom_05").elevateZoom({ zoomType      : "inner", cursor: "crosshair" });
$("#zoom_05a").elevateZoom({ zoomType    : "inner", cursor: "crosshair" });
$("#zoom_05b").elevateZoom({ zoomType    : "inner", cursor: "crosshair" });
</script>

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου

► Γράψτε το σχόλιό σας στο λευκό κουτί και αν θέλετε να ειδοποιηθήτε για την απάντηση τσεκάρετε το κουτάκι "Να λαμβάνω ειδοποιήσεις".