jquery get rel attribute and change it

Hey guys, I have the following code. It is basically a gallery script and when I mouse over the thumbnail, it will change the a bigger version of the thumbnail:

$.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 = $.e开发者_JAVA技巧xtend({}, 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;
};

The html reads as follows:

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

What I want to do is to write the rel="" tag without the "thumby".

I want the rel tag look like this:

rel="gfx/boss_black.jpg"

When I do this, the JS doesn't work anymore. How do I change the JS to simply get the "rel"?

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

img.attr('src', thumby);

I would recommend storing the alternative src attribute in an attribute other than rel though. A HTML5 data attribute would be a good candidate.

Also, that is a bizarre selector :)

If I understand correctly - there is a library called thumby that requires a special format for your rel tag that you do not want in your source.

I can see two possible soultions.

1. Try to execute the javascript that changes the rel tag before the thumby library is included. Javascript loads and executes in the order specified in your HTML document. Hopefully thumby will pick up the changed value, but the source html contains the old value.

2. Modify the thumby library - specifically the part that reads from rel, and maybe make it identify where to operate based on the class thumbs instead.

Something like:

<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});
  }
);