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..

Answer 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.