<MyRusakov.ru />

JavaScript, jQuery и Ajax с Нуля до Гуру

JavaScript, jQuery и Ajax с Нуля до Гуру

Видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру" научит Вас "вдыхать жизнь" в страницы, делая их с потрясающими эффектами и максимальным удобством для пользователя.

Курс научит Вас писать скрипты на JavaScript, а также обучит использованию библиотеки jQuery и технологии Ajax.

Практически любой красивый сайт (с красивыми галереями изображений, слайдерами, плавными переходами и так далее) использует jQuery. А практически на любом серьёзном сайте вовсю используется технология Ajax, которая делает работу с сайтом максимальной удобной.

Поэтому курс "JavaScript, jQuery и Ajax с Нуля до Гуру" Вам просто необходим, если Вы хотите создавать по-настоящему достойные сайты.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Открытие изображения в новом окне

Открытие изображения в новом окне

Описание: У меня уже несколько человек спрашивало про то, как отрыть изображение в новом окне. Разумеется, я уже не мог про это не написать, тем более, что код здесь очень простой. И скрипт ниже как раз позволяет открыть любое изображение в полный размер в новом окне. Характерной особенностью данного скрипта заключается в том, что новое окно размером в точности совпадает с изображением.

Результат: кликните по изображению.

Фотография

Код 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>

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (26):

Natalymath Natalymath 10.06.2011 10:36:57

Благодарю за ценный совет. Буду теперь время от времени заходить к вам на сайт. Я модифицировала скрипт так: при щелчке на одном изображении в отдельном окне открывается другое изображение <img src="images/v8.jpg" title="увеличить" border="0" onclick = 'openImageWindow("images/v8-2.jpg");'> (с другим именем, большего размера). Но возникли следующие проблемы: 1)При опробовании скрипта на локальном компьютере все работает. При установке на сервер не успевают считываться размеры рисунка. Т.е. при первом щелчке открывается окно размером около 100х100, рисунок там помещается крошечный. Если окно закрыть и повторить щелчок, то второй раз окно открывается нормального размера. Поэтому пришлось в той части скрипта, которая внутри head, установить фиксированные размеры. 2) В Опере вместо маленького окна открывается вкладка полноценного размера, т.е. скрипт, похоже, работает только в IE.

Ответить

Admin Admin 10.06.2011 12:37:15

У меня в Opera 11 и Firefox 3.6 открывается именно новое окно.

Ответить

Natalymath Natalymath 10.06.2011 10:40:01

Там, где квадратик, было написано: <pre> //<!-- <img src="images/v8.jpg" title="увеличить" border="0" onclick = 'openImageWindow("imagesv8-2.jpg");'> //--> </pre>

Ответить

Natalymath Natalymath 10.06.2011 10:43:26

как у вас вставить в комментарии код?

Ответить

Admin Admin 10.06.2011 12:33:39

Пока никак. Это можно сделать только на форуме.

Ответить

Natalymath Natalymath 10.06.2011 10:50:36

и как удалить неудачные комментарии

Ответить

Admin Admin 10.06.2011 12:34:17

Для этого надо обновить страницу после добавления комментария и щёлкнуть по ссылке "Удалить" в правом нижнем углу от комментария.

Ответить

Murat09 Murat09 10.11.2011 22:34:36

Подскажите, пожалуйста, можно ли сделать так, чтобы после нажатия на ссылку расскрывалось под ним окно с плеером и можно было слушать музыку? А так, на вашем сайте нашел очень много интересного и полезного для себя.Спасибо!

Ответить

Admin Admin 10.11.2011 22:47:00

Можно. Нарисуйте окно (HTML+CSS), поместите его в <div>. У этого <div> поставьте display: none; А затем при нажатии по ссылке делайте у <div> display: block;

Ответить

Murat09 Murat09 10.11.2011 22:57:10

Если не трудно, не моглы бы Вы написать этот код полностью, я только начал создавать сайт и, если честно, не очень понял что? как? и Куда? Спасибо!

Ответить

Admin Admin 10.11.2011 23:11:41

http://myrusakov.ru/skrytyj-tekst-javascript.html - вот здесь вместо текста "Ответ №1" надо просто вставить код плеера. А уж как украсить, чтобы было как окно - это дело дизайнера и только потом верстальщика.

Ответить

Murat09 Murat09 10.11.2011 23:23:08

Спасибо!

Ответить

negodovivan negodovivan 25.11.2011 10:24:13

Михаил, не могу понять... Ваш скрипт на самом сайте работает одинаково во всех браузерах... Пытаюсь тоже самое организовать у себя - нужный результат только в мазилле и опере... В ие и хроме выдается очень маленькая картинка. Не подключали ли Вы еще дополнительных скриптов, которые не описывались в статье?

Ответить

Admin Admin 25.11.2011 11:59:49

Никаких скриптов дополнительных не подключается, но я всё равно проверил. Всё хорошо и в ie, и хроме.

Ответить

izmail izmail 19.02.2012 13:31:39

Здравствуйте. Ваш скрипт работает одинаково не во всех браузерах...В опере и мазилле - отлично. Но вот в IE не очень - картинка открывается в новом окне, что выглядит не очень красиво(изображение на пустой белой странице, еще и в новой вкладке).Как заставить IE открывать изображения как мазилла и опера - в этом же окне поверх основного контента? Заранее спасибо.

Ответить

Admin Admin 19.02.2012 13:37:53

В общем-то, никак. Можно сделать это вообще через JQuery (или большой код JavaScript) без использования open(), по-другому, никак.

Ответить

ppk-center ppk-center 12.08.2012 22:04:25

<a href="javascript:show_big_photo('http://myrusakov.ru/images/avatars/user_1.jpeg')">Click me!</a>

Ответить

Privoznoy Privoznoy 22.09.2012 13:13:53

Прошу помочь. Перепробовал на всех браузерах - результат один. Скажем ссылка http://www.astromart.com/images/classifieds/792000-792999/medium/792660-1.jpg открывается в другом окне, но окно ПУСТОЕ. Заголовок окна такой: image_popup.asp(1x1). Что делать?

Ответить

Admin Admin 23.09.2012 10:58:50

Всё прекрасно открывается, если использовать код из статьи.

Ответить

Luna Kou Luna Kou 01.11.2013 13:24:30

Извините, не подскажете, каким образом можно модифицировать данный код, если у меня в качестве ссылки выступает не картинка, а область на карте с заданными координатами? У меня пока прописано так: <area coords="125,276,140,292" href="адрес картинки" target="_new"> И картинка открывается просто в новой вкладке, а нужно, чтобы в новом окне поверх существующего и окно было строго по размеру картинки. Буду очень признательна за помощь.

Ответить

Admin Admin 01.11.2013 16:55:11

Теги area и maps давно устарели, поэтому с ними могут быть проблемы. Все задачи, которые они выполняли, теперь надо делать на JavaScript.

Ответить

hitball hitball 07.09.2015 13:49:03

МИХАИЛ, ХОЧУ ПОБЛАГОДАРИТЬ ЗА ЧУДЕСНЫЕ СКРИПТЫ! Очень интересно, как в данном скрипте сделать так, чтобы открывающаяся картинка была поцентру? У меня она то в верхнем левом углу, то в нижнем правом. так и задумано?

Ответить

Витюган Витюган 03.12.2013 17:13:18

У меня чот окно открывается не по размерам картинки, а на весь экран. Хотя я копировал ваш код один в один и исползовал ту же картинку. Не знаете, почему так может быть?

Ответить

tikkiwiki tikkiwiki 04.12.2013 10:39:37

Виктор, здравствуйте. У Вас Google Chrome?

Ответить

GoTo GoTo 16.04.2014 13:34:34

Всем привет. Подскажите, как можно переделать этот код, чтобы в хроме нормально открывалось изображение? Прямо на этой странице нажимаю на изображение - открывается нормально. А если окно с картинкой закрыть и еще раз нажать на эту картинку, то открывается уже по-другому. Как сделать так, чтобы в хроме открывалось всегда нормально? Спасибо. ps Даже в IE6 нормально открывает, а в хроме беда.

Ответить

geriv geriv 15.06.2014 08:14:01

Здравствуйте. Подскажите пожалуйста, как дописать код, чтобы на странице открывалась картинка предпросмотра (меньшего размера) а при клике открывалась обычная (большого размера). А то большие картинки долго грузятся если все сразу.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.