Bacchas at 18:27, 24 December 2016

2016-12-24T18:27:13Z
← Older revision		Revision as of 18:27, 24 December 2016
Line 150:		Line 150:
	})(); // IFFFi		})(); // IFFFi
	</pre>		</pre>
			==[[#top\|Back To Top]]-[[Main_Page\| Home]] - [[Java Script\|Category]]==
Bacchas: Created page with "''' Click on Thumbnail to make an image pop up in a modal window''' =HTML=
                   
2016-12-24T18:25:44Z
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..."
New page
''' 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="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></pre>



=CSS=

<pre>

ul {

    list-style: none;

}



ul li {

    display: inline-block;

}



.sixe img {

    width: 100px;

    height: 100px;

    

}

</pre>



=JavaScript=



<pre>

(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

</pre>
Image enlarge - Revision history

Bacchas at 18:27, 24 December 2016
