Открываем картинку в новом окне
Сейчас существуют довольно красивые решения, как например Lightbox, где в одном и том же окне браузера реализуется просмотр больших картинок по щелчку на маленькую картинку предпросмотра с помощью JavaScript.
Но что делать, когда в основном контенте маячит здоровенная флешина или select (в IE), перекрывая всю эту красоту. Приходится по старинке открывать картинку в новом окне или наплевав на валидность при помощи атрибута target="_blank" или открывая скриптом новое окно.
Хорошо бы еще сделать чтобы окно браузера автоматически уменьшалось до размеров картинки. Решением этой задачи мы сейчас и займемся.
Первым шагом расставим события на анкеры, которые открывают большие картинки. Для этого нам нужно в них установить какой-нть признак, чтобы отличать их от других гиперссылок, в нашем примере я буду использовать атрибут rel="...", как это сделано в Lightbox или в качестве альтернативы можно использовать атрибут class="...".
<html>
<head>
<script type="text/jscript">
function newWindow(){ //открывает новое окно с большой картинкой
var win=window.open(
'img.html?'+escape(this),
'win',
'resizable,width=400,height=200,screenX=0,screenY=0,top=0,left=0'
);
win.focus();
return false;
}
function setEvents(){/* устанавливаем события для открытия больших картинок в новом окне */
var anchors = document.getElementsByTagName("a");
for(var i=0; i<anchors.length; i++){
if(anchors[i].getAttribute("href") && (anchors[i].getAttribute("rel")=="newwindow"))
anchors[i].onclick=newWindow;
}
}
/* запускаем setEvents после загрузки документа */
if(typeof document.attachEvent!='undefined') window.attachEvent('onload',setEvents);
else window.addEventListener('load',setEvents,false);
</script>
</head>
<body>
<a href="image1_big.jpg" rel="newwindow"><img src="image1.jpg" alt="" /></a><br />
<a href="image2_big.jpg" rel="newwindow"><img src="image2.jpg" alt="" /></a><br />
<a href="image3_big.jpg" rel="newwindow"><img src="image3.jpg" alt="" /></a>
</body>
</html>
Все, картинки с сылками на большие готовы, события для них установлены, займемся теперь окном, которое будет открывать. Создадим файл img.html, примерно такого содержания:
<html>
<head>
<style type=text/css>
body,img{margin:0px;padding:0px;border:0px;text-align:center;vertical-align:middle;}
</style>
<script type="text/javascript">
var img;
function adjustWin(){
if(img.complete){
document.images[0].src = img.src;
resizeTo(document.images[0].width+30,document.images[0].height+47)
if(!document.images[0].timer_id) window.clearInterval(document.images[0].timer_id);
}else if(!document.images[0].timer_id){
document.images[0].timer_id = window.setInterval('adjustWin();',100);
}
}
function onWinLoad(){
resizeTo(400,300);
var l=location.search;
if(l.length>1){
img=new Image;
img.src=unescape(location.search.substring(1,location.search.length));
}else {window.close();}
adjustWin();
}
if (typeof document.attachEvent!='undefined') window.attachEvent('onload',onWinLoad);
else window.addEventListener('load',onWinLoad,false);
</script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<img src="images/loading.gif" alt="Идет загрузка картинки" />
</body>
</html>Смысл этого скрипта заключается в следующем. Когда окно открывается там показывается анимированный гиф символизирующий загрузку картинки, одновременоо с этим делается прелоад большой картинки и как только она загружается мы ее вставляем на место этого гифа.
Посмотреть пример работы скрипта
