Просмотр изображения во всплывающем окне

Просмотр изображения во всплывающем окне

Aвтор:this
Дата: 24.12.2006
Просмотров: 94170
реализации(javascript: 1шт...) +добавить

Для многих изображений, публикуемых на сайте, очень часто нужно обеспечить просмотр этой картинки в увеличенном(полном) размере. 2 основных пути для достижения этого - открытие дополнительного popup окна и динамическая вставка новой большой картинки вместо старой(с растяжением дизайна страницы либо без него - поверх)

Здесь рассматривается первый вариант, т.е. дополнительное popup-окно. Очень часто в этом случае создается, верстается дополнительная html-страница, содержащая минимальный код с этим тегом img отображающим большую картинку. Довольно трудоемкий и сложный для последующей поддержки способ: для любой картинки необходимо создавать новую страницу, и при любом изменении изображения менять приходится обычно в нескольких местах.

Поскольку существует возможность непосредственно из javascript-а задать содержимое (html-код) этого popup окна - то можно легко избавится от всех этих недостатков.

А именно - создаем специальную функцию, по-интерфейсу схожую с window.open (чтобы легче запоминалась), которой вместо url документа - будет задаваться адрес картинки. Далее эта функция сама будет создавать этот примитивный html-код, требуемый для отображения этой картинки.

+ Попутно было бы неплохо обеспечить этот popup и другими некоторыми удобствами как: автоматическое подстраивание под размер картинки, центрирование по центру экрана, закрытие по клику и т.д.

Реализации:

javascript(1) +добавить

1) Просмотр изображения во всплывающем окне на javascript, code #192[автор:this]

Открытие изображения во всплывающем popup окне, центрирование, масштабирование, кроссбраузерность ссылка |режим:

function OpenImagePopup(imgPath, title, alt) {
    var win = window.open('','preview',
    'width=50,height=50,left=0,top=0,screenX=0,screenY=0,resizable=1,scrollbar=0,status=0');
 
    var winDoc = win.document;
    if (title == undefined) title = 'My Image, Click to Close';
    if (alt   == undefined) alt   = 'My Image, Click to Close';
    var content = '<html><head><title>' + title + '</title>' +
    			  '<style>body{overflow: hidden;margin:0;}img{border:0;}</style>' +
    			  '</head><body><a href="javascript:self.close()">' +
    			  '<img alt="' + alt + '" id="image" src="' + imgPath + '" /></a></body></html>'
    win.document.write(content);
 
    winDoc.body.onload = function() {
    	var obj = winDoc.getElementById('image');
    	var w = obj.width, h = obj.height;
    	var iHeight= document.body.clientHeight, iWidth = self.innerWidth;
 
    	var left = (self.opera ? iWidth : screen.availWidth)/2 - w/2;
    	var top =  (self.opera ? iHeight : screen.availHeight)/2 - h/2;
    	win.resizeTo(w+10, h+26);
    	win.moveTo(left, top);
    }
 
    win.onload = winDoc.body.onload; // special for Mozilla
 
    // !!! Important statement: popup onload won't execute without it!
    win.document.close();
    win.focus();
}
 
// ......
// Example:
<a href="javascript:void(0);" onclick="return OpenImagePopup('./1.jpg', 'Поле', 'Закрыть');">view</a>

function OpenImagePopup(imgPath, title, alt) {
    var win = window.open('','preview',
    'width=50,height=50,left=0,top=0,screenX=0,screenY=0,resizable=1,scrollbar=0,status=0');
    
    var winDoc = win.document;
    if (title == undefined) title = 'My Image, Click to Close';
    if (alt   == undefined) alt   = 'My Image, Click to Close';
    var content = '<html><head><title>' + title + '</title>' +
    			  '<style>body{overflow: hidden;margin:0;}img{border:0;}</style>' +
    			  '</head><body><a href="javascript:self.close()">' +
    			  '<img alt="' + alt + '" id="image" src="' + imgPath + '" /></a></body></html>'
    win.document.write(content);
    
    winDoc.body.onload = function() {
    	var obj = winDoc.getElementById('image');
    	var w = obj.width, h = obj.height;
    	var iHeight= document.body.clientHeight, iWidth = self.innerWidth;
    	
    	var left = (self.opera ? iWidth : screen.availWidth)/2 - w/2;
    	var top =  (self.opera ? iHeight : screen.availHeight)/2 - h/2;
    	win.resizeTo(w+10, h+26);
    	win.moveTo(left, top);
    }
    
    win.onload = winDoc.body.onload; // special for Mozilla
    
    // !!! Important statement: popup onload won't execute without it!
    win.document.close();
    win.focus();
}

// ......
// Example:
<a href="javascript:void(0);" onclick="return OpenImagePopup('./1.jpg', 'Поле', 'Закрыть');">view</a>

Открывает popup, загружает в нем изображение, масштабирует окно под размеры картинки, центрирует под разрешение монитора.
imgPath - url картинки
title - заголовок окна
alt - всплывающая подсказка при наведении на изображение

При клике на изображение - происходит закрытие окна.

Пример(*.rar) - картинка + простенькая страница демонстрации использования (~16kb)

Тестировалось на: IE 6.0 SP2, Mozilla FF 1.5, Opera 9.0

<< назад наверх

*	можно кириллицей (недопустимые символы:?&+=\/%#)
**	только для зарегистрированных пользователей

Популярные задачи:

Просмотр изображения во всплывающем окне

Реализации: