Question

I am creating a website that has an image gallery.

You have a side menu with the different categories, a hidden div that appears when you click on a category, filled with thumbnails, and when you click on any of the thumbnails it hides the thumbnails div and shows the image gallery in its place.

An example of what I am trying to do is here : http://www.matitacorp.com/web/portfolio.php

What I would like to do is when the thumbnail div hides and the image gallery appears I would also like the image that corresponds to the thumbnail clicked to appear, even if it is 3 or 4 pictures lower in the scrollable thumbnail gallery.

I’ve tried using .scrolltop() and setting the value but I think that I am missing something. My div’s appear properly but I am not getting the scrolltop value to work or I am using the complete wrong function. Hopefully someone can help out.

Here is a piece of the code that I am trying to use:

//thumbnail section
<div id="booth">      
  <a href="#" id="identityoverlay"><img src="thumb1" alt="" /></a>
  <a href="#" id="identityoverlayA"><img src="thumb2" alt="" /></a>
  <a href="#" id="identityoverlayB"><img src="thumb3" alt="" /></a>
</div>

//main image section
<div id="identityOverlay" style="background-image:url(images/bkgrnd_700.gif); height:720px; display:none;">               

    <div id="imageGallery style="padding-left:95px; padding-top:10px; padding-bottom:15px; overflow:auto; height:610px;">            
                <img src="mainImg1" /><br />              
                <img src="mainImg2" /><br />              
                <img src="mainImg3" /><br />              
    </div>
</div>

<script>
    $("#identityoverlay").click(function () {
      $("#identityOverlay").show();     
      $("#booth").hide();
});    

    $("#identityoverlayA").click(function () {       
      var myCont = document.getElementById ("imageGallery");
              myCont.scrollTop(100); 

      $("#identityOverlay").show();       
      $("#booth").hide();
});   
</script> 

Thanks!

Answer 1

Well you have couple problems with your code.

First of all you should prevent default action on click and secondly you should hide/show divs first and then scroll to wanted position.

Here is the modified code:

$("#identityoverlayA").click(function (e) {
    e.preventDefault;

    $("#booth").hide();
    $("#identityOverlay").show();       

    var myCont = document.getElementById ("imageGallery");
    myCont.scrollTop(100); 
});