Блог

Эй, ребята, у меня есть следующий код. По сути, это скрипт галереи, и когда я наведу курсор мыши на эскиз, он изменит увеличенную версию эскиза:

 $.fn.CloudZoom = function (options) {
    try {
        document.execCommand("BackgroundImageCache", false, true);
    } catch (e) {}
    this.each(function () {
        var relOpts, opts;
        eval('var   a = {'   $(this).attr('rel')   '}');
        relOpts = a;
        if ($(this).is('.image')) {
            $(this).css({
                'position': 'relative',
                'display': 'block'
            });
            $('img', $(this)).css({
                'display': 'block'
            });
            if ($(this).parent().attr('id') != 'imageBox') {
                $(this).wrap('<div id="imageBox"></div>');
            }
            opts = $.extend({}, $.fn.CloudZoom.defaults, options);
            opts = $.extend({}, opts, relOpts);
            $(this).data('zoom', new CloudZoom($(this), opts));

        } else if ($(this).is('.thumbs')) {
            opts = $.extend({}, relOpts, options);
            $(this).data('relOpts', opts);
            $(this).bind('mouseenter click', $(this), function (event) {

                var data = event.data.data('relOpts');
                $('#'   'mainImage').data('zoom').destroy();
                $('#'   'mainImage').attr('href', event.data.attr('href'));
                // Change the small image to point to the new small image.
                $('#'   'mainImage'   ' img').attr('src', data.thumby);
                $('#'   'mainImage').CloudZoom();
                return false;
            });
        }
    });
    return this;
};
  

HTML-код выглядит следующим образом:

 <li>
 <a href="gfx/boss_black.jpg" class="thumbs" rel="thumby:'gfx/boss_black.jpg'">
  <img src="gfx/boss-black-small.jpg">
 </a>
</li>
  

Что я хочу сделать, так это написать rel="" тег без «большого пальца».

Я хочу, чтобы тег rel выглядел следующим образом:

 rel="gfx/boss_black.jpg"
  

Когда я делаю это, JS больше не работает. Как мне изменить JS, чтобы просто получить «rel»?

 var img = $('#'   'mainImage'   ' img'),
    rel = img.parent().attr('rel'),
    thumby = rel.substr(8, rel.length - 9);

img.attr('src', thumby);
  

Я бы рекомендовал сохранить альтернативный src атрибут в атрибуте, отличном от rel хотя. Атрибут данных HTML5 был бы хорошим кандидатом.

Кроме того, это странный селектор 🙂

Если я правильно понимаю — существует библиотека под названием thumby, которая требует специального формата для вашего тега rel, который вы не хотите использовать в своем исходном коде.

Я вижу два возможных варианта.

1. Попробуйте выполнить javascript, который изменяет тег rel, до того, как будет включена библиотека thumby. Javascript загружается и выполняется в порядке, указанном в вашем HTML-документе. Надеюсь, thumby подберет измененное значение, но исходный html содержит старое значение.

2. Измените библиотеку thumby — в частности, ту часть, которая считывается из rel, и, возможно, заставьте ее определять, где работать, на основе класса thumbs вместо этого.

Что-то вроде:

 <li>
 <a href="gfx/boss_black.jpg" class="thumbs">
  <img src="gfx/boss-black-small.jpg" rel="gfx/boss_black.jpg">
 </a>
</li>
  

…

 $('.thumbs img').hover(
  function () {
    var r = $(this).attr('rel'), a = $(this).attr('src');
    $(this).attr({'rel':a,'src':r});
  }, 
  function () {
    var r = $(this).attr('rel'), a = $(this).attr('src');
    $(this).attr({'rel':a,'src':r});
  }
);