jQuery Plugin is not loading Dynamically in my Scenario

Question

I am using Cloud Zoom jQuery plugin to Apply image zoom effect. The basic requiremenmt was to have a tag with called cloud-zoom surrounded to it. But I am just taking with source and dynamically wrapping with cloud-zoom class. Then i am trying to load the Cloud-zoom's JS and CSS files. But i am unable to achieve this.. My code is given below..

function zoomer(type,size)
{
var str="";
str+= '<script type="text/javascript" src="/jQueryLatest/jquery-1.6.4.min.js"></script>'
str+= '<script type="text/javascript" src="/5.js"></script>'
str+= '<script type="text/javascript">'
str+= "$(document).ready(function()"
    str+= "{"
            str+= "$('img.make').each(function()"
            str+= "{"
                         str+= "var $this=$(this);"
                         str+= "$this.resize("+size+");"
                         str+= "var zoomStr=zoomString($this,"+type+");"
                         str+= "$this.wrap(''+zoomStr+'');"
                         str+= "disableRightClick();"
                         str+= "});"
                         str+= "loadPlugin(";
                         str+= type;
                         str+= ");"
    str+= "});"
str+= "</script>"
return str;
}

And the loadPlugin Function is

function loadPlugin(choic)
{
    var plug=choic;
    if(plug >= 1 && plug <= 4)
    {
        var Code='<link href="http://www.professorcloud.com/styles/cloud-zoom.css" rel="stylesheet" type="text/css" />'
        Code+= '<script type="text/javascript" src="http://www.professorcloud.com/js/cloud-zoom.1.0.2.js"></script>'
        $('a.cloud-zoom').live('click',function(e)
        {
            e.preventDefault();
        });
        return Code;
    }       
}

and zoomString function is

     function zoomString(ele,choice)
{
    var str="";
    if(choice == null) choice = 1;
    var src = ele.attr('src');
    switch(choice)
    {
        case 1:
            str = '<a href="' + src + '" class="cloud-zoom" rel="adjustX: 10, adjustY:-4" target="_blank"/>';
            break;
        case 2: 
            str = '<a href="' + src + '" class="cloud-zoom"'; 
            str+= 'rel="'+"position:'inside', showTitle: false, adjustX:-4, adjustY:-4"+'" target="_blank"/>';
            break;
        case 3:
            str = '<a href="' + src + '" class="cloud-zoom"'; 
            str+= 'rel="'+"tint: '#E8E8E8',tintOpacity:0.5 ,smoothMove:5,zoomWidth:480, adjustY:-4, adjustX:10"+'" target="_blank"/>';
            break;
        case 4:
            str = '<a href="' + src + '" class="cloud-zoom"';
            str+= 'rel="'+"softFocus: true, position:'anypos', smoothMove:2"+'" target="_blank"/>';
            break;
    }
    return str;
}

But I am able to get the effect with static loading of Script file.. But i want to make this optional so dont want to make this loaded on load.

Please help me on this..

Jamie Treworgy · Accepted Answer · 2011-10-25 14:11:02Z

1

You are loading a script dynamically, but it's code is wrapped in document.ready which is an event that fires only when the page (mostly) finished loading. It's already come and gone when you load the script, so it will never run.

Just remove this wrapper.

str+= "$(document).ready(function()"

... and why not just use $.getScript anyway? Embedding javascript as string literals is tedious and error prone.

answered Oct 25, 2011 at 14:11

Jamie Treworgy

24.4k9 gold badges81 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Exception Over a year ago

"It's already come and gone when you load the script, so it will never run" I liked this sentence.. :-)

Collectives™ on Stack Overflow

jQuery Plugin is not loading Dynamically in my Scenario

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related