Блог

JavaScript: Простой preview image

Написание простого привью изображений без использования framework.

JavaScript Code

        var Preview = {
            getDocument: function() {
                return document;
            },
            getWindow: function() {
                return window;
            },
            getWH: function() {
                var Width = 0, Height = 0;
                var win = this.getWindow(),
                    doc = this.getDocument();
                if(typeof(win.innerWidth) == ‘number’) {
                    //Non-IE
                    Width  = win.innerWidth;
                    Height = win.innerHeight;
                }
                else if(doc.documentElement && (doc.documentElement.clientWidth || doc.documentElement.clientHeight)) {
                    //IE 6+ in ’standards compliant mode’
                    Width  = doc.documentElement.clientWidth;
                    Height = doc.documentElement.clientHeight;
                }
                else if(doc.body && (doc.body.clientWidth || doc.body.clientHeight)) {
                    //IE 4 compatible
                    Width  = doc.body.clientWidth;
                    Height = doc.body.clientHeight;
                }
                return {‘width’:Width, ‘height’:Height};
            },
            setOverlay: function() {
                var doc = this.getDocument(),
                    sizeWindow = this.getWH();
                var overlay = doc.getElementById(‘preview-shut’);
                overlay.style.display = ‘block’;
                overlay.style.width  = (sizeWindow.width-3) +‘px’;
                overlay.style.height = (sizeWindow.height-3)+‘px’;
            },
            remove: function() {
                var doc = this.getDocument();
                var preview = doc.getElementById(‘preview-shut’);
                preview.parentNode.removeChild(preview);
                var front = doc.getElementById(‘preview-front’);
                front.parentNode.removeChild(front);
            },
            close: function() {
                var button = document.createElement(‘a’);
                button.href = ‘#’;
                button.setAttribute(‘id’,‘close’);
                button.innerHTML = ‘Close’;
                button.onclick = function() {
                    Preview.remove();
                };
                return button;
            },
            image: function(src) {
                var image = document.createElement(‘img’);
                image.src = src;
                image.setAttribute(‘class’, ‘preview-image’);
                return image;
            },
            init:function(element) {
                if(typeof element === undefined) {
                    return false;
                }
                if(element.attributes.src.value===” || element.attributes.src.value===false) {
                    return false;
                }
                var src = element.src;
                var doc = this.getDocument().body;
                var front = document.createElement(‘div’);
                front.setAttribute(‘id’,‘preview-front’);
                front.innerHTML = ‘ ’;
                var shut = document.createElement(‘div’);
                shut.setAttribute(‘id’, ‘preview-shut’);
                var center = document.createElement(‘div’);
                center.setAttribute(‘class’, ‘preview-center’);
                center.appendChild(this.close());
                center.appendChild(this.image(src));
                shut.appendChild(center);
                doc.appendChild(front);
                doc.appendChild(shut);
                this.setOverlay();
            }
        };
        $(document).ready(function() {
            $(‘img#image’).click(function(){
                Preview.init(this);
            });
        });

CSS CODE

        #close {
            outline:none;
            color:#fff;
            display:block;
            text-align:right;
            text-decoration:none;
            margin-top:50px;
            margin-bottom:1px;
            font-weight:bold;
        }
        #preview-front {
            z-index:299;
            position:absolute;
            left:0;
            top:0;
            width:100%;
            height:100%;
            background:black;
            opacity:0.9;
            filter:Alpha(opacity=90)
        }
        #preview-shut {
            z-index:300;
            position:absolute;
            left:0;
            top:0;
            display:none;
        }
        .preview-image {
            position:absolute;
            border:5px solid #ffffff;
            text-align:center;
            max-width:810px;
            min-width:200px;
            margin:0 auto;
        }
        .preview-center {
            width:200px;
            margin:0 auto;
        }

HTML CODE

  1. <!– file:///C://Windows/Web/Wallpaper/Home.jpg –>
  2. <img src=“http://www.world-art.ru/animation/img/converted_images_1000/optimize_b/803-6-optimize_b.jpg” id=“image” style=“cursor: pointer; border:3px solid black; width:100px”/>