开发者

jQuery captify conflict other jquery code

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 % o开发者_运维技巧f the image
              spanWidth: '90%'
             });

             $("a.pic_manager").fancybox();  
            });
        </script> 


the problem seemed to be related to the use of remove() instead of detach(), deleting all the events previously attached to the DOM element.

I modified those lines of code in captify.js (v. 1.1.3)

var captionLabelSrc = $('#' + $(this).attr('rel'));
var captionLabelHTML = !captionLabelSrc.length ? $(this).attr('alt') : captionLabelSrc.html();
captionLabelSrc.remove();

with

var captionLabelSrc = $('#' + $(this).attr('rel')).detach();
var captionLabelHTML = !captionLabelSrc.length ? $(this).attr('alt') : captionLabelSrc;
//captionLabelSrc.remove();
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜