/*** @title: Image Zoom @version: 2.0 @author: Andreas Lagerkvist @date: 2008-08-31 @url: http://andreaslagerkvist.com/jquery/image-zoom/ @license: http://creativecommons.org/licenses/by/3.0/ @copyright: 2008 Andreas Lagerkvist (andreaslagerkvist.com) @requires: jquery, jquery.imageZoom.css, jquery.imageZoom.png @does: This plug-in makes links pointing to images open in the "Image Zoom". Clicking a link will zoom out the clicked image to its target-image. Click anywhere on the image or the close-button to zoom the image back in. Only ~3k minified. @howto: jQuery(document.body).imageZoom(); Would make every link pointing to an image in the document open in the zoom. @exampleHTML: @exampleJS: // I don't run it because my site already uses imgZoom // jQuery(document.body).imageZoom(); ***/ jQuery.fn.imageZoom = function (conf) { // Some config. If you set dontFadeIn: 0 and hideClicked: 0 imgzoom will act exactly like fancyzoom var config = jQuery.extend({ speed: 200, // Animation-speed of zoom dontFadeIn: 1, // 1 = Do not fade in, 0 = Do fade in hideClicked: 1, // Whether to hide the image that was clicked to bring up the imgzoom imageMargin: 50, // Margin from image-edge to window-edge if image is larger than screen className: 'jquery-image-zoom', loading: '' }, conf); config.doubleSpeed = config.speed / 4; // Used for fading in the close-button return this.click(function(e) { // Make sure the target-element is a link (or an element inside a link) var clickedElement = jQuery(e.target); // The element that was actually clicked var clickedLink = clickedElement.is('a') ? clickedElement : clickedElement.parents('a'); // If it's not an a, check if any of its parents is clickedLink = (clickedLink && clickedLink.is('a') && clickedLink.attr('href').search(/(.*)\.(jpg|jpeg|gif|png|bmp|tif|tiff)$/gi) != -1) ? clickedLink : false; // If it was an a or child of an a, make sure it points to an image var clickedImg = (clickedLink && clickedLink.find('img').length) ? clickedLink.find('img') : false; // See if the clicked link contains and image //clickedElement.css('background','url(http://ohplay.net/media/ajax-loader.gif) no-repeat scroll 0 0 transparent'); clickedElement.addClass('loading'); // Only continue if a link pointing to an image was clicked if (clickedLink) { // These functions are used when the imaeg starts and stops loading (displays either 'loading..' or fades out the clicked img slightly) clickedLink.oldText = clickedLink.text(); clickedLink.setLoadingImg = function () { if (clickedImg) { clickedImg.css({opacity: '0.5'}); } else { clickedLink.text(config.loading); } }; clickedLink.setNotLoadingImg = function () { if (clickedImg) { clickedImg.css({opacity: '1'}); } else { clickedLink.text(clickedLink.oldText); } }; // The URI to the image we are going to display var displayImgSrc = clickedLink.attr('href'); // If an imgzoom wiv this image is already open dont do nathin if (jQuery('div.' + config.className + ' img[src="' + displayImgSrc + '"]').length) { return false; } // This function is run once the displayImgSrc-img has loaded (below) var preloadOnload = function () { // The clicked-link is faded out during loading, fade it back in clickedLink.setNotLoadingImg(); clickedElement.removeClass('loading'); // Now set some vars we need var dimElement = clickedImg ? clickedImg : clickedLink; // The element used to retrieve dimensions of imgzoom before zoom (either clicked link or img inside) var hideClicked = clickedImg ? config.hideClicked : 0; // Whether to hide clicked link (set in config but always true for non-image-links) var offset = jQuery('div#imageholder img').offset();//dimElement.offset(); // Offset of clicked link (or image inside) var imgzoomBefore = { // The dimensions of the imgzoom _before_ it is zoomed out width: jQuery('div#imageholder img').outerWidth()+10, //dimElement.outerWidth(), height: jQuery('div#imageholder img').outerHeight()+10, //dimElement.outerHeight(), left: Math.floor(offset.left), top: Math.floor(offset.top)/*, opacity: config.dontFadeIn*/ }; var imgzoom = jQuery('
').css('position', 'absolute').appendTo(document.body); // We don't want any class-name or any other contents part from the image when we calculate the new dimensions of the imgzoom var imgzoomAfter = { // The dimensions of the imgzoom _after_ it is zoomed out width: imgzoom.outerWidth(), height: imgzoom.outerHeight() }; var windowDim = { width: jQuery(window).width(), height: jQuery(window).height() }; // Make sure imgzoom isn't wider than screen if (imgzoomAfter.width > (windowDim.width - config.imageMargin)) { var nWidth = windowDim.width - config.imageMargin; imgzoomAfter.height = (nWidth / imgzoomAfter.width) * imgzoomAfter.height; imgzoomAfter.width = nWidth; } // Now make sure it isn't taller /* if (imgzoomAfter.height > (windowDim.height - config.imageMargin * 2)) { var nHeight = windowDim.height - config.imageMargin * 2; imgzoomAfter.width = (nHeight / imgzoomAfter.height) * imgzoomAfter.width; imgzoomAfter.height = nHeight; } */ if (imgzoomAfter.height > (windowDim.height - (config.imageMargin+75))) { var nHeight = windowDim.height - (config.imageMargin+75); imgzoomAfter.width = (nHeight / imgzoomAfter.height) * imgzoomAfter.width; imgzoomAfter.height = nHeight; } // Center imgzoom imgzoomAfter.left = (windowDim.width - imgzoomAfter.width) / 2 + jQuery(window).scrollLeft(); //imgzoomAfter.top = (windowDim.height - imgzoomAfter.height) / 2 + jQuery(window).scrollTop(); //imgzoomAfter.left = Math.floor(offset.left); imgzoomAfter.top = Math.floor(offset.top); //var closeButton = jQuery('Close').appendTo(imgzoom).hide(); // The button that closes the imgzoom (we're adding this after the calculation of the dimensions) // Hide the clicked link if set so in config if (hideClicked) { clickedLink.hide(); } var imgwrap = jQuery('
').appendTo(document.body).css("height",jQuery(window).height()-60+"px").fadeIn('fast'); // Now animate the imgzoom from its small size to its large size, and then fade in the close-button //jQuery('body').css('overflow','hidden'); imgzoom.addClass(config.className).css(imgzoomBefore).animate(imgzoomAfter, config.speed); // This function closes the imgzoom var hideImgzoom = function () { imgwrap.fadeOut("fast",function(){$(this).remove();}); imgzoom.animate(imgzoomBefore, config.speed, function () { clickedLink.show(); imgzoom.remove(); $('div#content-wrapper').unbind("click"); $('#ohplay').bind("click",returnhome); changeTitle(0); //jQuery('body').css('overflow','auto'); }); return false; }; // Close imgzoom when you click the closeButton or the imgzoom changeTitle(1); imgzoom.click(hideImgzoom); imgwrap.click(hideImgzoom); $('div#content-wrapper').click(hideImgzoom); $('#ohplay').unbind("click"); }; // Preload image var preload = new Image(); preload.src = displayImgSrc; if (preload.complete) { preloadOnload(); } else { clickedLink.setLoadingImg(); preload.onload = preloadOnload; } // Finally return false from the click so the browser doesn't actually follow the link... return false; } }); };