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



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

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

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

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

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


<a href="https://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 Выпуск ✹ 8/09/2018 Ярлыки ►


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

6 коммент. :

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

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

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

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

      Удалить
  3. Очень интересно все. Спасибо. Подскажите пож. откуда берется ссылка на фото или видео (не YouTube).

    ОтветитьУдалить
  4. Gennadiy Balmatov, здравствуйте. Нажмите на любом фото, картинке или видео правой кнопкой мыши, затем Скопировать URL адрес видео или изображения. Спасибо за отзыв.

    ОтветитьУдалить


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


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

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

Имя

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

Сообщение *