Скрипт HgSlide 2

Еще более простой скрипт увеличения изображения по клику, написанный на Jquery. Стили прописовать не нужно, они встроены в функцию. Единственное в теге <head> - нужно прописать пути к библиотеке Jquery -

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
А также прописать щелчок по кнопке в коде (он выделен коричневым) - .psd_one img. Функции нужно поместить ниже этого кода. Со временем планируется доработать этот скрипт, сделав его еще более простым. Вторая библиотека - jquery-ui.min.js - нужна, чтобы изображение можно было перетаскивать мышкой.

//========================= Функция увеличения изображения по клику =======================
function big_img(elem) {   
    //--- создаем фон
    $('<div>',{id:'fon',
    css:{
        background:'#000',
        height:'100%',
        width:'100%',
        opacity:'0.8',
        position:'fixed',
        zIndex:'1000',
        display:'none',
        top:'0',
        left:'0',}}).prependTo('body');
    //--- создаем контейнер изображения
    $('<div>',{id:'img_pop',
    css:{  
        position: 'fixed',
        zIndex: '1003',  
        top: '20px',
        left: '0',
        width: '100%',
        display:'none',
        textAlign: 'center',
    },}).prependTo('body'); 
    
    //--- находим высоту и ширину окна браузера
    var h = $(window).height();
    var w = $(window).width();
    var h_img = h - 50;
    var w_img = w - 50;
    //--- находим соотношение сторон монитора
    var d = w / h;
    //--- находим ширину и высоту изображения
    var w_image = elem.width();
    var h_image = elem.height();
    //--- находим соотношение сторон изображения
    var d_image = w_image / h_image; 
    
    //--- создаем клон изображения
    var newImg = elem.clone();
    newImg.attr('title','Удерживайте мышку для перемещения изображения').css({
        cursor: 'move',
        border: '2px solid #fff',
        boxShadow: '0 0 5px #737171',
   
    },); 
    //--- помещаем изображение в контейнер
    newImg.prependTo('#img_pop');
    $('#fon').fadeIn(400);
    $('#img_pop').fadeIn(400);   
    
    //--- если соотношение монитора больше чем соотношение изображения
    if (d > d_image) {   
        newImg.animate({'height':h_img}, 400); 
    }
    else {
        newImg.animate({'width':w_img}, 400); 
    }
    newImg.draggable();//--- делаем перемещаемым 
}

//=================== Уменьшение изображения ===============================
function small_img(id) {
    $(document).on('click', id+' img', function(){
        $(this).animate({'width':'100px', 'height':'100px',}, 500);
        $(id).fadeOut(500);
        $('#fon').animate({'opacity':'0.1'}, 500, function() {
            $(this).remove();
            $(id).remove();
            $('#fon').remove();
        });
      });
}

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

$(function() {
  //========== Увеличение картинки по клику (в посте) ==============
  $('.psd_one img').click(function(){
    //--- проверяем ширину изображения, если она больше 300 - можем увеличивать
    if ($(this).width() > 300) {
        big_img($(this));
    }
    
  });
  //========== Удаление изображения и фона ========================
  small_img('#img_pop');
       
});