jqZoom не работает, если изображения имеют имена как имена

Question

Я использую 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> 

, который работает, если вы используете «регулярные» имена как в примере. Но мои образы имеют 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 неисправную functon как показано ниже:

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, чтобы он правильно интерпретировался как p arameters

Но я не могу заставить его интерпретировать это как правильный 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'}

Так как же мне это сделать?

Answer 1

Ваши обратные косые черты интерпретируются как escape-символы. Используйте косые черты. Например, атрибут 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, а клавиши - строками.