problem with jquery dim effect

Question

I'm trying to get dim effect when a small image is clicked on and show a larger image,

 <div id="main_content">
    <div id="press_page">    
       <div id="press_images">
            <img id="s1" class="small" src="images/press/small/press1.jpg" />
            <img id="s2" class="small" src="images/press/small/press2.jpg" />


            <img id="b1" class="big" src="images/press/big/press1.jpg" />

        </div>
      </div>
  </div>




 $(function() {

        $('#s1').click(function() {
       $('#main_wrapper').animate({opacity:0.1},1000);
       $('img.big').animate({opacity:1},1000).css('display','block');
      });

});

the problem is that the the big picture appears and then the page get dimmed including the big pictures, but I need to make the page dimmed and then big picture appear with opacity 1,while everything else is dark,

any help would be appreciated.

thanks

Answer 1

Put the animation of the big picture in the callback of the animate function for the dimmer, so it happens after the dimming occurs.

$('#main_wrapper').animate({opacity:0.1}, 1000, function () {
  $('img.big').animate({opacity:1},1000).css('display','block');
});

Answer 2

I think a better approach is to create an overlay. Something like:

#overlay {
    position: absolute;
    display: none;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
}

Animate it from opacity 0 to 0.8 or something, then show the big image above it.

img.big {
    position: absolute;
    z-index: 101;
    top:50%;
    left:50%;
    margin-top: - (height of image / 2)
    margin-left: - (width of image / 2)
}

There are plenty of good tutorials on how to connect this with some jQuery interaction.

Answer 3

AFAIK, you can't make a parent DOM element have a certain opacity without making its children that opacity also.

Your code is currently setting the parent div's opactiy to be 10% and then setting the images opacity to be 100% of THAT 10% - ie. the same as the other images.

I think a simple solution would be to perform the selection on class. The other images in your div have a class called "small" so why not simply write:

$(document).ready(function(){

       $('#s1').click(function() {

                    $('.small').animate({opacity:0.1},1000);

            });

 });

Answer 4

Opacity is one of the few CSS properties that doesn't propagate the way you'd expect.

The simplest solution is to either adjust only the small images, or to move to big image outside of its parent container.