• SANTORINI

    SANTORINI

  • SANTORINI

    SANTORINI

  • ZAKYNTHOS

    ZAKYNTHOS

  • LEYKADA

    LEYKADA

  • KEFALLONIA

    KEFALLONIA

  • KERKYRA

    KERKYRA

  • RODOS

    RODOS

GADGETS FOR BLOGS

YouTube GITHUB glitch.com JSBIN Start.me JSFIDDLE CODEPLY PASTEBIN.COM Repl.it CODEPEN CODEPEN

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

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



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script src='https://github-codes.github.io/mycodes/javascripts/image-zoom.js'></script>
<img id="zoom_mw" src="http://i.imgur.com/fiVofHIm.jpgwidth="232" height="145data-zoom-image="http://i.imgur.com/fiVofHI.jpg"/>
<img id="zoom_mwa" src="http://i.imgur.com/rcivwQJm.jpgwidth="232" height="145data-zoom-image="http://i.imgur.com/rcivwQJ.jpg"/>
<img id="zoom_mwb" src="http://i.imgur.com/0nyxX2Lm.jpgwidth="232" height="145data-zoom-image="http://i.imgur.com/0nyxX2L.jpg"/>
<img id="zoom_mwc" src="http://i.imgur.com/7X4wjWSm.jpgwidth="232" height="145data-zoom-image="http://i.imgur.com/7X4wjWS.jpg"/>
<script>
$("#zoom_mw").elevateZoom({scrollZoom : true});
$("#zoom_mwa").elevateZoom({scrollZoom : true});
$("#zoom_mwb").elevateZoom({scrollZoom : true});
$("#zoom_mwc").elevateZoom({scrollZoom : true});
</script>

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

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

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

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.