аватар Автор: Сергей Касаткин | 11 мая 2017 12:26

Статьи / JavaScript /

Как открыть изображение в новом окне?

Вы наверное сталкивались с проблемой открытия больших изображений? В рамках сайта это не всегда удобно, так как либо необходимо использовать скрипт галереи, либо перекрывать изображением контент. Указанный в статье скрипт позволяет при нажатии на изображении открыть его в новом окне в полном размере. Это удобно при просмотре больших изображений: карт, макетов и тд.

Попробуйте кликнуть по изображению в демонстрации.

Демонстрация Скачать исходники


Код 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 (вставлять между тегами &lt;body&gt; и &lt;/body&gt;):

<div>
 <img src = 'images/javascript/foto4.jpg' alt = 'Фото' width = '200' onclick = 'openImageWindow(this.src);' />
</div>


Удачи и успехов!
 



Похожие статьи


Комментарии к статье (vk.com)