Скрипт HgSlide

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

Принцип работы простой: при клике на изображении создается его клон, с размерами окна монитора, а также фон затемнения. При щелчке по клону, он исчезает.

/*** Мой hgslide ***/
a.hgslide {
    width: 60%;
    min-width: 300px;
    padding: 0;
    margin: 10px auto;
    text-indent: 0;
    cursor: pointer;
    display: block;
}

img.hgslide {
    width: 100%;
    margin: 0;
    box-shadow: 0 0 10px #737171;
    border: 2px solid #f3f4f6;
}
img.box {
    display: block;
    margin: 10px auto;
    height: 500px;
    border: 1px solid #737373;
}  
.fon {
  background: #000;
  height: 100%;
  width: 100%;
  opacity: 0.8;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
}
div.img_pop {
    position: fixed;
    z-index: 1003;  
    top: 20px;
    left: 0;
    width: 100%;
    text-align: center;
}
.img_pop img {
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 0 5px #737171;
}
//****Функция увеличения изображения по клику *****

function inc_img(elem) {
    //--- находим контейнер
    var body = document.getElementsByTagName('body').item(0);
    //--- получаем изображение и находим источник
    var image = elem.getElementsByTagName('img').item(0);
    var img_src = image.src; 

    //--- находим высоту и ширину окна браузера
    var h = window.innerHeight;
    var w = window.innerWidth;
    var h_img = h - 50;
    var w_img = w - 50;
    //--- находим соотношение сторон монитора
    var d = w / h;
    //--- находим ширину и высоту изображения
    var w_image = image.naturalWidth;
    var h_image = image.naturalHeight;
    //--- находим соотношение сторон изображения
    var d_image = w_image / h_image;
  
    
    //--- создаем фон  и атрибуты для него
    var fon = document.createElement('div');
    fon.setAttribute('class','fon');
    //--- создаем окно  и атрибуты для него
    var div = document.createElement('div');
    div.setAttribute('class','img_pop');
    div.setAttribute('onclick','out_img(this);');
    div.setAttribute('style','width:'+w+'px;');
    //--- создаем изображение и атрибуты
    var img = document.createElement('img');
    img.setAttribute('src', img_src);
    //--- если соотношение монитора больше чем соотношение изображения
    if (d > d_image) {
        img.setAttribute('style','height:'+h_img+'px;');    
    }
    else {
        img.setAttribute('style','width:'+w_img+'px;');
    }

    //--- добавляем в див изображение
    div.appendChild(img);
    
    //--- вставляем все
    body.appendChild(fon);
    body.appendChild(div);
}
//*** Функция удаления увеличенного изображения и фона *******

function out_img(elem) {
    //--- находим контейнер
    var body = document.getElementsByTagName('body').item(0);
    var fon = document.getElementsByClassName('fon').item(0);
    //--- находим изображение 
    //var img = elem.getElementsByTagName('img').item(0);
    //--- удаляем
    body.removeChild(fon);
    //body.removeChild(img);
    body.removeChild(elem);
    
}

Использование:

<a onclick="inc_img(this);" href="javascript://" class="hgslide"><img class="hgslide" src="Путь к изображению"></a>