jquery - Generate FancyBox link href dynamically from child image src

Question

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.

Answer 1

由于我无法直接解决此问题，我选择删除链接并在页面加载时生成。这是我用来帮助任何人的代码：

$(document).ready(function() {
   $('ul#gallery li').each(function() {
      var url =  $(this).children("img").attr("src");
      $(this).children("img").wrap('<a class="fancybox" rel="group" href="' + url + '" />');
   });
   $(".fancybox").fancybox();
});