i've got the following problem. I've been moving a large amount of content by hand and while inserting images, i put the lightbox class on the tag - unfortunately for the images to properly work, they would need an anchor around them specifying the url to the full image size - for example
<a href="images/myimage.jpg" class="lightbox"><img src="images/myimage.jpg"></a>
All I've got now is :
<img src="images/myimage.jpg" class="lightbox">
Is it possible to automatically set an anchar around every image found inside a specific <div>
element and also properly close it? I would need something like
foreach image in <div>
prepend <a href="this.image.src">
and append </a>
Any solution in PHP or jQuery would greatly be appreciated!
You can use jQuery's .wrap()
method:
$('div img').each(function(){
$(this).wrap('<a href="'+this.src+'" class="lightbox"></a>');
});
With jQuery use .wrap()
:
$.each($('img'), function(){
$(this).wrap('<a href="'+$(this).attr('src')+'" class="lightbox"></a>')
});
It would be better if you specify the container div of these images then only those images will be wrapped. Something like this:
$.each($('#lighboximgwrapper img'), function(){
$(this).wrap('<a href="'+$(this).attr('src')+'" class="lightbox"></a>')
});
Use RegExp
Pattern:
<img(.*)src="([\w\/\.]+)"(.*)>
Replace with:
<a href="$2" rel="fancybox"><img src="$2" alt="" /></a>
preg_replace PHP Function
Personally, I would fix the code generating the source. Just use the regex find/replace in your IDE and fix the source. Don't rely on some javascript or PHP hack to "fix" this mistake.