Search code examples
javascriptjquerymagentoonclicklightbox2

How to remove onclick and insert rel="lightbox" with javascript (magento go)


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


Solution

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