I am using the jQuery captify library to add a simple "Edit profile photo" link when a user hovers over their profile pic. The text which is shown as the caption is a link which I want to to show in a fancybox modal window. For some reason, captify is preventing the link from being bound to fancybox and always does the default link event of trying to load the page. This applies to any link on the page, which i've tested by adding $('a').click(function(){return false;}); - so it seems captify is causing a problem when you try to set up any other event handlers after calling captify. Anyone have any ideas of what might be causing this? Or if it may be an incompatibility with the version of jquery i'm using (1.4.1) and captify...
This the html structure, where the div#change_pic becomes the caption overlaid on top of the image :
<div id = "avatar">
<img src="http://localhost/media/images/silhouette110x110.gif" alt="profile photo" class="captify" rel="change_pic" /> <div id="change_pic">
<a href="http://localhost/image/manage" class="pic_manager">Change your photo</a> </div>
</div>
Javascript looks like this:
//jquery 1.4.1 already loaded
<script type="text/javascript" src="http://localhost/media/js/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
<script type="text/javascript" src="http://localhost/media/js/fancybox_init.js"></script>
<link rel="stylesheet" type="text/css" href="http://localhost/media/css/captify.css" />
<script type="text/javascript" src="http://localhost/media/js/captify.tiny.js"></script>
<script type = "text/javascript">
$(document).ready(function(){
$('img.captify').captify({
// caption span % of the image
spanWidth: '90%'
});
$("a.pic_manager").fancybox();
});
</script>