不尋常的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圖片標題錯誤

回答

相關問題