當鏈接點擊FancyBox時，更改彈出窗口的圖像

我有一頁帶有幾頁鏈接（<a>），頁面中有圖片（<img>）。我希望當點擊圖像時會出現一個雙列彈出窗口，顯示點擊的圖像。我的問題是，下面的代碼只顯示第一個圖像，並且當第二個圖像被點擊時它不執行任何操作。任何想法如何解決它？在此先感謝！吉列爾莫。當鏈接點擊FancyBox時，更改彈出窗口的圖像

連結中的HTML

<table class="tableHouse"> 
     <tr align="center" > 
      <td> 
       <span class="thumbnailTitle">Table</span> 
      </td> 
      <td> 
       <span class="thumbnailTitle">Chair</span> 
      </td> 
     </tr> 
     <tr class="spaceUnder"> 
      <td> 
       <div><a id="thumbnailTitleLink" href="#popup_wrapper" name="table"><img id="imgTable" alt="Table" src="images/house/table_thumb.png"/></a></div> 
      </td> 
      <td> 
       <div><a id="thumbnailTitleLink" href="#popup_wrapper" name="chair"><img id="imgChair" alt="Chair" src="images/house/chair.png"/></a></div> 
      </td> 
     </tr> 
    </table>

然後，單擊超鏈接時，我想表明在這樣一個右側的兩列彈出在左側子彈和圖像：

<div id="popup_wrapper" class="popup_wrapper"> 
    <div class="popup_left_box"> 
     <div id="tablePopupText" class="popupText"> 
      <span class="popupTitle">Table</span> 
      <ul> 
       <li>Description 1</li> 
       <li>Description 2</li> 
       <li>Description 3</li> 
      </ul> 
     </div> 
     <div id="chairPopupText" class="popupText"> 
      <span class="popupTitle">Chair</span> 
      <ul> 
       <li>Description 1</li> 
       <li>Description 2</li> 
       <li>Description 3</li> 
      </ul> 
    </div> 
</div>

CSS的兩列

div.popup_wrapper{ 
    width: 670px; 
} 

div.popup_left_box{ 
    float: left; 
    padding: 10px; 
    width: 310px; 
} 

div.popup_right_box{ 
    float: right; 
    padding: 10px; 
    width: 310px; 
}

最後的js腳本，使魔術發生

$(document).ready(function() { 

    $(".popupText").each(function() { 
     $(this).hide(); 
    }); 

$(".popupImage").hide(); 

$("#thumbnailTitleLink").each(function() { 
    var name = $(this).attr("name"); 
    var srcImage = ""; 
    var altImage = ""; 

    var img = $(this).find("img"), 
    len = img.length; // check if they exist 
    if(len > 0){ 
     // images found, get id 
     altImage = img.first().attr("alt"); 
     srcImage = img.first().attr("src"); 
    } 

    $(this).fancybox({ 
     hideOnContentClick : false, 
     autoScale: false, 
     transitionIn : "elastic", 
     transitionOut: 'elastic', 
     easingIn : 'easeOutCirc', 
     overlayColor : "#1e72b1", 
     overlayOpacity : .4, 
     opacity: false, 
     speedIn : 950, 
     titleShow: false, 
     scrolling: "no", 
     orig: img, 
     onComplete : function() { 
      $(".popupText").each(function() { 
       $(this).hide(); 
      }); 
      $(".popupImage").show(); 

      $('#popup_wrapper').show(); 

      $('#imgPopup').alt = altImage; 
      $('#imgPopup').src = srcImage; 
      $('#' + name + 'PopupText').show(); 
     }, 
     openEffect : 'elastic', 
     closeEffect : 'elastic', 
     helpers : { 
      title : { 
       type : 'inside' 
      } 
     } 
    }); 
}); 

});

來源

2012-11-08 polonskyg

最後可以看到，我已經回答了我的問題[這裏] [1] [1]：http://stackoverflow.com /問題/ 13225604 /的fancybox-AS-彈出及圖像移動的效果 – polonskyg

最後，有一對夫婦的錯誤。首先，它不是id =「thumbnailTitleLink」它是class =「thumbnailTitleLink」。

然後我做了一些改動，可以在我的答案here

來源

2012-11-13 04:34:00 polonskyg

當鏈接點擊FancyBox時，更改彈出窗口的圖像

回答

相關問題