관리 메뉴

moozi

gallery 예제 본문

TIS_2016/주말반_1기

gallery 예제

moozi 2016. 3. 26. 12:14

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <style type="text/css">

            /* 웹폰트 등록 */

            @font-face{

                font-family:SeoulNamsanFont;

                src:url('SeoulNamsanEB.ttf');

            }

            h1{

                font-family: SeoulNamsanFont;

                text-shadow: 2px 2px 5px darkblue;

            }

            

            .pic_style{

                width:300px;

                height:250px;

                border:1px solid #dddddd;

                float:left;

                margin: 10px;

                box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

            }

            

            .img_style{

                width:97%;

                padding:5px;

                opacity: 0.9;

                filter: alpha(opacity=90); /* For IE8 and earlier */

            }

            

            .img_style:hover{

                cursor: pointer; /* 커서 아이콘 바꾸기 */

                opacity: 1;

                filter: alpha(opacity=100); /* For IE8 and earlier */

            }

            

            .text_align{

                text-align: center;

            }

            

            .pic_style:hover{

                border:1px solid darkgray;

            }

            

            

            /* The Modal (background) */

.modal {

    display: none; /* 기본적으로 안보이게 함 */

    position: fixed; /* Stay in place */

    z-index: 1; /* 부모창보다 위에 오게 함 */

    padding-top: 100px; /* Location of the box */

    left: 0;

    top: 0;

    width: 100%; /* Full width */

    height: 100%; /* Full height */

    overflow: auto; /* Enable scroll if needed */

    background-color: rgb(0,0,0); /* Fallback color */

    background-color: rgba(0,0,0,0.7); /* Black w/ opacity */

}


/* Modal Content (image) */

.modal-content {

    margin: auto;

    display: block;

    width: 80%;

    max-width: 700px;

}


/* Caption of Modal Image */

#caption {

    margin: auto;

    display: block;

    width: 80%;

    max-width: 700px;

    text-align: center;

    color: #ccc;

    padding: 10px 0;

    height: 150px;

}


/* Add Animation */

.modal-content, #caption {    

    -webkit-animation-name: zoom;

    -webkit-animation-duration: 0.6s;

    animation-name: zoom;

    animation-duration: 0.6s;

}


@-webkit-keyframes zoom {

    from {-webkit-transform: scale(0)} 

    to {-webkit-transform: scale(1)}

}


@keyframes zoom {

    from {transform: scale(0.1)} 

    to {transform: scale(1)}

}


   

    

    

/* The Close Button */

.close {

    position: absolute;

    top: 15px;

    right: 35px;

    color: #f1f1f1;

    font-size: 40px;

    font-weight: bold;

    transition: 0.3s;

}


.close:hover,

.close:focus {

    color: #bbb;

    text-decoration: none;

    cursor: pointer;

}

            

        </style>

    </head>

    <body>

        <h1>갤러리</h1>

        <div class="pic_style">

                <img id="myImg" class="img_style" src="img/img_forest.jpg" alt="아름다운 숲">

            <div class="text_align">

                아름다운 숲

            </div>

        </div>

        

        <!-- modal영역. 이미지를 클릭하면 나타남. ====================-->

        <div id="myModal" class="modal">

          <span class="close">×</span>

          <img class="modal-content" id="img01">

          <div id="caption"></div>

        </div>

        <!-- modal영역 끝.=========================================-->

        

        

        <div class="pic_style">

            <a href="img/img_fjords.jpg" target="_blank">

                <img class="img_style" src="img/img_fjords.jpg">

            </a>

            <div class="text_align">

                아름다운 계곡

            </div>

        </div>

        

     <script>

    // Get the modal

    var modal = document.getElementById('myModal');


    // Get the image and insert it inside the modal - use its "alt" text as a caption

    var img = document.getElementById('myImg');

    var modalImg = document.getElementById("img01");

    var captionText = document.getElementById("caption");

    img.onclick = function(){

        modal.style.display = "block"; //modal창을 보이게함.

        modalImg.src = this.src;

        modalImg.alt = this.alt;

        captionText.innerHTML = this.alt; //alt속성값을 캡션에 나타나게함.

    }


    // Get the <span> element that closes the modal

    var span = document.getElementsByClassName("close")[0];


    // When the user clicks on <span> (x), close the modal

    span.onclick = function() { 

        modal.style.display = "none"; //modal창을 안보이게함.

    }

    </script>   

    

    </body>

</html>

'TIS_2016 > 주말반_1기' 카테고리의 다른 글

4/2 introduce.html  (0) 2016.04.02
movie작업예제  (0) 2016.04.02
gallery 예제  (0) 2016.03.26
미디어쿼리 예제  (0) 2016.03.26
animation 파일  (0) 2016.03.26
3/19 오전 수업 사용 소스  (0) 2016.03.19
0 Comments
댓글쓰기 폼