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.So1) 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.
\[code\]<script type="text/javascript" src="http://stackoverflow.com/questions/7686212/jquery-1.6.4.js"></script><script type="text/javascript" src="http://stackoverflow.com/questions/7686212/jquery.easing.1.3.js"></script><script type="text/javascript" src="http://stackoverflow.com/questions/7686212/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>\[/code\]..................\[code\].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;}\[/code\]..................\[code\]<table border="1" height="1000px" cellpadding="0" cellspacing="0"> <tr class="HtmlTableHeight" ><td><img src="http://stackoverflow.com/questions/7686212/images/C003.jpg" alt="title" class="OrignialImage" /></td></tr> <tr class="HtmlTableHeight" ><td><img src="http://stackoverflow.com/questions/7686212/images/C003_2.jpg" alt="title" class="OrignialImage" /></td></tr> <tr class="HtmlTableHeight" ><td><img src="http://stackoverflow.com/questions/7686212/images/C003_3.jpg" alt="title" class="OrignialImage" /></td></tr> <tr class="HtmlTableHeight" ><td><img src="http://stackoverflow.com/questions/7686212/images/C003_4.jpg" alt="title" class="OrignialImage" /></td></tr> <tr class="HtmlTableHeight" ><td><img src="http://stackoverflow.com/questions/7686212/images/C003.jpg" alt="title" class="OrignialImage" /></td></tr> <tr class="HtmlTableHeight" ><td><img src="http://stackoverflow.com/questions/7686212/images/C003_3.jpg" alt="title" class="OrignialImage" /></td></tr> </table>\[/code\]..................\[code\]/* * quickZoom 0.1.0 - JavaScript Image viewer * Copyright (c) 2011 Louis Sawtell, [email protected], 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 = http://stackoverflow.com/questions/7686212/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);\[/code\]
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.So1) 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.
\[code\]<script type="text/javascript" src="http://stackoverflow.com/questions/7686212/jquery-1.6.4.js"></script><script type="text/javascript" src="http://stackoverflow.com/questions/7686212/jquery.easing.1.3.js"></script><script type="text/javascript" src="http://stackoverflow.com/questions/7686212/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>\[/code\]..................\[code\].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;}\[/code\]..................\[code\]<table border="1" height="1000px" cellpadding="0" cellspacing="0"> <tr class="HtmlTableHeight" ><td><img src="http://stackoverflow.com/questions/7686212/images/C003.jpg" alt="title" class="OrignialImage" /></td></tr> <tr class="HtmlTableHeight" ><td><img src="http://stackoverflow.com/questions/7686212/images/C003_2.jpg" alt="title" class="OrignialImage" /></td></tr> <tr class="HtmlTableHeight" ><td><img src="http://stackoverflow.com/questions/7686212/images/C003_3.jpg" alt="title" class="OrignialImage" /></td></tr> <tr class="HtmlTableHeight" ><td><img src="http://stackoverflow.com/questions/7686212/images/C003_4.jpg" alt="title" class="OrignialImage" /></td></tr> <tr class="HtmlTableHeight" ><td><img src="http://stackoverflow.com/questions/7686212/images/C003.jpg" alt="title" class="OrignialImage" /></td></tr> <tr class="HtmlTableHeight" ><td><img src="http://stackoverflow.com/questions/7686212/images/C003_3.jpg" alt="title" class="OrignialImage" /></td></tr> </table>\[/code\]..................\[code\]/* * quickZoom 0.1.0 - JavaScript Image viewer * Copyright (c) 2011 Louis Sawtell, [email protected], 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 = http://stackoverflow.com/questions/7686212/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);\[/code\]