Image enlarge

From rbachwiki
Revision as of 18:25, 24 December 2016 by Bacchas (talk | contribs) (Created page with "''' Click on Thumbnail to make an image pop up in a modal window''' =HTML= <pre> <!DOCTYPE html> <head> <meta charset="utf-8"> <title></title> <meta name="descr...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

Click on Thumbnail to make an image pop up in a modal window

HTML

<!DOCTYPE html>

<head>
    <meta charset="utf-8">

    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/style.css" rel="stylesheet">
</head>

<body>
    <article>
        <h2>The Art</h2>
        <p>This years peice</p>
        <div class="pixgrid group">
            <ul class="group sixe">
                <li> <img src="image/cp-00001_th.jpg" alt=""> </li>
                <li> <img src="image/cp-00002_th.jpg" alt=""> </li>
                <li> <img src="image/cp-00003_th.jpg" alt=""> </li>
                <li> <img src="image/cp-00004_th.jpg" alt=""> </li>
            </ul>

        </div>


    </article>
    <script src="js/myscript.js"></script>

</body>

</html>

CSS

ul {
    list-style: none;
}

ul li {
    display: inline-block;
}

.sixe img {
    width: 100px;
    height: 100px;
    
}

JavaScript

(function() {
    var myNode = document.querySelector('.pixgrid ul');
    myNode.addEventListener("click", function(e) {
        if (e.target.tagName === 'IMG') {
            var myOverlay = document.createElement('div');
            myOverlay.id = 'overlay';
            document.body.appendChild(myOverlay);

            // setup overlay styles
            myOverlay.style.position = 'absolute';
            myOverlay.style.top = 0;
            myOverlay.style.backgroundColor = 'rgba(0,0,0,0.7)';
            myOverlay.style.cursor = 'pointer';

            // resize and position overlay
            myOverlay.style.width = window.innerWidth + 'px';
            myOverlay.style.height = window.innerHeight + 'px';
            myOverlay.style.top = window.pageYOffset + 'px';
            myOverlay.style.left = window.pageXOffset + 'px';

            // create image elemtn

            var imageSrc = e.target.src;
            var largeImage = document.createElement('img');
            largeImage.id = 'largeImage';
            largeImage.src = imageSrc.substr(0, imageSrc.length - 7) + '.jpg';
            largeImage.style.display = 'block';
            largeImage.style.position = 'absolute';
            // wait until image has loaded

            largeImage.addEventListener('load', function() {
                // resize image if taller
                if (this.height > window.innerHeight) {
                    this.ratio = window.innerHeight / this.height;
                    this.height = this.height * this.ratio;

                } // end if

                // resize image if wider
                if (this.width > window.innerwidth) {
                    this.ratio = window.innerwidth / this.width;
                    this.width = this.width * this.ratio;

                } // end if
                centerImage(this);
                myOverlay.appendChild(largeImage);

            }); // image has loaded

            myOverlay.addEventListener('click', function() {

                if (myOverlay) {
                    window.removeEventListener('resize', window, false);
                    window.removeEventListener('scroll', window, false);
                    myOverlay.parentNode.removeChild(myOverlay);
                } // end if

            }, false);

            window.addEventListener('scroll', function() {
                if (myOverlay) {
                    myOverlay.style.top = window.pageYOffset + 'px';
                    myOverlay.style.left = window.pageXOffset + 'px';
                } // enf if
            }, false);

            // fix overlay if window is resized
            window.addEventListener('resize', function() {
                if (myOverlay) {
                    myOverlay.style.width = window.innerWidth + 'px';
                    myOverlay.style.height = window.innerHeight = 'px';
                    myOverlay.style.top = window.pageYOffset + 'px';
                    myOverlay.style.left = window.pageXOffset + 'px';
                    centerImage(largeImage);

                }
            }, false);

        } // target the image

    }, false); // image is clicked

    function centerImage(theImage) {
        var myDifX = (window.innerWidth - theImage.width) / 2;
        var myDifY = (window.innerHeight - theImage.height) / 2;
        theImage.style.top = myDifY + 'px';
        theImage.style.left = myDifX + 'px';
        return theImage;


    }

})(); // IFFFi