如果圖像具有名稱指導，則jqZoom無法正常工作

Question

我正在使用jqZoom（一個jQuery插件）來渲染圖像庫。

jqZoom項目頁面

文檔說要創建這樣的縮略圖：

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

如果您按照示例使用“常規”名稱，則此方法有效。 但是我的圖像具有名稱的含義，並且插件失敗：

未捕獲到的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'))))

我得到：

未捕獲的語法錯誤：意外的令牌g ef01e51a-d5c5-49ea-bd21-9c4e7f9acbb6：1 {畫廊：'gal1'，smallimage：'\\ xc_small \\ 58f54dc5-b412-4ffd-af51-5bc6863b280d.jpg'，largeimage：'\\ xc5_full \\ 58 -b412-4ffd-af51-5bc6863b280d.jpg'}

那么我該怎么做呢？

Answer 1

您的反斜杠將被解釋為轉義符。 使用正斜杠。 例如， 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中雙引號，並且鍵是字符串。