How do I make fancybox href dynamic?

Without each() or click() simply add the beforeLoad callback to your script like this

$(".fancybox").fancybox({
    autoScale: false,
    // href : $('.fancybox').attr('id'), // don't need this
    type: 'iframe',
    padding: 0,
    closeClick: false,
    // other options
    beforeLoad: function () {
        var url = $(this.element).attr("id");
        this.href = url
    }
}); // fancybox

NOTE: this is for fancybox v2.0.6+

On the other hand, a more elegant solution is to use (HTML5) data-* attribute to set the href (it would look weird to set id="images/01.jpg" otherwise) so you could do :

<a href="#" id="id01" data-href="images/01.jpg" ...

and your callback

beforeLoad: function(){
 var url= $(this.element).data("href");
 this.href = url
}

and use the id attribute for what is meant for.

---

EDIT : The best is to use the special data-fancybox-href attribute in your anchor like :

<a id="item01" data-fancybox-href="http://jsfiddle.net" class="fancybox" rel="gallery"  href="javascript:;">jsfiddle</a>

and use a simple script without callback like

$(".fancybox").fancybox({
    // API options 
    autoScale: false,
    type: 'iframe',
    padding: 0,
    closeClick: false
});

See JSFIDDLE