Changer l'image de popup lorsque le lien cliqué avec FancyBox

Question

J'ai une page avec un couple de liens (<a>) avec des images à l'intérieur (<img>) dans la page. Je veux que quand une image est cliquée, une fenêtre contextuelle de deux colonnes apparaît montrant l'image cliquée. Mon problème est qu'avec le code ci-dessous seulement la première image est montrée et elle ne fait rien quand le deuxième est cliqué. Des idées pour le résoudre? Merci d'avance! Guillermo.

Liens 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> 

Ensuite, lorsque le lien est cliqué, je veux montrer deux colonnes pop-up avec des balles sur la gauche et l'image à droite comme celui-ci:

<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 pour les deux colonnes

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; 
} 

Enfin, le script js pour que la magie se produit

$(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' 
      } 
     } 
    }); 
}); 

}); 

Answer 1

Enfin, il y avait quelques erreurs. Tout d'abord, ce n'est pas id = "thumbnailTitleLink" c'est class = "thumbnailTitleLink".

Alors je l'ai fait quelques changements qui peut être vu dans ma réponse here