I'm using FancyBox for a simple image gallery but I want to set the link HREF attribute automatically from the SRC attribute from the image (that is the link's child). Here is my HTML:
<ul id="gallery">
<li><a href="#" rel="group" class="fancybox"><img src="images/01.jpg" alt="" class="picBorder" /></a></li>
<li><a href="#" rel="group" class="fancybox"><img src="images/02.jpg" alt="" class="picBorder" /></a></li>
<li><a href="#" rel="group" class="fancybox"><img src="images/03.jpg" alt="" class="picBorder" /></a></li>
</ul>
After a bit of reading I thought that I could do this using the beforeLoad callback, with something like this:
$(document).ready(function() {
$(".fancybox").fancybox({
beforeLoad : function(){
var url= $(this.element).children("img").attr("src");
this.href = url
}
});
});
Alas this isn't working. I would prefer to do this within Fancybox rather than dynamically creating the links on page load if possible.
Thank you in advance for any suggestions!!!
Edit: To clarify, there are no console errors appearing & fancybox's modal window displays with the normal "The requested content cannot be loaded. Please try again later." error... this would suggest the problem is in how I am traversing the code.