/** * Popup Image Gallery (PIG) v1.03 * Requirements: jquery.js,v 1.6 2006/12/23 21:46:35 * How to use: * 1. load this script and jquery.js on a page * 2. make that:

{all content here}

* 3. set class="popup" for needed images in html * 4. click on this images for view results * * Script also support thumb.php, where image URL like "path/thumb.php?filename=path_to_image&size=..." * Author: Andrey Sapegin, http://www.andreysapegin.com, dear@andreysapegin.com **/ function popup_preview(img) { // turn off all flashes (for performance) /* $("object").css("visibility", "hidden"); $("embed").css("visibility", "hidden"); */ // at first time if ($('#popup_bg').length == 0) { $("body").prepend(""); $("body").prepend(""); $('#popup_bg').fadeTo(1, 0, function () { $('#popup_bg').css("background-color", "#000"); $('#popup_bg').css("position", "absolute"); $('#popup_bg').css("top", "0"); $('#popup_bg').css("left", "0"); $('#popup_bg').css("z-index", "2000"); $('#popup_bg').css("cursor", "pointer"); $('#popup_img').css("position", "absolute"); $('#popup_img').css("z-index", "2001"); $('#popup_img').css("color", "#666"); $('#popup_img').css("text-align", "center"); $('#popup_img').css("cursor", "pointer"); $('#popup_bg').css("display", "block"); $('#popup_img').css("display", "block"); }); } // calc size of background shadow if ( $("#popup_container").height() == null ) { height_max = Math.max($("html").height(), $(".wrapper").height()); } else { height_max = Math.max($("html").height(), $("#popup_container").height()); } $('#popup_bg').height( height_max + "px" ); // stupid IE :( if ($.browser.msie) { $('#popup_bg').width( $("html").width() - 21 + "px" ); $('#popup_img').width( $("html").width() - 21 + "px" ); } else { $('#popup_bg').width( $("html").width() + "px" ); $('#popup_img').width( $("html").width() + "px" ); } // position of image var obj = img.offsetParent; offsetTop = img.offsetTop + obj.offsetTop; while (obj != null && obj.tagName != "BODY") { lastOffset = obj.offsetTop offsetTop += lastOffset; obj = obj.offsetParent; } offsetTop -= lastOffset; // waiting for loading... $('#popup_img').css( "top", "-5000px"); //top + "px" ); $('#popup_bg').fadeTo("slow", 0.8, function () { popup_show_img(img, offsetTop); }); } function popup_show_img(img, offsetTop) { // thump.php here // pattern = /.*filename=([^&]*)&size.*/; pattern = /(.*)thumb\([^\)]+\)(.*)/; var src = $(img).attr('src').match(pattern); if (src != null && src.length>1) // #! src = src[1]; // src = '/thumb.php?filename='+src[1]+'&size=640x600'; src = ''+src[1]+'thumb(pig)'+src[2]; else src = $(img).attr('src'); // show image $('#popup_img').css( "top", offsetTop + "px" ); $("#popup_img").html('

Загрузка изображения...

'); $("#popup_img").append(' '+ ($(img).attr('alt')!=null ? $(img).attr('alt') :

'+ ($(img).attr('alt')!=null ? $(img).attr('alt') :

'); $("#popup_img img").load( function () { $("#popup_img p").remove(); $('#popup_img img').css('padding', '1px'); $('#popup_img img').css('background-color', '#666'); $('#popup_img img').css('color', '#000'); $('#popup_img img').css('border', '20px solid #fff'); $('#popup_img img').css('cursor', 'pointer'); $('#popup_img img').css('visibility', 'visible'); if ( $('#popup_bg').css('display') == 'none' ) { $('#popup_img').html(''); } else { // now we show image, but opened image may be larger than we think before var top = offsetTop - $("#popup_img img").height(); top = Math.max(top, 300); $('#popup_img').css( "top", top + "px" ); if ( $('#popup_bg').height() < ($('#popup_img').height() + top) ) $('#popup_bg').height( $('#popup_img').height() + top + "px" ); if ( $('#popup_bg').height() < $('html').height() ) $('#popup_bg').height( $('html').height() + "px" ); } }); } function popup_hide() { $('#popup_img').html(''); $('#popup_bg').fadeTo("slow", 0, function () { $('#popup_bg').hide() $('#popup_img').html(''); // turn on all flashes /* $("object").css("visibility", "visible"); $("embed").css("visibility", "visible"); */ }); } // onload startup $(function () { $("img.popup").each( function(i) { $(this).click(function () { popup_preview(this) }); $(this).css('cursor', 'pointer'); }); });