Question

I found this cool script that makes a zoom on an image (which I want to use on my blog) But I want to use more pictures than just the one on the script. So I actually want to replace values in this script on mouseUp. So buttons for pic1, pic2, pic3 etc has to replace the “largeimage” and the in the body.

hope someone can help me.

jQuery(document).ready(function($){

    $('#image2').addimagezoom({
        zoomrange: [2, 2],
        magnifiersize: [460,430],
        magnifierpos: 'right',
        cursorshade: false,
        cursorshadecolor: 'pink',
        cursorshadeopacity: 0.3 ,
        cursorshadeborder: '1px solid white',
        largeimage: 'http://www.rat-bikes.com/ratbikes/vanmoof-rotterdam.jpg' //<-- No comma after last option!
    })

})

Answer 1

Do this way… Have all the images with a class and an alt value with the large image.

<img src="thumb1.png" class="zoom" alt="full1.png" />
<img src="thumb2.png" class="zoom" alt="full2.png" />

Now in the script, attach the event handler for all the .zoom and give the large image’s URL with the help of attr value of alt.

jQuery(document).ready(function($){
    $('.zoom').addimagezoom({
        zoomrange: [2, 2],
        magnifiersize: [460,430],
        magnifierpos: 'right',
        cursorshade: false,
        cursorshadecolor: 'pink',
        cursorshadeopacity: 0.3 ,
        cursorshadeborder: '1px solid white',
        largeimage: $(this).attr("alt")
    });
});