html - Fancy Zoom (jQuery Plugin) 图像没有缩放效果

Question

我在使用 jQuery Fancy Zoom 插件时遇到问题。

在我的页面中，我有以下 HTML 片段:

<a href="ProjectImage?ID=@img.ID&Full=true">
    <img class="content-image zoom" alt="@img.Name" src="ProjectImage?ID=@img.ID"/>
</a>

在ProjectImage页面上有:

@{
    if (Request["ID"].IsInt())
    {
        var imgID = Request["ID"].AsInt();
        var full = (!string.IsNullOrEmpty(Request["Full"]) && Request["Full"].IsBool() && Request["Full"].AsBool());

        //Data
        var db = Database.Open("AMSDArquiteturaConnectionString");
        var image = db.QuerySingle("select * from Images where [ID] = @0", imgID);

        if (image.MimeType.StartsWith("image"))
        {
            Response.AddHeader("content-disposition", "inline; filename=" + image.Name);
        }
        else
        {
            Response.AddHeader("content-disposition", "attachment; filename=" + image.Name);
        }

        Response.ContentType = image.MimeType;
        if (full)
        {
            Response.BinaryWrite((byte[])image.ImageFull);   
        }
        else
        {
            Response.BinaryWrite((byte[])image.File);
        }
    }
}

请注意，同样，一旦用户单击图像，数据库中的低图像就会显示大图。 问题是这种方式插件不起作用。

它只是在您的浏览器上以实际大小显示图像并再次加载整个页面。

如果我放一张图片，它会正常工作。

我卡住了。感谢您的帮助。

以下是我使用的插件的一些链接:

http://www.hardleers.org/multimedialab/js/demo.html http://static.railstips.org/orderedlist/demos/fancy-zoom-jquery/ http://www.dfc-e.com/metiers/multimedia/opensource/jquery-fancyzoom/

这是我用来配置插件的javascript

//Set Zoom                 
$.fn.fancyzoom.defaultsOptions.imgDir='../Images/';
$('.project-imagepreview a').fancyzoom({Speed:400, scaleImg: false, closeOnClick: true});
$('img.zoom').fancyzoom();

Answer 1

我猜你的 Javascript 的第 3 行应该是 $('img.fanzyzoom').fancyzoom();，如引用资料中给出的那样。