Question

I’m working with a magento go (SaaS) store and need to remove onclick, insert rel=”lightbox” as well as change the href=”#” to the img src url. Any help appreciated. Can javascript or jQuery do that? I can only play around with javascript as I cannot access the application codes.

<div class="more-views">
<h2>More Views</h2>
<ul>
  <li>
    <a href="#" onclick="popWin('http://101pareos.com.au/catalog/product/gallery/id/49/image/81/', 'gallery', 'width=300,height=300,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;" title="Image 1">
                        <img src="http://s4f7e756057ed2.img.gostorego.com/802754/cdn/media/s4/f7/e7/56/05/7e/d2/catalog/product/cache/1/thumbnail/48x/9df78eab33525d08d6e5fb8d27136e95/b016.jpg" width="48" height="48" alt="Image 1" />
                    </a>
    </li>          
</div>

Thanks in advance guys!

Ryan

Answer 1

Voilà:

$('.more-views a').each(function() {
    var $this = $(this);
    var image = $this.find('img');

    $this.attr({
        onclick: null,
        href: image.attr('src'),
        rel: 'lightbox'
    });
});

EDIT: To extract the URL, all you have to do is:

jQuery('.more-views a').each(function() {
    var $this = jQuery(this);

    $this.attr({
        onclick: null,
        href: /'(.+?)'/.exec($this.attr('onclick'))[1],
        rel: 'lightbox'
    });
});

EDIT: To extract the image, it’s a little (okay, a lot) more complicated.

jQuery('.more-views a').each(function() {
    var $this = jQuery(this);

    jQuery.ajax({
        url: /'(.+?)'/.exec($this.attr('onclick'))[1],
        type: 'GET',
        dataType: 'text',
        success: function(data) {
            // Extract the image from the HTML:
            var url = /img src="(.+?)"/.exec(data)[1];

            // Set the new href, remove the old onclick handler, and make it a lightbox:
            $this.attr({
                onclick: null,
                href: url,
                rel: 'lightbox'
            });
        }
    });
});