不寻常的JavaScript图片标题错误

使用网站上的一些自酿（与谷歌的帮助下）javscript。它在Firefox，Safari，Chrome中显示效果很好，但当然不会在Internet Explorer中显示。我还没有在IE8中测试只有IE7，但我需要获得IE7无bug。不寻常的JavaScript图片标题错误

本质上讲，我从Flickr抓照片，并通过FlickrRSS WordPress插件输出他们。我将在下面发布相关代码。我的问题是这样的：悬停图像会弹出（更大）的图像，没有标题/标题的图像。对于那些有标题的，弹出式图像根本不显示（但该错误只发生在IE7中）。我真的不确定这是JS还是CSS错误，因为我不能进入DOM来查看IE7中发生了什么，因为该元素仅在以下情况下被追加：悬停，然后在鼠标悬停时删除。任何调试帮助...请！？

该网站的在线版本可以在这里看到：http://yasmeenadance.com（向下滚动到视频下方的照片缩略图）。

下面是每个元素％标签我的HTML被输出表示短码的插件：

<div class="popup"> 
     <a href="%image_medium%" class="preview" title="%title%"><img src="%image_square%" alt="%title%" /></a> 
<img class="preload" style="display: none !important;" src="%image_medium%"> 
    </div>

，这里是用于弹出的HTML（这是动态生成和附加到与固定位置的身体标记）

<p id="preview"><img src="large_img_url" alt="Image preview ... Loading" />Img Title Goes here as caption</p>

下面是相关的javascript/jquery的代码：

//The overlay or pop-up effect 
this.imagePreview = function(){ 
    /* CONFIG */ 

     xOffset = 40; 
     yOffset = 120; 

     // these 2 variable determine popup's distance from the cursor 
     // you might want to adjust to get the right result 

    /* END CONFIG */ 
    $("a.preview").click(function(e){ 
     return false; 
     }); 
    $("a.preview").hover(function(e){ 
     this.t = this.title; 
     this.title = "";  
     var c = (this.t != "") ? "<br/><span>" + this.t : "</span>"; 
     $("body").append('<p id="preview"><img src="'+ this.href +'" alt="Image preview ... Loading" />'+ c +'</p>'); 
     $("#preview") 
      .hide() 
      .css("top",(e.pageY - yOffset) + "px") 
      .css("left",(e.pageX + xOffset) + "px") 
      .fadeIn("2000");       
    }, 
    function(){ 
     this.title = this.t;  
     $("#preview").remove(); 
    }); 
    $("a.preview").mousemove(function(e){ 
     var top = e.pageY - yOffset; 
     var left = e.pageX + xOffset; 
     //flips the image if it gets too close to the right side 
     while ((left + 500) > window.innerWidth){ 
      left -= jQuery("#preview").outerWidth() + xOffset*2; 
     } 
     $("#preview") 
      .css("top",top + "px") 
      .css("left",left + "px"); 
    });

来源

2011-04-24 Brian

在下面的三元：

var c = (this.t != "") ? "<br/><span>" + this.t : "</span>";

你说“如果有一个标题，插入一个换行符，然后打开一个跨度，并在标题弹出。如果没有，然后关闭span标记”。

基本上，第一种情况为您提供了一个未封闭的跨度，并且第二关闭它从来没有被打开的跨度。

正如@Basiclife说正确，准确的诊断和这里是正确的语法：

var c = (this.t != "") ? "<br/><span>" + this.t + "</span>":"";

来源

2011-04-24 02:14:55

+1一个正确的答案，但为了完整起见，我可以建议你正确的行添加到你的答案'变种C =（this.t ！= “”）？ “
” + this.t + “ ”：“”;' – Basic 2011-04-24 02:18:14

就是这样。 ..以为我永远找不到那个bug！非常感谢@kennis和@Basiclife我永远不会知道如何格式化...谢谢！ – Brian 2011-04-24 02:23:16

不寻常的JavaScript图片标题错误

回答

相关问题