Demo - Unbind Fancybox handlers

Demonstrates how to unbind the fancybox event handler from elements after fancybox has been bound to them. Doing this allows us to retain functionality like the albums feature, while allowing us to bind our own click events to the actual images

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<a class="fancybox" href="http://digitalbiscuits.co.uk/art/photography/Photography_27.jpg"><img src="http://digitalbiscuits.co.uk/art/photography/thumbs/Photography_27.jpg" alt=""/></a>

<a class="fancybox disabled" href="http://digitalbiscuits.co.uk/art/photography/Photography_53.jpg"><img src="http://digitalbiscuits.co.uk/art/photography/thumbs/Photography_53.jpg" alt=""/></a>

<a class="fancybox disabled" href="http://digitalbiscuits.co.uk/art/photography/Photography_70.jpg"><img src="http://digitalbiscuits.co.uk/art/photography/thumbs/Photography_70.jpg" alt=""/></a>

<a class="fancybox disabled" href="http://digitalbiscuits.co.uk/art/photography/Photography_30.jpg"><img src="http://digitalbiscuits.co.uk/art/photography/thumbs/Photography_30.jpg" alt=""/></a>

JavaScript

/*-------------DEMO-----------*/
//Demonstrates how to unbind fancybox event handler


$(".fancybox").attr('rel', 'gallery').fancybox({live: false});

//bind another click event
$('.fancybox.disabled').on("click",function(e){
    e.preventDefault();
    alert("hi!");
})