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