zoom in zoom out to multiple photos

Question

I would like to make photo zoom when I click at original photo.
I already used below code.
I am ok when I click at photo, then zoom image appear.
But as my program requirement, my web page has multiple photos.
So When I click first photo, then this photo become enlarge.
Then I need to click this photo again so that this photo become normal.
It is my program code flow.

Let's say that user forget to click current enlarge photo so that it become normal size again.
Let's say it still enlarge.
Then user click another photo to make zoom.
At that moment, the photo which user want to make enlarge is not become enlarge.
Because the first photo is still enlarge.

It is my problem.

So

1) How could i know one of the photos is still enlarge when user click another photo to make zoom.
2) If jquery code can know about this situation, let me know it please.
3) Then if jquery can know about this situation, how could i remove current enlarge photo which user forget to click in order to make normal size again.
4) What code should i make add to my current jquery code, please let me know it.

<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.quickZoom.1.0.js"></script>
<script tyle="text/javascript">     
        $(document).ready(function() {          
            $('.OrignialImage').quickZoom({
                zoom: 4,
                speedIn: 500,
                speedOut: 200,
                easeIn:'easeOutBack',
                titleInSpeed: 200       
            });             

        });
</script>

..................

.OrignialImage{width:150px; height:150px;}
.HtmlTableHeight{width: 160px; height: 160px;}
.quickZoom-hoverShadow {-moz-box-shadow:0 0 10px 0 #000;
-webkit-box-shadow:0 0 10px 0 #000;
box-shadow:0 0 10px 0 #000;}

..................

<table border="1" height="1000px" cellpadding="0" cellspacing="0">
        <tr class="HtmlTableHeight" ><td><img src="images/C003.jpg" alt="title" class="OrignialImage" /></td></tr> 
        <tr class="HtmlTableHeight" ><td><img src="images/C003_2.jpg" alt="title" class="OrignialImage" /></td></tr> 
        <tr class="HtmlTableHeight" ><td><img src="images/C003_3.jpg" alt="title" class="OrignialImage" /></td></tr> 
        <tr class="HtmlTableHeight" ><td><img src="images/C003_4.jpg" alt="title" class="OrignialImage" /></td></tr> 
        <tr class="HtmlTableHeight" ><td><img src="images/C003.jpg" alt="title" class="OrignialImage" /></td></tr> 
        <tr class="HtmlTableHeight" ><td><img src="images/C003_3.jpg" alt="title" class="OrignialImage" /></td></tr> 
    </table>

..................

/*
 * quickZoom 0.1.0 - JavaScript Image viewer
 * Copyright (c) 2011 Louis Sawtell, contact@louis-sawtell.com, http://louis-sawtell.com
 *
 * I make modify his coding as my requirement.
*/

(function($) {
$.fn.quickZoom = function(options) {
    var thumbX, thumbY;
    var IsFinishedFirstClick = false;

    // define default values
    var defaults = {            
        shadow: true
    };
    // merge the defaults with given parameters
    var e = $.extend(defaults, options);
    // set $(this) to var to speed up code
    var myThis = $(this);

    var OriginalPictureTop = 0;
    var OriginalPictureLeft = 0;
    myThis.click(function(){

        if(IsFinishedFirstClick != true)
        {
            // this code for first time click to image.                             
            // assign vars to avoid overusing $(this)
            var target = $(this);

            OriginalPictureTop = target.offset().top;
            OriginalPictureLeft = target.offset().left;

            // get thumbnail dimensions
            thumbX = target.width();
            thumbY = target.height();

            // get zoomed dimensions
            var zoomX = thumbX*e.zoom;
            var zoomY = thumbY*e.zoom;

            // If the thumbnail doesn't represent the image aspect ratio..
            if (e.sqThumb) {
                // create img var to gather full size dimensions
                var img = new Image();
                img.src = target.attr("src");

                // get aspect ratio
                var ratio = img.height/img.width;
                // apply ratio
                zoomY = zoomY*ratio;
            }

            // this is the offset for the title
            var marginX = (zoomX-thumbX)/2;
            var marginY = (zoomY-thumbY)/2;

            // add z-index and optional shadow
            if (e.shadow) {target.addClass('quickZoom-hoverShadow');}
            target.css({'z-index':10});

            target.css({
                position: "fixed",
                top:10+"px",
                left:200+"px",                  
            })                      
            target.stop(true, false).animate({              
                width:zoomX+'px',
                height:zoomY+'px',              
            }, { 
                // This place for even which fire after animate.                    
            });
            IsFinishedFirstClick = true;
        }
        else
        {
            //this code for second click.                               
            var target = $(this);

            target.css({    
                position:"absolute",
                top:OriginalPictureTop+"px",
                left:OriginalPictureLeft+"px",                  
            })
            target.stop(true, false).animate({                  
                width: thumbX+'px',
                height: thumbY+'px',                    
            }, {
                duration: e.speedOut,
                easing: e.easeOut,
                complete: function() {
                    target.css({'z-index':1});
                }
            });

            target.removeClass('quickZoom-hoverShadow');
            target.css({'z-index':2});

            IsFinishedFirstClick = false;
            OriginalPictureTop = 0;
            OriginalPictureLeft = 0;                
        }
    });     
    }
})(jQuery);

Answer 1

Declare a global variable that is set when you run your zoom function then cleared when the user manually reduces the zoom. This way you can do a check when user clicks on zoom to see if the user has failed to manually reduce.

Apologies as I have not had chance to check this (currently on my lunch) but hopefully you get the gist of what I'm saying.

var zoomState; // Outside of the function to declare globally.

    $(document).ready(function() {          
        $('.OrignialImage').click(function() {

         if (zoomState != null) {
             // Auto decrease zoom.

         } else {

            $('.OriginalImage').quickZoom({
            zoom: 4,
            speedIn: 500,
            speedOut: 200,
            easeIn:'easeOutBack',
            titleInSpeed: 200       
        });   

           zoomState = $(this);  // Set zoomState.
        } // end if    
       });     

    });