Rectangle 27 1

My best guess is that the 'load' event on the iframe has fired before the 'ready' event on the document, which means that the handler is installed too late. You may have to use the old-fashioned onload in the iframe element itself.

Or you could just put the $('iframe#posts').live() snippet in a top-level script rather than in the ready handler.

The old-school <iframe onload="..."> worked great. I tried putting the .live() call in the global scope, but it still didn't seem to do anything.

@dosboy makes sense, if Dan's guess is right. The iframe would still be getting triggered before the document.

jQuery Event when New Page Loads in iFrame - Stack Overflow

jquery events iframe
Rectangle 27 4

There is a event fired when the iframe loads new content, jQuery makes listening to it painless:

$('iframe#yourId').load(function() {
    yourFunction();
});

Yes, that is generally where we put them.

Actually, I've been using webpagetest.org to make many dramatic improvements in page load time.

detecting new content in an iFrame - Stack Overflow

iframe
Rectangle 27 4

There is a event fired when the iframe loads new content, jQuery makes listening to it painless:

$('iframe#yourId').load(function() {
    yourFunction();
});

Yes, that is generally where we put them.

Actually, I've been using webpagetest.org to make many dramatic improvements in page load time.

detecting new content in an iFrame - Stack Overflow

iframe
Rectangle 27 2

I had the same problem just now. I found the problem to be linked to the animation option when opening the dialog, it seems to interfere with the iframe. Just remove the "show" settings from your javascript.

$("#blah").dialog({ title: 'Dialog Title', ... });

jQuery dialog iframe loading once in IE and twice in other browsers? -...

jquery jquery-ui iframe
Rectangle 27 10

This way the Iframe element exists in the Dom with the append. Only when you set the Url will it load, by which point you've attached the load function you wish to tag on the end. So for your code

$('#someButton').live('click', function () {

    $('body').append($('<iframe id="myIframe" width="100%"></iframe>'));
    $('#myIframe').attr('src',"https://www.mywebsite.com");

    $('#myIframe').load(function () {
        alert('iframe loaded');
    });

});

I ran into a similar bug with Firefox. Specifically, if a new iframe element is created and inserted into the DOM but an src attribute is not specified, the load event will still fire. I detailed my use-case and work around incase anyone runs into the same thing: web.onassar.com/blog/2013/03/03/

javascript - jQuery onload - .load() - event not working with a dynami...

javascript jquery html
Rectangle 27 1

I wanted to hide the waiting spinner div when the i frame content is fully loaded on IE, i tried literally every solution mentioned in Stackoverflow.Com, but with nothing worked as i wanted.

Then i had an idea, that when the i frame content is fully loaded, the $(Window ) load event might be fired. And that exactly what happened. So, i wrote this small script, and worked like magic:

$(window).load(function () {
         //alert("Done window ready ");
         var lblWait = document.getElementById("lblWait");
         if (lblWait != null ) {
             lblWait.style.visibility = "false";
             document.getElementById("divWait").style.display = "none";
         }
     });

javascript - Jquery ('#iframeid').load() is executed before Iframe CON...

javascript jquery iframe internet-explorer-8 jquery-load
Rectangle 27 1

I wanted to hide the waiting spinner div when the i frame content is fully loaded on IE, i tried literally every solution mentioned in Stackoverflow.Com, but with nothing worked as i wanted.

Then i had an idea, that when the i frame content is fully loaded, the $(Window ) load event might be fired. And that exactly what happened. So, i wrote this small script, and worked like magic:

$(window).load(function () {
         //alert("Done window ready ");
         var lblWait = document.getElementById("lblWait");
         if (lblWait != null ) {
             lblWait.style.visibility = "false";
             document.getElementById("divWait").style.display = "none";
         }
     });

javascript - Jquery ('#iframeid').load() is executed before Iframe CON...

javascript jquery iframe internet-explorer-8 jquery-load
Rectangle 27 1

I wanted to hide the waiting spinner div when the i frame content is fully loaded on IE, i tried literally every solution mentioned in Stackoverflow.Com, but with nothing worked as i wanted.

Then i had an idea, that when the i frame content is fully loaded, the $(Window ) load event might be fired. And that exactly what happened. So, i wrote this small script, and worked like magic:

$(window).load(function () {
         //alert("Done window ready ");
         var lblWait = document.getElementById("lblWait");
         if (lblWait != null ) {
             lblWait.style.visibility = "false";
             document.getElementById("divWait").style.display = "none";
         }
     });

javascript - Jquery ('#iframeid').load() is executed before Iframe CON...

javascript jquery iframe internet-explorer-8 jquery-load
Rectangle 27 1

The reason your code example does not work is because you are binding to an element that does not exist, then placing that element into the DOM when it has no event handler attached to the load event. Try this:

$('#someButton').live('click', function () {
    var $iframe = $('<iframe id="myIframe" src="" width="100%"></iframe>').load(function () {
        alert('iframe loaded');
    }).attr('src', 'https://www.mywebsite.com');
    $('body').append($iframe);
});
.load()
.live('load')
$('#myIframe').live('load', function () {
    alert('iframe loaded');
});

$('#someButton').live('click', function () {
    $('body').append('<iframe id="myIframe" src="https://www.mywebsite.com" width="100%"></iframe>');//notice I removed the $() around the append code as it is unnecessary
});

javascript - jQuery onload - .load() - event not working with a dynami...

javascript jquery html
Rectangle 27 1

$("<iframe id='myId'></iframe>").appendTo("body")
    .attr('src', url)
    .load(function() 
     {
         callback(this);
     });

Just added some chaining, created the element where the selector usually goes (this is possible), and appended it to the body.

javascript - jQuery onload - .load() - event not working with a dynami...

javascript jquery html
Rectangle 27 0

If the document you are loading in the iframe is something you control, try putting the load handler into that document. If you need the parent document to do something after the iframe loads you can call a function in the parent from the child:

// in parent doc
function myIframeLoaded() {
   // do something
}

// in iframe doc
$(document).load(function() {   // or .ready()
   parent.myIframeLoaded();
}

javascript - jQuery onload - .load() - event not working with a dynami...

javascript jquery html
Rectangle 27 0

If I had to guess, it's because you're loading jQuery UI insecurely. Browsers will block the loading of non-HTTPS elements if the main page is loaded with HTTPS.

I would recommend you load jQuery UI from a location that offers HTTPS like Google (similar to how your loading jQuery itself), or host it yourself on your server.

jQuery inside Facebook iframe doesn't load in IE - Stack Overflow

jquery facebook internet-explorer iframe
Rectangle 27 0

There are two instances of jQuery being loaded. One in the parent and one inside the iframe. Things get messed up somewhere between generating the event on parent's instance and handling on child's.

If you dispatch the event without using jQuery's event engine, it works:

$("#floating_play_button").click(function(){
    //$('#slider').contents().find("#link1").click(); // instead:
    var newEvent = document.createEvent('Event');
    newEvent.initEvent('click',true,true);
    $('#slider').contents().find("#link1").first()[0].dispatchEvent(newEvent);
});

But jQuery handles a whole lot of stuff, like cross browser compatibility, that we don't wanna miss. So, just make sure your event is being created and handled by the same jQuery instance, and it should work:

$("#floating_play_button").click(function(){
    //$('#slider').contents().find("#link1").click(); // instead:
    window.frames['slider'].$('#link1').click();
});

I couldn't figure out what exactly breaks, but I noticed that the browsers where it failed, didn't implement the Event constructor. Events were created using document.createEvent instead. So my guess would be that some reference gets lost along the way by using the wrong document object. If someone can explain in deep, please do...

JQuery click event not working for iframe, in mobile browser - Stack O...

jquery mobile mobile-browser
Rectangle 27 0

Add the prefix "iframe" in front of your id:

$('iframe#myFrame').load(function() {
  ...
});
$('#myFrame').ready(function()  {
    alert("Loaded");
});

Thanks, but the 'ready' event is fired before the content of the iFrame is loaded...

adding prefix iframe not working (IE 8)

it doesn't work in IE 9

There's no logic to the suggestion that specifying it as an iframe in the selector will do anything for it. What's the assumption that it'll be even more selected? As to how this equates to the ready event The mind boggles.

jquery - Load event for iFrame not fired in IE - Stack Overflow

jquery internet-explorer iframe load
Rectangle 27 0

I tried to replicate the scenario in my local machine and I observed that presence of IFrame element effects jQuery code execution.On page load I tried to throw an alert :-

$(document).ready(function() {
            alert("hello");            
        });

But even this simple piece of code is not wokring in IE. And once I commented IFrame portion , the above code executed normally.I tried other jQuery operations on elements like div etc and they all worked smoothly.

Is it just my observation or others too have experienced this before.

javascript - Set scroll to an iframe dynamically in IE - Stack Overflo...

javascript iframe
Rectangle 27 0

In your code you are setting the source of the iframe when you added markup to RedmapDialog and after that load event handler is attached. Before it reaches this code the iframe must have already been loaded. Try to set the source of the iframe after you have set the iframe load event handler as below

$(".RedmapButton").bind('click', function(event) {
    baseHistory = history.length;
    var data='<a href = "javascript:history.go(-1)">Back to previous page</a>'
    data = data + '<iframe src="javascript:void(0);" width="100%" height="100%" id="RMFrame"></iframe>'
    $("#RedmapDialog").html(data);
    $("#RedmapDialog").dialog("option", "title", 'Document: ');
    $("#RedmapDialog").dialog("open");
    $('#RMFrame').load(function() {
      alert("history.length=" + history.length);
    }).attr("src", "http://www.google.com/");
  });

Thanks for this, yes I tried your technique above, and yes the load function does output my alert. However once again, after selecting my "Back to previous page" link, the history.length has incremented the counter. Here is a jsfiddle link: jsfiddle.net/fEgv9/1 that illustrates the problem.

I see the history.length is 1 in the fiddle.

Is the history.length 1 after clicking my Back to Previous page link? I guess what I'm getting at is that I would like to see the history count increment as I navigate through pages, and decrement as the back link is used.

I am seeing it as 1 after click on the link. I think you should open a new question for that.

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

JQuery IFrame Load event firing too soon - Stack Overflow

jquery events iframe browser-history
Rectangle 27 0

This way the Iframe element exists in the Dom with the append. Only when you set the Url will it load, by which point you've attached the load function you wish to tag on the end. So for your code

$('#someButton').live('click', function () {

    $('body').append($('<iframe id="myIframe" width="100%"></iframe>'));
    $('#myIframe').attr('src',"https://www.mywebsite.com");

    $('#myIframe').load(function () {
        alert('iframe loaded');
    });

});

I ran into a similar bug with Firefox. Specifically, if a new iframe element is created and inserted into the DOM but an src attribute is not specified, the load event will still fire. I detailed my use-case and work around incase anyone runs into the same thing: web.onassar.com/blog/2013/03/03/

javascript - jQuery onload - .load() - event not working with a dynami...

javascript jquery html
Rectangle 27 0

You can try creating the iframe with jquery, then attaching the ready (not load) event to the created frame, assigning the src attribute and finally appending the element to your div. The code would go something like this:

$("<iframe />").ready(function(){ alert(this.location); }) //Use your function here
  .attr("src","www.slashdot.com")
  .appendTo(document.body); //Append to your div

The thing about ready and load on iframes is that load is triggered when the DOMFrame element is created and attached to the DOM tree (regardless of it's internal state), while ready does wait for the internal state of the iframe.

Hrm, I just tried your solution, and the issue I have is that the ready function only gets called once, I need my function to be called every time the user clicks a link contained by the iframe source so that I can track the history count. Have I done something wrong here?

var dfr = $.Deferred();
$("<iframe />").ready(function(){ dfr.resolve(); }).[...]
dfr.done(function(){ /* your code here */ });

JQuery IFrame Load event firing too soon - Stack Overflow

jquery events iframe browser-history
Rectangle 27 0

//////////////////////////////////////////////////////////////////////////////////
// Cloud Zoom V1.0.2
// (c) 2010 by R Cecco. <http://www.professorcloud.com>
// MIT License
//
// Please retain this copyright header in all versions of the software
//////////////////////////////////////////////////////////////////////////////////
(function ($) {

    $(document).ready(function () {
        $('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();
    });

    function format(str) {
        for (var i = 1; i < arguments.length; i++) {
            str = str.replace('%' + (i - 1), arguments[i]);
        }
        return str;
    }

    function CloudZoom(jWin, opts) {
        var sImg = $('img', jWin);
        var img1;
        var img2;
        var zoomDiv = null;
        var $mouseTrap = null;
        var lens = null;
        var $tint = null;
        var softFocus = null;
        var $ie6Fix = null;
        var zoomImage;
        var controlTimer = 0;      
        var cw, ch;
        var destU = 0;
        var destV = 0;
        var currV = 0;
        var currU = 0;      
        var filesLoaded = 0;
        var mx,
            my; 
        var ctx = this, zw;
        // Display an image loading message. This message gets deleted when the images have loaded and the zoom init function is called.
        // We add a small delay before the message is displayed to avoid the message flicking on then off again virtually immediately if the
        // images load really fast, e.g. from the cache. 
        //var   ctx = this;
        setTimeout(function () {
            //                       <img src="/images/loading.gif"/>
            if ($mouseTrap === null) {
                var w = jWin.width();
                jWin.parent().append(format('<div style="width:%0px;position:absolute;top:75%;left:%1px;text-align:center" class="cloud-zoom-loading" >Loading...</div>', w / 3, (w / 2) - (w / 6))).find(':last').css('opacity', 0.5);
            }
        }, 200);


        var ie6FixRemove = function () {

            if ($ie6Fix !== null) {
                $ie6Fix.remove();
                $ie6Fix = null;
            }
        };

        // Removes cursor, tint layer, blur layer etc.
        this.removeBits = function () {
            //$mouseTrap.unbind();
            if (lens) {
                lens.remove();
                lens = null;             
            }
            if ($tint) {
                $tint.remove();
                $tint = null;
            }
            if (softFocus) {
                softFocus.remove();
                softFocus = null;
            }
            ie6FixRemove();

            $('.cloud-zoom-loading', jWin.parent()).remove();
        };


        this.destroy = function () {
            jWin.data('zoom', null);

            if ($mouseTrap) {
                $mouseTrap.unbind();
                $mouseTrap.remove();
                $mouseTrap = null;
            }
            if (zoomDiv) {
                zoomDiv.remove();
                zoomDiv = null;
            }
            //ie6FixRemove();
            this.removeBits();
            // DON'T FORGET TO REMOVE JQUERY 'DATA' VALUES
        };


        // This is called when the zoom window has faded out so it can be removed.
        this.fadedOut = function () {

            if (zoomDiv) {
                zoomDiv.remove();
                zoomDiv = null;
            }
             this.removeBits();
            //ie6FixRemove();
        };

        this.controlLoop = function () {
            if (lens) {
                var x = (mx - sImg.offset().left - (cw * 0.5)) >> 0;
                var y = (my - sImg.offset().top - (ch * 0.5)) >> 0;

                if (x < 0) {
                    x = 0;
                }
                else if (x > (sImg.outerWidth() - cw)) {
                    x = (sImg.outerWidth() - cw);
                }
                if (y < 0) {
                    y = 0;
                }
                else if (y > (sImg.outerHeight() - ch)) {
                    y = (sImg.outerHeight() - ch);
                }

                lens.css({
                    left: x,
                    top: y
                });
                lens.css('background-position', (-x) + 'px ' + (-y) + 'px');

                destU = (((x) / sImg.outerWidth()) * zoomImage.width) >> 0;
                destV = (((y) / sImg.outerHeight()) * zoomImage.height) >> 0;
                currU += (destU - currU) / opts.smoothMove;
                currV += (destV - currV) / opts.smoothMove;

                zoomDiv.css('background-position', (-(currU >> 0) + 'px ') + (-(currV >> 0) + 'px'));              
            }
            controlTimer = setTimeout(function () {
                ctx.controlLoop();
            }, 30);
        };

        this.init2 = function (img, id) {

            filesLoaded++;
            //console.log(img.src + ' ' + id + ' ' + img.width);    
            if (id === 1) {
                zoomImage = img;
            }
            //this.images[id] = img;
            if (filesLoaded === 2) {
                this.init();
            }
        };

        /* Init function start.  */
        this.init = function () {
            // Remove loading message (if present);
            $('.cloud-zoom-loading', jWin.parent()).remove();


/* Add a box (mouseTrap) over the small image to trap mouse events.
        It has priority over zoom window to avoid issues with inner zoom.
        We need the dummy background image as IE does not trap mouse events on
        transparent parts of a div.
        */
            $mouseTrap = jWin.parent().append(format("<div class='mousetrap' style='background-image:url(\".\");z-index:999;position:absolute;width:%0px;height:%1px;left:%2px;top:%3px;\'></div>", sImg.outerWidth(), sImg.outerHeight(), 0, 0)).find(':last');

            //////////////////////////////////////////////////////////////////////          
            /* Do as little as possible in mousemove event to prevent slowdown. */
            $mouseTrap.bind('mousemove', this, function (event) {
                // Just update the mouse position
                mx = event.pageX;
                my = event.pageY;
            });
            //////////////////////////////////////////////////////////////////////                  
            $mouseTrap.bind('mouseleave', this, function (event) {
                $('#zoomer').fadeIn(50);
                clearTimeout(controlTimer);
                //event.data.removeBits();                
                if(lens) { lens.fadeOut(299); }
                if($tint) { $tint.fadeOut(299); }
                if(softFocus) { softFocus.fadeOut(299); }
                zoomDiv.fadeOut(300, function () {
                    ctx.fadedOut();
                });                                                             
                return false;
            });
            //////////////////////////////////////////////////////////////////////          
            $mouseTrap.bind('mouseenter', this, function (event) {

                $('#zoomer').fadeOut(50);

                mx = event.pageX;
                my = event.pageY;
                zw = event.data;
                if (zoomDiv) {
                    zoomDiv.stop(true, false);
                    zoomDiv.remove();
                }

                var xPos = opts.adjustX,
                    yPos = opts.adjustY;

                var siw = sImg.outerWidth();
                var sih = sImg.outerHeight();

                var w = opts.zoomWidth;
                var h = opts.zoomHeight;
                if (opts.zoomWidth == 'auto') {
                    w = siw;
                }
                if (opts.zoomHeight == 'auto') {
                    h = sih;
                }
                //$('#info').text( xPos + ' ' + yPos + ' ' + siw + ' ' + sih );
                var appendTo = jWin.parent(); // attach to the wrapper          
                switch (opts.position) {
                case 'top':
                    yPos -= h; // + opts.adjustY;
                    break;
                case 'right':
                    xPos += siw; // + opts.adjustX;                 
                    break;
                case 'bottom':
                    yPos += sih; // + opts.adjustY;
                    break;
                case 'left':
                    xPos -= w; // + opts.adjustX;                   
                    break;
                case 'inside':
                    w = siw;
                    h = sih;
                    break;
                    // All other values, try and find an id in the dom to attach to.
                default:
                    appendTo = $('#' + opts.position);
                    // If dom element doesn't exit, just use 'right' position as default.
                    if (!appendTo.length) {
                        appendTo = jWin;
                        xPos += siw; //+ opts.adjustX;
                        yPos += sih; // + opts.adjustY; 
                    } else {
                        w = appendTo.innerWidth();
                        h = appendTo.innerHeight();
                    }
                }

                zoomDiv = appendTo.append(format('<div id="cloud-zoom-big" class="cloud-zoom-big" style="display:none;position:absolute;left:%0px;top:%1px;width:%2px;height:%3px;background-image:url(\'%4\');z-index:99;"></div>', xPos, yPos, w, h, zoomImage.src)).find(':last');

                // Add the title from title tag.
                if (sImg.attr('title') && opts.showTitle) {
                    zoomDiv.append(format('<div class="cloud-zoom-title">%0</div>', sImg.attr('title'))).find(':last').css('opacity', opts.titleOpacity);
                }

                // Fix ie6 select elements wrong z-index bug. Placing an iFrame over the select element solves the issue...     
                if ($.browser.msie && $.browser.version < 7) {
                    $ie6Fix = $('<iframe frameborder="0" src="#"></iframe>').css({
                        position: "absolute",
                        left: xPos,
                        top: yPos,
                        zIndex: 99,
                        width: w,
                        height: h
                    }).insertBefore(zoomDiv);
                }

                zoomDiv.fadeIn(500);

                if (lens) {
                    lens.remove();
                    lens = null;
                } /* Work out size of cursor */
                cw = (sImg.outerWidth() / zoomImage.width) * zoomDiv.width();
                ch = (sImg.outerHeight() / zoomImage.height) * zoomDiv.height();

                // Attach mouse, initially invisible to prevent first frame glitch
                lens = jWin.append(format("<div class = 'cloud-zoom-lens' style='display:none;z-index:98;position:absolute;width:%0px;height:%1px;'></div>", cw, ch)).find(':last');

                $mouseTrap.css('cursor', lens.css('cursor'));

                var noTrans = false;

                // Init tint layer if needed. (Not relevant if using inside mode)           
                if (opts.tint) {
                    lens.css('background', 'url("' + sImg.attr('src') + '")');
                    $tint = jWin.append(format('<div style="display:none;position:absolute; left:0px; top:0px; width:%0px; height:%1px; background-color:%2;" />', sImg.outerWidth(), sImg.outerHeight(), opts.tint)).find(':last');
                    $tint.css('opacity', opts.tintOpacity);                    
                    noTrans = true;
                    $tint.fadeIn(500);

                }
                if (opts.softFocus) {
                    lens.css('background', 'url("' + sImg.attr('src') + '")');
                    softFocus = jWin.append(format('<div style="position:absolute;display:none;top:2px; left:2px; width:%0px; height:%1px;" />', sImg.outerWidth() - 2, sImg.outerHeight() - 2, opts.tint)).find(':last');
                    softFocus.css('background', 'url("' + sImg.attr('src') + '")');
                    softFocus.css('opacity', 0.5);
                    noTrans = true;
                    softFocus.fadeIn(500);
                }

                if (!noTrans) {
                    lens.css('opacity', opts.lensOpacity);                                      
                }
                if ( opts.position !== 'inside' ) { lens.fadeIn(500); }

                // Start processing. 
                zw.controlLoop();

                return; // Don't return false here otherwise opera will not detect change of the mouse pointer type.
            });
        };

        img1 = new Image();
        $(img1).load(function () {
            ctx.init2(this, 0);
        });
        img1.src = sImg.attr('src');

        img2 = new Image();
        $(img2).load(function () {
            ctx.init2(this, 1);
        });
        img2.src = jWin.attr('href');
    }

    $.fn.CloudZoom = function (options) {
        // IE6 background image flicker fix
        try {
            document.execCommand("BackgroundImageCache", false, true);
        } catch (e) {}
        this.each(function () {
            var relOpts, opts;
            // Hmm...eval...slap on wrist.
            eval('var   a = {' + $(this).attr('rel') + '}');
            relOpts = a;
            if ($(this).is('.cloud-zoom')) {
                $(this).css({
                    'position': 'relative',
                    'display': 'block'
                });
                $('img', $(this)).css({
                    'display': 'block'
                });
                // Wrap an outer div around the link so we can attach things without them becoming part of the link.
                // But not if wrap already exists.
                if ($(this).parent().attr('id') != 'wrap') {
                    $(this).wrap('<div id="wrap" style="top:0px;z-index:1000;position:relative;"></div>');
                }
                opts = $.extend({}, $.fn.CloudZoom.defaults, options);
                opts = $.extend({}, opts, relOpts);
                $(this).data('zoom', new CloudZoom($(this), opts));

            } else if ($(this).is('.cloud-zoom-gallery')) {
                opts = $.extend({}, relOpts, options);
                $(this).data('relOpts', opts);
                $(this).bind('click', $(this), function (event) {
                    var data = event.data.data('relOpts');
                    // Destroy the previous zoom
                    $('#' + data.useZoom).data('zoom').destroy();
                    // Change the biglink to point to the new big image.
                    $('#' + data.useZoom).attr('href', event.data.attr('href'));
                    // Change the ZOOM link to point to the new big image.
                    $('#zoomer').attr('href', event.data.attr('href'));
                    // Change the small image to point to the new small image.
                    $('#' + data.useZoom + ' img').attr('src', event.data.data('relOpts').smallImage);
                    // Init a new zoom with the new images.             
                    $('#' + event.data.data('relOpts').useZoom).CloudZoom();
                    return false;
                });
            }
        });
        return this;
    };

    $.fn.CloudZoom.defaults = {
        zoomWidth: 'auto',
        zoomHeight: 'auto',
        position: 'right',
        tint: false,
        tintOpacity: 0.5,
        lensOpacity: 0.5,
        softFocus: false,
        smoothMove: 3,
        showTitle: false,
        titleOpacity: 0.5,
        adjustX: 0,
        adjustY: 0
    };

})(jQuery);

add in the product.tpl file

<script type="text/javascript" src="catalog/view/theme/mytheme/js/product-zoom.js"></script>
<div class="product-info">
    <?php if ($thumb || $images) { ?>
    <div class="left">
      <?php if ($thumb) { ?>
<div class="image"><a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" class="cloud-zoom colorbox" id='zoom1' rel="adjustX: 0, adjustY:0, tint:'#000000',tintOpacity:0.2, zoomWidth:360, position:'inside', showTitle:false"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" id="image" /><span id="zoom-image"><i class="zoom_bttn"></i> Zoom</span></a></div>
      <?php } ?>
      <?php if ($images) { ?>
 <div class="image-additional">
 <a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '<?php echo $thumb; ?>' "><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a>
        <?php foreach ($images as $image) { ?>
        <a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '<?php echo $image['thumb']; ?>' "><img src="<?php echo $image['thumb']; ?>" width="62" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a>
        <?php } ?>
      </div>
      <?php } ?>
    </div>
    <?php } ?>

javascript - How to add a zoom effect in opencart product page? - Stac...

javascript jquery zoom opencart
Rectangle 27 0

You can not use load() like that with an iframe. If you want to know when the content is done loading in an iframe, use the onload event and set the src attribute.

iframe.on("load", function() {
    //code here
});

iframe.attr("src", options.src);

Now to use the content in the iframe, you need to use contents()

iframe.contents().find("body")...

javascript - jQuery load() callback failure in IE - Stack Overflow

javascript jquery internet-explorer iframe load