Comment masquer et afficher les images sur l'image miniature cliquez avec jquery ou javascript

Question

J'essaie d'utiliser javascript/jquery.

Je suis en dessous de HTML où je veux travailler sur l'événement "onclick" du lien d'image.

<div id="galleryContainer"> 
    <ul class="galleryThumbnails"> 
     <li><a href="/99/english/destinations_offers/destinations/asiapacific/india/newdelhi/photo.aspx?item=media_616165_ID0EV&amp;menu=image_616165#mplayer_616165"> 
      <img width="70" height="56" src="http://corp.com/99/english/images/thumb_616143_tcm481-616166.jpg" 
       class="mpMenuItemSelected" id="thumb_616165_ID0EV" title="New Delhi Zoo" alt="New Delhi Zoo"></a> 
     </li> 
     <li><a href="/99/english/destinations_offers/destinations/asiapacific/india/newdelhi/photo.aspx?item=media_616165_ID0E3&amp;menu=image_616165#mplayer_616165"> 
      <img width="70" height="56" src="http://corp.com/99/english/images/thumb_616146_tcm481-616168.jpg" 
       class="mpMenuItemOff" id="thumb_616165_ID0E3" title="New Delhi Zoo" alt="New Delhi Zoo"></a> 
     </li> 
     <li><a href="/99/english/destinations_offers/destinations/asiapacific/india/newdelhi/photo.aspx?item=media_616165_ID0EDB&amp;menu=image_616165#mplayer_616165"> 
      <img width="70" height="56" src="http://corp.com/99/english/images/redfort_tcm481-616158.jpg" 
       class="mpMenuItemOff" id="thumb_616165_ID0EDB" title="New Delhi RedFort" alt="New Delhi RedFort"></a> 
     </li> 
    </ul>  
     <div id="media_616165_ID0EV" class="galleryImage"> 
     <img width="390" height="312" alt="New Delhi Zoo" title="New Delhi Zoo" src="http://corp.com/99/english/images/10894_tcm481-616143.jpg"></div> 

    <div style="display: none;" id="media_616165_ID0E3" class="galleryImage"> 
     <img width="390" height="312" alt="New Delhi Zoo" title="New Delhi Zoo" src="http://corp.com/99/english/images/deer_tcm481-616146.jpg"></div> 

    <div style="display: none;" id="media_616165_ID0EDB" class="galleryImage"> 
     <img width="390" height="312" alt="New Delhi RedFort" title="New Delhi RedFort" src="http://corp.com/99/english/images/redfort_tcm481-616157.jpg"></div>   
</div> 

Dans ci-dessus HTML, j'ai obtenu des images miniatures (s'il vous plaît voir le UL), par exemple

<img width="70" height="56" src="http://corp.com/99/english/images/thumb_616143_tcm481-616166.jpg" 
       class="mpMenuItemSelected" id="thumb_616165_ID0EV" title="New Delhi Zoo" alt="New Delhi Zoo"> 

Maintenant, j'ai section galleryImage séparée div pour chaque image miniature, qui affichera sur le clic sur l'image miniature. Par exemple à la vignette ci-dessus il y a

<div id="media_616165_ID0EV" class="galleryImage"> 
<img width="390" height="312" alt="New Delhi Zoo" title="New Delhi Zoo" src="http://corp.com/99/english/images/10894_tcm481-616143.jpg"></div> 

Je veux cacher et montrer les images selon la vignette est cliquée.

EDIT:

J'ai fonctionnalité onglet comme lien lors de la première fois que la page est rendu le ci-dessous le code @Rahul fonctionne parfaitement, mais après avoir navigué l'un onglet et à venir à nouveau en arrière, il cesse de fonctionner la raison est-ce qu'après être revenu sur le même onglet, mon code jquery précédent ajoute et div supplémentaire avec le même contenu, ci-dessous jquery se confondre comme ma page aura maintenant le même code deux fois. Veuillez voir l'exemple de code lorsque la première page est affichée.

<div class="tabs-container" id="tab-container"> 
top above html is rendered here 
</div> 

maintenant après avoir navigué à d'autres onglet et revenir à même onglet, maintenant à la page html est comme ci-dessous, le reste du code mentionné ci-dessus, il en avec style = « display: none; » un div supplémentaire est ajouté pour jouer la fonctionnalité onglet:

<div class="tabs-container" id="tab-container" style="display: none;"> 
top above html is rendered here 
</div> 
<div id="divContenttab5" style="display: block;" class="dynDiv"> 
    <div class="tabs-container" id="tab-container"> 
     top above html is rendered here 
</div> 
</div> 

Maintenant, le ci-dessous arrête Jquery fonctionne comme il y a même deux types de htmls.

Veuillez nous suggérer!

Merci.

Cordialement, MKS

Answer 1

Je résolu mon problème avec classe CSS basculement, j'ai changé le code donné par @Rahul, s'il vous plaît consulter et proposer des éventuelles modifications.

$("#galleryContainer ul.galleryThumbnails li img").click(function() { 
    var idArr = this.id.split('_'); 
    var divID = "media_" + idArr[1] + "_" + idArr[2]; 
    $("#galleryContainer ul.galleryThumbnails li img").each(function() { 
     if ($(this).is('.mpMenuItemSelected')) { 
      $(this).removeClass('mpMenuItemSelected'); 
      $(this).addClass('mpMenuItemOff'); 
     } 
    }); 
    $("div.galleryImage").hide(); 
    $("#" + divID).show(); 
}); 

Answer 2

Essayez celui

$("#galleryContainer ul.galleryThumbnails li img").click(function(){ 
    var idArr = this.id.split('_'); 
    var divID = "media_" + idArr[1] + "_" + idArr[2]; 

    $("div.galleryImage").hide(); 

    $("#" + divID).show(); 
}); 

Si vos éléments HTML sont générés dynamiquement, vous pouvez utiliser ce code qui utilise l'événement .live().

$("#galleryContainer ul.galleryThumbnails li img").live("click", function(){ 
    var idArr = this.id.split('_'); 
    var divID = "media_" + idArr[1] + "_" + idArr[2]; 

    $("div.galleryImage").hide(); 

    $("#" + divID).show(); 
}); 

Answer 3

Quand il est généré HTML, il serait facile d'ajouter onclick="myFunction('media_616165_ID0EV')" aux vignettes.

myFunction(media_id){ 
$(media_id).show(); 
}