Question

I am trying to use javascript/jquery.

I have got below HTML where I want to work on “onclick” event of image link.

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

In above HTML, I have got thumbnail images ( please see the UL) for example

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

Now I have got separate galleryImage div section for every thumbnail Image, which will show on the click on thumbnail image. For example to the above thumbnail there is

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

I want to hide and show the images according to the thumbnail is clicked.

EDIT:

I am having tab functionality as a link when first time the page is rendered the below @Rahul code works perfectly, however after navigating the any tab and again coming back it stops working the reason is that after coming back on same tab, my previous jquery code adds and extra div with same contents, below jquery get confused as my page now will be having same code twice. Please see the example code when first time page is rendered.

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

Now after navigating to other tab and coming back to same tab, now html on page is as below, the above mentioned code remain there in page with style=”display: none;” an extra div is added to play the tab functionality:

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

Now the below Jquery stops working as there are same two type of htmls.

Please suggest!

Thanks.

Best Regards,
MKS

Answer 1

I resolved my issue with CSS class toggling, I changed the code given by @Rahul, please have a look and suggest for any changes.

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