multiple images

[muszek]

It would be nice if we could have multiple images, like @ http://www.magictoolbox.com/magiczoom/integration/#multiple

[influxweb]

@muszek I have been working on something to use multiple images as well. My solution is to put the images into an array and then pull the index of the image and pass its source to the function when the thumbnail/image is clicked.

[dahliacreative]

I've come up with a work around for multiple images, basically cycle through each a tag, grab it's href for the large image then initialize the plugin like so:

$('a.zoom').each(function() {
     var url = $(this).attr('href');
     $(this).zoom({
          url: url
     });
});

[danjrichardson]

Another way which works well is to wrap the main return in a method on an object.

    // vars moved up to here
    var methods = {
        init: function(options){
            return this.each(function () {
                // rest of the code, drop the var though, but keep the variable assigning
                methods.url(settings.url);
            });
        },
        url: function(image_url){
            // img.onload function
            img.src = image_url
        }
    };

You can then change the image url externally from the plugin

    $('#my_zoom').zoom('url', 'new/url/to/image.ext')

Would need a bit more changing of the img.onload function as it currently will append the new image each time, but the idea behind it all works nicely

[stewartknapman]

Does this help anyone? I've created a pull request ( #55 ) that stops the appending of a new image if the plugin is called again. This way you can just pass the new url to the zoom plugin when you want to switch the image.

$(document).on('click', '.switch-image', function(){
  var newSrc = $(this).find('img')[0].src, mainImg = $('#mainImage img')[0];
  if(mainImg.src !== newSrc){
    mainImg.src = newSrc;
    $('#mainImage').zoom({ url: newSrc });
  }
});