boards/static/js/image.js

function addImgPreview() {
    var margin = 20; //..change

    //keybind
    $(document).on('keyup.removepic', function(e) {
        if(e.which === 27) {
            $('.img-full').remove();
        }
    });

    $('body').on('click', '.thumb', function() {
        var el = $(this);
        var thumb_id = 'full' + el.find('img').attr('alt');

        if(!$('#'+thumb_id).length) {
            var img_w = el.find('img').attr('data-width');
            var img_h = el.find('img').attr('data-height');

            var win_w = $(window).width();
            var win_h = $(window).height();
            //new image size
            if (img_w > win_w) {
                img_h = img_h * (win_w/img_w) - margin;
                img_w = win_w - margin;
            }
            if (img_h > win_h) {
                img_w = img_w * (win_h/img_h) - margin;
                img_h = win_h - margin;
            }

            var img_pv = new Image();
            $(img_pv)
                .addClass('img-full')
                .attr('id', thumb_id)
                .attr('src', $(el).attr('href'))
                .appendTo($(el))
                .css({
                    'width': img_w,
                    'height': img_h,
                    'left': (win_w - img_w) / 2,
                    'top': ((win_h - img_h) / 2)
                })
                //scaling preview
                .mousewheel(function(event, delta) {
                    var cx = event.originalEvent.clientX,
                        cy = event.originalEvent.clientY,
                        i_w = parseFloat($(img_pv).width()),
                        i_h = parseFloat($(img_pv).height()),
                        newIW = i_w * (delta > 0 ? 1.25 : 0.8),
                        newIH = i_h * (delta > 0 ? 1.25 : 0.8);

                    $(img_pv).width(newIW);
                    $(img_pv).height(newIH);
                    //set position
                    $(img_pv)
                        .css({
                            left: parseInt(cx - (newIW/i_w) * (cx - parseInt($(img_pv).position().left, 10)), 10),
                            top:  parseInt(cy - (newIH/i_h) * (cy - parseInt($(img_pv).position().top, 10)), 10)
                        });

                    return false;
                }
            ).draggable()
        }
        else {
            $('#'+thumb_id).remove();
        }
        //prevent default
        return false;
    });
}