How to Make Featured Image Zoomer work for Ajax Loaded Images

**ssh** · 03-12-2015, 02:08 AM

1) Script Title: Featured Image Zoomer (now w/Multi-Zoom) v2.1

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...uredzoomer.htm

3) Describe problem:

Hello, I am trying to make this script (snippet below) work on AJAX loaded content and it does not work. I understand it doesn't because I am binding the event on document ready. Yet the newly updated images (via AJAX) are not on the page when it's loaded. I am trying to use a delegate in order for this to work. Like on. but I could not get it go. Could someone show me how you can apply "delegate" or use "on" so to work on future content? Thanks a bunch!

Code:

jQuery(document).ready(function($){ 
 $(' #multizoom1').addimagezoom({ 
   zoomrange: [3, 10], 
   magnifiersize: [300,300], 
 // additional options 
 }) 
})

I was trying to tie it to the button that triggers AJAX load onclick. did not work. #btn-1 sits on original portion of page

Code:

jQuery("#btn_1").on("click", function () {
  $('#multizoom1').addimagezoom({ 
    zoomrange: [3, 10], 
    magnifiersize: [300,300], 
  // additional options 
 }) 
 })

I also tried below. none works

Code:

jQuery(document).on("click", "#btn_1", function () {
  $('#multizoom1').addimagezoom({ 
    zoomrange: [3, 10], 
    magnifiersize: [300,300], 
  // additional options 
 }) 
 })