javascript - 如果图像具有名称指导，则jqZoom无法正常工作

我正在使用jqZoom（一个jQuery插件）来渲染图像库。

jqZoom Project Page

文档说要创建这样的缩略图：

<a class="zoomThumbActive" href="javascript:void(0);" rel="{gallery: 'gal1', smallimage: './imgProd/SMALLIMAGE1.jpg',largeimage: './imgProd/LARGEIMAGE1.jpg'}">
    <img src="imgProd/thumbs/THUMBIMG1.jpg">
</a>

如果您按照示例使用“常规”名称，则此方法有效。但是我的图像具有名称的含义，并且插件失败：


  Uncaught SyntaxError：意外的令牌非法
  jquery.jqzoom-core.js：240 $ .extend.swapimage jquery.jqzoom-core.js：240
  （匿名函数）jquery.jqzoom-core.js：191 x.event.dispatch
  jquery.1.10.2.min.js：5 v.handle


使用Chrome开发工具失败的功能如下：

    swapimage: function (link) {
                    el.largeimageloading = false;
                    el.largeimageloaded = false;
                    var options = new Object();

                    //alert(eval("(" + $.trim($(link).attr('rel')) + ")"));

                    console.log($.trim($(link).attr('rel')));
 options = $.extend({}, eval("(" + $.trim($(link).attr('rel')) + ")"));
                    alert($.trim($(link).attr('rel')));

                    if (options.smallimage && options.largeimage) {
                        var smallimage = options.smallimage;
                        var largeimage = options.largeimage;
                        $(link).addClass('zoomThumbActive');
                        $(el).attr('href', largeimage);
                        img.attr('src', smallimage);
                        lens.hide();
                        stage.hide();
                        obj.load();
                    } else {
                        alert('ERROR :: Missing parameter for largeimage or smallimage.');
                        throw 'ERROR :: Missing parameter for largeimage or smallimage.';
                    }
                    return false;
                }
            });

它在这条线上尤其失败：

 options = $.extend({}, eval("(" + $.trim($(link).attr('rel')) + ")"));

环顾网络，似乎这些错误是eval创建无效javascript对象的结果，因此显然我们必须将输出重新格式化为Json字符串，以便将其正确解释为参数

但是我似乎无法“强制”将其解释为正确的jSON。如果我将上面的行替换为

options = $.extend({}, JSON.parse($.trim($(link).attr('rel'))))

我得到：


  未捕获的SyntaxError：意外的令牌g
  ef01e51a-d5c5-49ea-bd21-9c4e7f9acbb6：1 {画廊：“ gal1”，smallimage：
  '\ xc_small \ 58f54dc5-b412-4ffd-af51-5bc6863b280d.jpg'，大图：
  '\ xc_full \ 58f54dc5-b412-4ffd-af51-5bc6863b280d.jpg'}


那么我该怎么做呢？

最佳答案

您的反斜杠将被解释为转义符。使用正斜杠。例如，rel属性可以显示为：

rel='{"gallery": "gal1", "smallimage": "/xc_small/58f54dc5-b412-4ffd-af51-5bc6863b280d.jpg", "largeimage": "/xc_full/58f54dc5-b412-4ffd-af51-5bc6863b280d.jpg"}'

请注意，我已经将JSON中的键和字符串值双引号，并将rel属性使用单引号。字符串必须在JSON中双引号，并且键是字符串。