Как открыть изображение, фото или видео в новом окне



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

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

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

Итак, что нужно сделать, чтобы открыть изображение. Первое, загружаем картинку в редактор сообщений в blogger и переходим по вкладке HTML слева. Посмотрите скриншот

Вот кстати и первый пример на скриншоте. Копируем url адрес картинки и вставляем в код ниже, выделено синим. Загруженное изображение можно увеличить или уменьшить, нажав по картинке. Когда будете копировать адрес, обратите внимание на размеры, выделено голубым.


<a href="http://3.bp.blogspot.com/-i_4uy5qXAWI/VMaRIYdg8pI/AAAAAAAAHFw/nrBLfEUDeqc/s1600/%D0%B0%D0%B4%D1%80%D0%B5%D1%81.JPG"width="640"height="538" onclick="newMyWindow1(this.href); return false;">тестовом блоге</a>

<script>
function newMyWindow1(href) {
  var d = document.documentElement,
      h = 538,
      w = 640,
      myWindow = window.open(href, 'myWindow', 'scrollbars=1,height='+Math.min(h, screen.availHeight)+',width='+Math.min(w, screen.availWidth)+',left='+Math.max(0, ((d.clientWidth - w)/2 + window.screenX))+',top='+Math.max(0, ((d.clientHeight - h)/2 + window.screenY)));

      // абзац для Chrome
      if (myWindow.screenY >= (screen.availHeight - myWindow.outerHeight)) {myWindow.moveTo(myWindow.screenX, (screen.availHeight - myWindow.outerHeight))};
      if (myWindow.screenX >= (screen.availWidth - myWindow.outerWidth)) {myWindow.moveTo((screen.availWidth - myWindow.outerWidth), myWindow.screenY)};
}
</script>



Точно также можно вставить галерею фотографий. Для этого придется потрудиться в редакторе сообщений. Загрузить фото, заключить в <table><tr><td>адрес фото</td><td>пробел</td><td>адрес фото</td></tr></table>. Я с фотографиями пока не работала, но у меня в блоге есть бесшовные фоны, расположенные таким способом. Смотрите пример.

И последнее, видео: можно в редакторе сообщений blogger загрузить с ютуба, скопировать адрес и вставить в код.  Можно скопировать адрес сразу в ютуб, почитайте пост Как вставить видео на страницы блога Blogspot.  А здесь для Вас пример.

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

Протестировала в других браузерах: Опера, Мазила, Yandex, Хром, все работает, в ИЕ через раз и то не корректно, зависит от версии. У меня старая, я этим браузером практически не пользуюсь, не нравится он мне.  Код можно вставлять на страницы и боковые панели гаджетом: дизайн-добавить гаджет. В боковых панелях значительно сэкономит место, ведь у Вас будет только надпись: название картинки, видео или фото.

И у меня сегодня все. Если Вам понравилась информация, поделитесь со своими друзьями в социальных сетях. Всем пока и всего доброго.




Автор статьи ✎ Olga Protasova Выпуск ✹ 1/27/2015 Ярлыки ►


Открыть комментарии →

4 коммент. :

  1. Ольга, прекрасный код. Всё достаточно функционально и интересно. Мне вот вариант с сайдбаром по душе пришёлся. Подумать надо чтоб такое сделать из него.

    ОтветитьУдалить
    Ответы
    1. Вика спасибо, старалась. В сайдбар можно поместить важную информацию, можно создать страницу конкурса, опроса, поместить прикольное видео или обучающее, что-нибудь отгадать или просто что то для настроения. Ты придумаешь, только как всегда надо время найти, которого у нас вечно не хватает.

      Удалить
  2. Да со временем у всех просто эпидемия. Вот счто-то прикольное возможно и надо сделать. А то блог какой-то суховатый. Одни коды. Подумаю.

    ОтветитьУдалить
    Ответы
    1. Недавно попала на один блог, сплошные конкурсы и голосования. Людей полно. Нам тоже не мешает об этом подумать, а то правильно ты сказала одни только коды. С другой стороны и наша информация и те же коды нужны начинающим блоггерам. Но и о настроении тоже надо подумать. Вон у А.Борисова на блоге не заскучаешь.

      Удалить

Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь в меню Генератором преобразования HTML кода.

 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *