jQuery Plugin is not loading Dynamically in my Scenario
<p>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..</p>

<pre><code>function zoomer(type,size)
{
var str="";
str+= '&lt;script type="text/javascript" src="/jQueryLatest/jquery-1.6.4.min.js"&gt;&lt;/script&gt;'
str+= '&lt;script type="text/javascript" src="/5.js"&gt;&lt;/script&gt;'
str+= '&lt;script type="text/javascript"&gt;'
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+= "&lt;/script&gt;"
return str;
}
</code></pre>

<p>And the loadPlugin Function is </p>

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

<p>and zoomString function is  </p>

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

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

<p>Please help me on this..</p>
