problem with the dim effect
<p>Basically I'm trying to show a large picture after clicking on a smaller picture, I make the whole page go dark and the large photo will appear and when I click on the close button the small picture would appear and the page would light up, the problem is that it works the first time but second time I click on the small picture it doesn't show the big picture just the dimming effect happens, when I close it with the close button the page lights up and small picture appears, on the third  occasion everything works fine but again on forth occasion the same thing as the second occasion happens.</p>

<p>can some one help please.</p>

<p>note that the script make the html and there's only one large picture and the script make the small one by cropping it,(I'm using magento)</p>

<pre><code>jQuery.noConflict();

jQuery(document).ready(function() {

    jQuery('body').append("&lt;div id='overlay'&gt;&lt;/div&gt;");
    jQuery('body').append("&lt;a id='close'&gt;X&lt;/a&gt;");

    var smallImage;
    var bigImage;

    jQuery('p.product-image-zoom img').attr('style');
    var bigImage = 'width:1000px;left:-367.5px;top: -267.5px;';
    jQuery('p.product-image-zoom img').dblclick(function() {

        smallImage = jQuery(this).attr('style');
        jQuery('img#image').attr({
            'style':bigImage
        });
        dim();
        jQuery('a#close').css('display','block');
    });

    jQuery('#close').click(function() {     
        light();
        jQuery('a#close').hide();
        jQuery('img#image').attr({
            'style':smallImage
        });
    });


    function dim() {
        jQuery("#overlay").fadeIn().animate({opacity:0.9},500);
    }

    function light() {
        jQuery('#overlay').fadeOut().animate({opacity:0.9},500);
    }

    jQuery("#overlay").css("height", jQuery(document).height());

});
</code></pre>

<p>generated html</p>

<pre><code>&lt;p class="product-image product-image-zoom"&gt;
    &lt;img id="image" src="http://lalove.local/lalove/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/l/a/la_love.jpg" alt="Chaser La" title="Chaser La" /&gt;
&lt;/p&gt;
</code></pre>
