Question

我正在使用Cloud Zoom jQuery插件来应用图像缩放效果。基本要求是在其周围放置一个名为cloud-zoom的标签。但我只是采用源代码并使用云缩放类动态包装。然后我试图加载Cloud-zoom的JS和CSS文件。但我无法实现这一目标.. 我的代码在下面给出..

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;
}

loadPlugin函数是

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;
    }       
}

和zoomString函数是

     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;
}

但是我能够通过脚本文件的静态加载获得效果..但是我想让它成为可选的，所以不要在加载时加载它。

请帮帮我..

Answer 1

您正在动态加载脚本，但它的代码包含在document.ready中，这是仅在页面（大部分）完成加载时触发的事件。加载脚本时它已经过时了，所以它永远不会运行。

只需删除此包装。

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

...为什么不使用$ .getScript呢？将javascript嵌入字符串文字是繁琐且容易出错的。

jQuery插件未在我的场景中动态加载

1 个答案: