我正在使用 jqZoom(一个 jquery 插件)来呈现图片库。
文档说要像这样创建缩略图:
<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>
如果您按照示例使用“常规”名称,则该方法有效。但是我的图像有 guids 作为名称并且插件失败:
Uncaught SyntaxError: Unexpected token ILLEGAL jquery.jqzoom-core.js:240 $.extend.swapimage jquery.jqzoom-core.js:240 (anonymous function) jquery.jqzoom-core.js:191 x.event.dispatch jquery.1.10.2.min.js:5 v.handle
使用 Chrome Dev Tools 失败的函数如下:
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'))))
我得到:
Uncaught SyntaxError: Unexpected token g ef01e51a-d5c5-49ea-bd21-9c4e7f9acbb6:1 {gallery: 'gal1', smallimage: '\xc_small\58f54dc5-b412-4ffd-af51-5bc6863b280d.jpg',largeimage: '\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 中字符串必须用双引号引起来,键是字符串。
关于javascript - 如果图像有 guids 作为名称,jqZoom 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20621586/