Главная
>>
Каталог задач
>>
Веб-разработка
>>
Клиентский скриптинг(js, vba и т.д.)
>>
popup ("всплывающие") динамические окна
>>
Просмотр изображения во всплывающем окне
Aвтор:
this
Дата:
24.12.2006
Просмотров: 90960
реализации(javascript: 1шт...)
+добавить
Для многих изображений, публикуемых на сайте, очень часто нужно обеспечить просмотр этой картинки в увеличенном(полном) размере. 2 основных пути для достижения этого - открытие дополнительного popup окна и динамическая вставка новой большой картинки вместо старой(с растяжением дизайна страницы либо без него - поверх)
Здесь рассматривается первый вариант, т.е. дополнительное popup-окно. Очень часто в этом случае создается, верстается дополнительная html-страница, содержащая минимальный код с этим тегом img отображающим большую картинку. Довольно трудоемкий и сложный для последующей поддержки способ: для любой картинки необходимо создавать новую страницу, и при любом изменении изображения менять приходится обычно в нескольких местах.
Поскольку существует возможность непосредственно из javascript-а задать содержимое (html-код) этого popup окна - то можно легко избавится от всех этих недостатков.
А именно - создаем специальную функцию, по-интерфейсу схожую с window.open (чтобы легче запоминалась), которой вместо url документа - будет задаваться адрес картинки. Далее эта функция сама будет создавать этот примитивный html-код, требуемый для отображения этой картинки.
+ Попутно было бы неплохо обеспечить этот popup и другими некоторыми удобствами как: автоматическое подстраивание под размер картинки, центрирование по центру экрана, закрытие по клику и т.д.
Реализации:
javascript(1)
+добавить
1)
Просмотр изображения во всплывающем окне на javascript, code #192[автор:this]
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>