Открытие изображения в новом окне
Описание: У меня уже несколько человек спрашивало про то, как отрыть изображение в новом окне. Разумеется, я уже не мог про это не написать, тем более, что код здесь очень простой. И скрипт ниже как раз позволяет открыть любое изображение в полный размер в новом окне. Характерной особенностью данного скрипта заключается в том, что новое окно размером в точности совпадает с изображением.
Результат: кликните по изображению.
Код JavaScript (вставлять между тегами <head> и </head>):
<script type="text/javascript">
function openImageWindow(src) {
var image = new Image();
image.src = src;
var width = image.width;
var height = image.height;
window.open(src,"Image","width=" + width + ",height=" + height);
}
</script>
Код HTML (вставлять между тегами <body> и </body>):
<div>
<img src = 'images/javascript/foto4.jpg' alt = 'Фотография' width = '200' onclick = 'openImageWindow(this.src);' />
</div> -
Создано 08.05.2011 14:13:00
-
Михаил Русаков
Комментарии (26):
Благодарю за ценный совет. Буду теперь время от времени заходить к вам на сайт. Я модифицировала скрипт так: при щелчке на одном изображении в отдельном окне открывается другое изображение <img src="images/v8.jpg" title="увеличить" border="0" onclick = 'openImageWindow("images/v8-2.jpg");'> (с другим именем, большего размера). Но возникли следующие проблемы: 1)При опробовании скрипта на локальном компьютере все работает. При установке на сервер не успевают считываться размеры рисунка. Т.е. при первом щелчке открывается окно размером около 100х100, рисунок там помещается крошечный. Если окно закрыть и повторить щелчок, то второй раз окно открывается нормального размера. Поэтому пришлось в той части скрипта, которая внутри head, установить фиксированные размеры. 2) В Опере вместо маленького окна открывается вкладка полноценного размера, т.е. скрипт, похоже, работает только в IE.
Ответить
У меня в Opera 11 и Firefox 3.6 открывается именно новое окно.
Ответить
Там, где квадратик, было написано: <pre> //<!-- <img src="images/v8.jpg" title="увеличить" border="0" onclick = 'openImageWindow("imagesv8-2.jpg");'> //--> </pre>
Ответить
как у вас вставить в комментарии код?
Ответить
Пока никак. Это можно сделать только на форуме.
Ответить
и как удалить неудачные комментарии
Ответить
Для этого надо обновить страницу после добавления комментария и щёлкнуть по ссылке "Удалить" в правом нижнем углу от комментария.
Ответить
Подскажите, пожалуйста, можно ли сделать так, чтобы после нажатия на ссылку расскрывалось под ним окно с плеером и можно было слушать музыку? А так, на вашем сайте нашел очень много интересного и полезного для себя.Спасибо!
Ответить
Можно. Нарисуйте окно (HTML+CSS), поместите его в <div>. У этого <div> поставьте display: none; А затем при нажатии по ссылке делайте у <div> display: block;
Ответить
Если не трудно, не моглы бы Вы написать этот код полностью, я только начал создавать сайт и, если честно, не очень понял что? как? и Куда? Спасибо!
Ответить
http://myrusakov.ru/skrytyj-tekst-javascript.html - вот здесь вместо текста "Ответ №1" надо просто вставить код плеера. А уж как украсить, чтобы было как окно - это дело дизайнера и только потом верстальщика.
Ответить
Спасибо!
Ответить
Михаил, не могу понять... Ваш скрипт на самом сайте работает одинаково во всех браузерах... Пытаюсь тоже самое организовать у себя - нужный результат только в мазилле и опере... В ие и хроме выдается очень маленькая картинка. Не подключали ли Вы еще дополнительных скриптов, которые не описывались в статье?
Ответить
Никаких скриптов дополнительных не подключается, но я всё равно проверил. Всё хорошо и в ie, и хроме.
Ответить
Здравствуйте. Ваш скрипт работает одинаково не во всех браузерах...В опере и мазилле - отлично. Но вот в IE не очень - картинка открывается в новом окне, что выглядит не очень красиво(изображение на пустой белой странице, еще и в новой вкладке).Как заставить IE открывать изображения как мазилла и опера - в этом же окне поверх основного контента? Заранее спасибо.
Ответить
В общем-то, никак. Можно сделать это вообще через JQuery (или большой код JavaScript) без использования open(), по-другому, никак.
Ответить
<a href="javascript:show_big_photo('http://myrusakov.ru/images/avatars/user_1.jpeg')">Click me!</a>
Ответить
Прошу помочь. Перепробовал на всех браузерах - результат один. Скажем ссылка http://www.astromart.com/images/classifieds/792000-792999/medium/792660-1.jpg открывается в другом окне, но окно ПУСТОЕ. Заголовок окна такой: image_popup.asp(1x1). Что делать?
Ответить
Всё прекрасно открывается, если использовать код из статьи.
Ответить
Извините, не подскажете, каким образом можно модифицировать данный код, если у меня в качестве ссылки выступает не картинка, а область на карте с заданными координатами? У меня пока прописано так: <area coords="125,276,140,292" href="адрес картинки" target="_new"> И картинка открывается просто в новой вкладке, а нужно, чтобы в новом окне поверх существующего и окно было строго по размеру картинки. Буду очень признательна за помощь.
Ответить
Теги area и maps давно устарели, поэтому с ними могут быть проблемы. Все задачи, которые они выполняли, теперь надо делать на JavaScript.
Ответить
МИХАИЛ, ХОЧУ ПОБЛАГОДАРИТЬ ЗА ЧУДЕСНЫЕ СКРИПТЫ! Очень интересно, как в данном скрипте сделать так, чтобы открывающаяся картинка была поцентру? У меня она то в верхнем левом углу, то в нижнем правом. так и задумано?
Ответить
У меня чот окно открывается не по размерам картинки, а на весь экран. Хотя я копировал ваш код один в один и исползовал ту же картинку. Не знаете, почему так может быть?
Ответить
Виктор, здравствуйте. У Вас Google Chrome?
Ответить
Всем привет. Подскажите, как можно переделать этот код, чтобы в хроме нормально открывалось изображение? Прямо на этой странице нажимаю на изображение - открывается нормально. А если окно с картинкой закрыть и еще раз нажать на эту картинку, то открывается уже по-другому. Как сделать так, чтобы в хроме открывалось всегда нормально? Спасибо. ps Даже в IE6 нормально открывает, а в хроме беда.
Ответить
Здравствуйте. Подскажите пожалуйста, как дописать код, чтобы на странице открывалась картинка предпросмотра (меньшего размера) а при клике открывалась обычная (большого размера). А то большие картинки долго грузятся если все сразу.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.