Как подогнать размер всплывающих окон браузеров под размер показываемого изображения? Сегодня задался именно таким вопросом и наклепал работающий в Mozilla Firefox и в Internet Explorer скрипт.
Я бы хотел отметить один нюанс, который нужно учесть для работоспособности скрипта в Internet Explorer. Если задать DOCTYPE отличный от "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN>" то document.body.ClientHeight возвращает размер изображения вместо размера окна браузера, в результате высота окна не меняется. Функции img_popup() передается URL изображения.function img_popup (image_path) {
var ph = window.open("", "popup_img", "location=0,toolbar=0,resize=0,status=0,scrollbars=0");
ph.document.write('<'+'!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"'+'>');
ph.document.write('<'+'html'+'>');
ph.document.write('<'+'head'+'><'+'title'+'><'+'/title'+'>');
ph.document.write('<'+'style type="text/css"'+'>body { text-align: center; margin: 0px; padding: 0px; }<'+'/style'+'>');
ph.document.write('<'+'script language="javascript" type="text/javascript"'+'>');
ph.document.write('window.onload = function ()');
ph.document.write('{ var a_img = document.getElementById("auto_img");');
ph.document.write('var NS = (navigator.appName == "Netscape") ? true : false;');
ph.document.write(
'if (a_img && NS) '
+'{ window.resizeTo(a_img.width + window.outerWidth - window.innerWidth, '
+'a_img.height + window.outerHeight - window.innerHeight); }'
);
ph.document.write(
'else { '
+ 'var x_ = a_img.width - document.body.clientWidth;'
+ 'var y_ = a_img.height - document.body.clientHeight;'
+ 'window.resizeBy(x_, y_);'
+ '}}'
);
ph.document.write('<'+'/script'+'><'+'/head'+'>');
ph.document.write(
'<'+'body'+'><'+'img id="auto_img" '
+'src=' + image_path + '" '
+'border="0" align="center" /'+'><'+'/body'+'><'+'/html'+'>'
);
ph.document.close();
}
Ссылки пишутся примерно так:<a href="/path/to/big_image.jpg" onClick="img_popup('/path/to/big_image.jpg'); return false;"><img src="/path/to/thumbnail.jpg" border="0"/></a>
пятница, 23 ноября 2007 г.
Подгонка всплывающего окна под размер изображения
Подписаться на:
Комментарии к сообщению (Atom)
4 комментария:
По хорошему ссылки надо писать на нормальные картинки, а попап делать в onClick.
Чтобы у людей и без джабаскриптов все работало. А за такие ссылки - убивать вебмастеров.
Учту :)
Тут неудобно исходники выкладывать :(
Спасибо, все отлично, но маленькая ошибочка - забыли двойную кавычку:
+'src=' + image_path + '" '
а надо:
+'src="' + image_path + '" '
Отправить комментарий