Question

Im creating a simple image gallery. And I mean simple:

 <div id="outerdiv" style="width:600px;height:400px; background:#ccc;padding:50px;">
  <div id="theGallery">
    <div class="thumbnailDiv" id="tn1">
      <div style="position: absolute;">
        <img id="1" src="pic1.jpg"/>
      </div>
    </div>
    <div class="galleryButtonLeft"></div>
  </div>
 </div>

I want to slide the image left so other images can appear when galleryButtonLeft is clicked. Heres my jQuery:

    $(function () {
    $(".galleryButtonLeft").mousedown(function (event) {
      event.preventDefault();
      $("#theGallery").animate({
      marginLeft: "-=300px"
       }, 1000);
      }).click(function (event) {
      event.preventDefault();
     });});

And the CSS:

       .galleryButtonLeft
         {
        height:130px;
           width:40px;
         border:#996663 solid 1px;
         background:#e9cbad;
        z-index:30;
      }

The gallery slides to the left but its only hidden behind the galleryButtonleft div and not behind the outerdiv div portion to the left of my button. The z-index for the gallery is lower than all other z-indexes. So how do i hide theGallery so it doesnt show on the outerdiv div except for the current images to the right of the galleryButtonLeft?

Answer 1

You can set overflow: hidden on the parent container. Then when the element leaves the bounds of the parent it will be hidden.

In addition, don’t animate the entire gallery, just the img or it’s wrapper.

EDIT:

Based on comments, here is an updated fiddle:

http://jsfiddle.net/6rHC2/3/

A wrapper was added with fixed size and overflow:hidden.