Con questo script di semplice implementazione potremo permettere un'ingrandimento delle immagini alla loro reale dimensione semplicemente cliccandovi sopra.
Basterà inserire prima della chiusura del head il codice come riportato sotto e inserire ad ogni immagine che vorremo dotare di questa funzionalità del tag class Flyout.
A destra potrete trovare il download edell'esempio completo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Zoom Foto</title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
<!--
/* jQuery.FlyOut.js - author: Jolyon Terwilliger - Nixbox Web Designs */
$.fn.extend({flyout:function(m){var j=false;var n=false;var c;var l;var d;var a;var g;var h=new Image();var k="img";var f;this.click(function(){if(n==true){return false}if(j){e(this)}else{i(this)}return false});var b=jQuery.extend({outSpeed:1000,inSpeed:500,outEase:"swing",inEase:"swing",loadingSrc:null,loader:"loader",loaderZIndex:500,widthMargin:40,heightMargin:40,loadingText:"Loading...",closeTip:" - Click here to close",destPadding:20,startOffsetX:0,startOffsetY:0,startHeight:0,startWidth:0,flyOutStart:function(){},flyOutFinish:function(){},putAwayStart:function(){},putAwayFinish:function(){},shownClass:"shown"},m);function i(o){n=true;c=$(o);l=$("img",o);h=new Image();sL=$(window).scrollLeft();sT=$(window).scrollTop();d=l.offset();d.left+=b.startOffsetX;d.top+=b.startOffsetY;a=(b.startHeight>0?b.startHeight:l.height());g=(b.startWidth>0?b.startWidth:l.width());$("<div></div>").attr("id",b.loader).appendTo("body").css({position:"absolute",top:d.top,left:d.left,height:a,width:g,opacity:0.5,display:"block","z-index":b.loaderZIndex});if(b.loadingSrc){$("#"+b.loader).append($("<img/>").load(function(){$(this).css({position:"relative",top:a/2-(this.height/2),left:g/2-(this.width/2)}).attr("alt",b.loadingText)}).attr("src",b.loadingSrc))}else{$("#"+b.loader).css("background-color","#000").append($("<span></span>").text(b.loadingText).css({position:"relative",top:"2px",left:"2px",color:"#FFF","font-size":"9px"}))}$(h).load(function(){imgtag=$("<img/>").attr("src",c.attr("href")).attr("title",l.attr("title")+b.closeTip).attr("alt",l.attr("alt")+b.closeTip).height(a).width(g);b.flyOutStart.call(o);if(b.destElement){var p=$(b.destElement);max_x=p.innerWidth()-(b.destPadding*2);max_y=p.innerHeight()-(b.destPadding*2)}else{max_x=$(window).width()-b.widthMargin;if($.browser.opera){wh=document.getElementsByTagName("html")[0].clientHeight}else{wh=$(window).height()}max_y=wh-b.heightMargin}width=h.width;height=h.height;x_dim=max_x/width;y_dim=max_y/height;if(x_dim<=y_dim){y_dim=x_dim}else{x_dim=y_dim}dw=Math.round(width*x_dim);dh=Math.round(height*y_dim);if(dw>width){dw=width}if(dh>height){dh=height}if(b.destElement){dPos=p.offset();dl=Math.round((p.outerWidth()/2)-(dw/2)+dPos.left);dt=Math.round((p.outerHeight()/2)-(dh/2)+dPos.top)}else{dl=Math.round(($(window).width()/2)-(dw/2)+sL);if($.browser.opera){wh=document.getElementsByTagName("html")[0].clientHeight}else{wh=$(window).height()}dt=Math.round((wh/2)-(dh/2)+sT)}$("#"+b.loader).empty().css("opacity",1).append(imgtag).width("auto").height("auto").animate({top:dt,left:dl},{duration:b.outSpeed,queue:false,easing:b.outEase});$("#"+b.loader+" "+k).animate({height:dh,width:dw},b.outSpeed,b.outEase,function(){b.flyOutFinish.call(o);j=o;c.addClass(b.shownClass);n=false;$("#"+b.loader+" "+k).click(function(){e(null)})})});h.src=c.attr("href")}function e(o){if(n==true||j==false){return false}b.putAwayStart.call(j);n=true;d=l.offset();d.left+=b.startOffsetX;d.top+=b.startOffsetY;$("#"+b.loader).animate({top:d.top,left:d.left},{duration:b.inSpeed,queue:false,easing:b.inEase});$("#"+b.loader+" "+k).animate({height:a,width:g},b.inSpeed,b.inEase,function(){$("#"+b.loader).css("display","none").remove();b.putAwayFinish.call(j);n=false;h=null;if(o&&o!=j){j=false;i(o)}j=false;c.removeClass(b.shownClass)})}return this}});
$(document).ready(function(){$('.flyout').flyout();});
//-->
</script>
</head>
<body>
<a href="fotoesempio.jpg" title="fotoesempio" class="flyout"><img src="fotoesempio.jpg" alt="fotoesempio" width="200" height="120"></a>
</body>
</html>
