Auto detect image link for lightbox
With jQuery
Using jQuery and interface imagebox plugin, we need to add rel="imagebox" to our image link. If you don't want to add this manually to all your pictures like me, here is a little solution I've found. Insert this between <head> and </head>.
<script type="text/javascript">
$(document).ready(function() {
$('a[@href$=jpg]').attr("rel","imagebox");
});
</script>
This will find all links to .jpg files and add rel="imagebox" to them.
With Mootools
Edit: In the end, I'm not sure this will work!
Here is a snippet I use for Mootools and Slimbox plugin. With Slimbox, we need to add rel="lightbox" to our image link. In a javascript file, paste this code:
function autoLightbox()
{
var anchors = document.getElementsByTagName("a");
var imgex = /\.(jpg|jpeg|gif|png|bmp)$/;
for (var i = 0; i < anchors.length; i++){
var anchor = anchors[i];
if (anchor.getAttribute('href') && (anchor.getAttribute('href').toLowerCase().search(imgex) >= 0)){
anchor.setAttribute('rel', 'lightbox');
}
}
}
window.addEvent('domready', function(){ autoLightbox();})
This should work. There are probably better ways to do this using Mootools but I've dropped this library for jQuery. ^^;
One Response to “Auto detect image link for lightbox”
Leave a Comment
Works? Doesn't work? Other tips? Please leave a comment! :)
In Mootools method, use "getProperty" instead of "getAttribute" & "setProperty" instead of "setAttribute" as well, then it should work fine both in IE and FF.