jQuery(function($) { var $body = $('body'); var structureModal = {}; var modal = {}; var images; var ajaxLink; var curHeight; var linkTitle; var linkText; var activeImage; var animateSpeed = 200; var isIE6 = false; if (window.external && (typeof window.XMLHttpRequest == "undefined")) { isIE6 = true; } var element; $.fn.PwModal = function(settings) { if (!this) return false; element = this; init(); linkTitle = $(this).attr('title') ? $(this).attr('title') : ""; linkText = $(this).text() ? $(this).text() : ""; if ($(this).attr('rel')) { var list = $('[rel=' + $(this).attr('rel') + ']'); if (list.size() > 1) { modal.isGallery = true; } activeImage = list.index(this); var img = new Array(); $(list).each(function(){ var image = {}; image.preview = $(this).children('img').attr('src'); image.full = $(this).attr('href'); image.title = $(this).children('img').attr('alt'); img.push(image); }); images = img; } else { modal.isContent = true; ajaxLink = $(this).attr('href'); } createStructure(); return this; }; $.fn.PwModal.settings = {}; function init() { if (isIE6) { $("select").css({visibility:'hidden'}); $body.css({ height: $body.height()+'px', width: $body.width()+'px', position: 'static', overflow: 'hidden' }); $('html').css({overflow: 'hidden'}); } modal = { srtucture: {}, // структура окна ready: false, // false - окно не создано, true - окно создано isGallery: false, // false - контент, true - галерея isContent: false } $.fn.PwModal.settings = { startWidth: 480, //стартовая ширина startHeight: 480, //стартовая высота defaultWidth: 500, defaultHeight: 500, galleryHeight: (140/* + 36*/), //высота блока #pwModalThumb indent: 10 //отступ от края окна } } function createStructure() { if (modal.ready) { return; } $body.append( $( '
' + '
' + '
' + '
' + '

Фотографии

' + '
' + '
' + '
' + '
' + '
' + '
' + '' + '' + '
' + '' + '
 
' + 'Закрыть' + '
' + '
' ).hide() ); modal.structure = { full: $('#pwModalFull'), bg: $('#pwModalBg'), window: $('#pwModalWindow'), thumb: $('#pwModalThumb'), content: $('#pwModalContent'), loading: $('#pwModalLoading'), title: $('#pwModalTitle'), info: $('#pwModalInfo span'), next: $('#pwModalNext'), next2: $('#pwModalNext2'), prev: $('#pwModalPrev'), prev2: $('#pwModalPrev2'), close: $('#pwModalClose') }; if (modal.isGallery) { modal.structure.thumb.remove(); $.fn.PwModal.settings.galleryHeight = 0; } else { if (modal.isContent) { modal.structure.title.remove(); modal.structure.close.addClass("cnt-close"); } modal.structure.info.remove(); modal.structure.thumb.remove(); modal.structure.prev.remove(); modal.structure.prev2.remove(); modal.structure.next.remove(); modal.structure.next2.remove(); $.fn.PwModal.settings.galleryHeight = 0; } modal.structure.window.hide(); modal.ready = true; calcSize = calculateSize($.fn.PwModal.settings.startWidth, $.fn.PwModal.settings.startHeight); modal.structure.content .css({ width: calcSize.width + 'px', height: calcSize.height + 'px' }); /*if (modal.isGallery) { $('.photos-i', modal.structure.thumb) .animate({ width: calcSize.imgW, scrollLeft: ((((activeImage + 1) * 80) - 40) - Math.round(calcSize.imgW / 2)) }, animateSpeed); modal.structure.title .animate({ width: calcSize.imgW }, animateSpeed); }*/ modal.structure.window .css({ width: (calcSize.width + 18) + 'px', top: calcSize.top, left: calcSize.left }) .show(); modal.structure.full.fadeIn(300, function() { $(document).keyup(function(event){ if (event.keyCode == 27) { destruct(); } }); }); load(); if (modal.isGallery) { $("#pwModalPrev2").click(function() { $(modal.structure.prev).trigger('click'); }); $("#pwModalNext2").click(function() { $(modal.structure.next).trigger('click'); }); modal.structure.next .click(function(){ if (activeImage >= images.length - 1) { activeImage = -1; } activeImage++; showLoadingAndLoad(); return false; }); modal.structure.prev .click(function(){ if (activeImage <= 0) { activeImage = images.length; } activeImage--; showLoadingAndLoad(); return false; }); } $(modal.structure.close).click(destruct); $(modal.structure.bg).click(destruct); } function destruct() { $(modal.structure.window).fadeOut(300, function(){ if (isIE6) { $body.css({height: '', width: '', position: '', overflow: ''}); $('html').css({overflow: ''}); $("select").css({visibility:'visible'}); } $(modal.structure.full).remove(); $(document).unbind('keyup'); clearTimeout(window.autoClose); }); return false; } function load() { if (modal.isContent) { loadContent(); } else { selectImage(); loadImage(); } } function loadContent() { var queryString = ajaxLink.replace(/^[^\?]+\??/,''); var params = parseQuery(queryString); var modalWidth = params['width'] ? parseInt(params['width']) : $.fn.PwModal.settings.defaultWidth; var modalHeight = params['height'] ? parseInt(params['height']) : $.fn.PwModal.settings.defaultHeight; var modalTop = calculateTop(modalHeight); var modalLeft = calculateLeft(modalWidth); $.get( ajaxLink, {}, function(response) { modal.structure.window .animate({ width: modalWidth, height: modalHeight + 25, top: modalTop, left: modalLeft }, animateSpeed); modal.structure.content .append(response) .animate({ width: modalWidth, height: modalHeight }, animateSpeed, function(){ modal.structure.loading.fadeOut(); $(element).trigger('pwModalAfterLoad'); }); } ); } function loadImage() { modal.structure.title.html(' '); var loadImg = new Image(); loadImg.onload = function() { loadImg.onload = null; $('img', modal.structure.content).remove(); calcSize = calculateSize(loadImg.width, loadImg.height); loadImg.width = calcSize.imgW; loadImg.height = calcSize.imgH; loadImg.alt = images[activeImage].title ? images[activeImage].title : linkText; if (loadImg.alt) { modal.structure.title .html("" + loadImg.alt + "") .show(); if(linkTitle) { modal.structure.title .append("
" + linkTitle + ""); } } else { modal.structure.title.html(' '); } modal.structure.info.html("Изображение " + parseInt(activeImage + 1) + " из " + images.length); if(modal.structure.info.height() > 0) { var infoHeight = modal.structure.info.height() + 31; } else { var infoHeight = 0; } modal.structure.window .animate({ width: calcSize.width, height: (calcSize.height + $.fn.PwModal.settings.galleryHeight + modal.structure.title.height() + infoHeight), top: calcSize.top, left: calcSize.left }, animateSpeed); $('.photos-i', modal.structure.thumb) .animate({ width: calcSize.imgW, scrollLeft: ((((activeImage + 1) * 80) - 40) - Math.round(calcSize.imgW / 2)) }, animateSpeed); modal.structure.content .animate({ width: calcSize.width, height: calcSize.height }, animateSpeed, function(){ $(this).prepend(loadImg); modal.structure.loading.fadeOut(animateSpeed); $(element).trigger('pwModalAfterLoad'); }); } loadImg.src = images[activeImage].full; } function setImage() { var list = $('a', modal.structure.thumb); activeImage = list.index(this); showLoadingAndLoad(); return false; } function selectImage() { var list = modal.structure.thumb.find('a'); list.removeClass('actived'); list.eq(activeImage).addClass('actived'); } function showLoadingAndLoad() { selectImage(); modal.structure.loading.fadeIn(600, function(){ loadImage(); }); } function calculateSize(imageWidth, imageHeight) { var windowWidth = $(window).width() - ($.fn.PwModal.settings.indent * 2); // минус отступы от краев; var windowHeight = $(window).height() - ($.fn.PwModal.settings.indent * 2); // минус отступы от краев; windowHeight -= modal.structure.title.height(); //console.log('titleHeight: ' + modal.structure.title.height()); var calcSize = { top: 0, left: 0, width: 0, height: 0, imgW: 0, imgH: 0, scroll: 0 } var navLinkWidth = 0; /*if (modal.isGallery) { windowHeight -= $.fn.PwModal.settings.galleryHeight; //console.log('galleryHeight: ' + $.fn.PwModal.settings.galleryHeight); }*/ //console.log('window(w,h): ' + windowWidth + ', ' + windowHeight); if (imageWidth > windowWidth && imageHeight < windowHeight) { calcSize.width = windowWidth; calcSize.height = Math.round((calcSize.width * imageHeight) / imageWidth); } if (imageWidth < windowWidth && imageHeight > windowHeight) { calcSize.height = windowHeight; calcSize.width = Math.round((imageWidth * calcSize.height) / imageHeight); } if (imageWidth < windowWidth && imageHeight < windowHeight) { calcSize.width = imageWidth; calcSize.height = imageHeight; } if (imageWidth > windowWidth && imageHeight > windowHeight) { if ((windowWidth - imageWidth) < (windowHeight - imageHeight)) { calcSize.width = windowWidth; calcSize.height = Math.round((calcSize.width * imageHeight) / imageWidth); } else { calcSize.height = windowHeight; calcSize.width = Math.round((imageWidth * calcSize.height) / imageHeight); } } calcSize.imgH = Math.round(((calcSize.width - navLinkWidth) * calcSize.height) / calcSize.width); calcSize.imgW = calcSize.width - navLinkWidth; calcSize.height = calcSize.imgH; var tmpImgHeight = calcSize.height; /*if (modal.isGallery) { tmpImgHeight += $.fn.PwModal.settings.galleryHeight; }*/ tmpImgHeight += modal.structure.title.height() + 18; calcSize.top = calculateTop(tmpImgHeight); calcSize.left = calculateLeft(calcSize.width); return calcSize; } function calculateTop(height) { var extraHeight = 0; if (isIE6) { extraHeight = $(window).scrollTop(); } if (typeof window.innerWidth != 'undefined') { curHeight = window.innerHeight; } else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) { curHeight = document.documentElement.clientHeight; } return Math.round(((curHeight - height) / 2) + extraHeight) - 9; } function calculateLeft(width) { var extraWidth = 0; if (isIE6) { extraWidth = $(window).scrollLeft(); } return Math.round((($(window).width() - width) / 2) + extraWidth) - 9; } function parseQuery (query) { var params = {}; if (!query) {return params;}// return empty object var pairs = query.split(/[;&]/); for (var i = 0; i < pairs.length; i++) { var keyVal = pairs[i].split('='); if (!keyVal || keyVal.length != 2 ) { continue; } var key = unescape( keyVal[0] ); var val = unescape( keyVal[1] ); val = val.replace(/\+/g, ' '); params[key] = val; } return params; } }); $(function(){ $('.PwModal').click(function(){ $(this).PwModal(); return false; }); });