올해는 넘기지 말아야지 하면서도,,,

실력이 바닥이라..아무리 삽질을 해도 안되네요...

인테넷에서 소스를 구해서 하려는데 

아래 소스는 2단으로 높이가 700으로 감싸고 있는거 같은데.. 사진높이가 600이고 그밑에 섬네일이 100이네요.. 

맨밑에 div를 한개 더둬서 "오늘은 더 보지 않기" 팝업창으로 만드려고 합니다.

코드만 보면 머리가 아프겠지만,,,그래도,,,한번,,,봐주세여,.,

   <script type="text/javascript" src="../tab-slider/js/jquery-1.7.2.min.js"></script>

    <script type="text/javascript" src="../tab-slider/js/jssor.slider.mini.js"></script>

    <!-- use jssor.slider.debug.js instead for debug -->

    <script>

        jQuery(document).ready(function ($) {

            var jssor_1_options = {

              $AutoPlay: true,

              $BulletNavigatorOptions: {

                $Class: $JssorBulletNavigator$

              },

              $ThumbnailNavigatorOptions: {

                $Class: $JssorThumbnailNavigator$,

                $Cols: 3,

                $Align: 200

              }

            };

            var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

            //responsive code begin

            //you can remove responsive code if you don't want the slider scales while window resizes

            function ScaleSlider() {

                var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;

                if (refSize) {

                    refSize = Math.min(refSize, 510);

                    jssor_1_slider.$ScaleWidth(refSize);

                }

                else {

                    window.setTimeout(ScaleSlider, 30);

                }

            }

            ScaleSlider();

            $(window).bind("load", ScaleSlider);

            $(window).bind("resize", ScaleSlider);

            $(window).bind("orientationchange", ScaleSlider);

            //responsive code end

        });

    </script>

<style>

        .jssort16 .p {

            position: absolute;

            top: 0;

            left: 0;

            width: 170px;

            height: 100px;

        }

        .jssort16 .t {

            position: absolute;

            top: 0;

            left: 0;

            width: 170px;

            height: 100px;

            border: none;

        }

        .jssort16 .p img {

            position: absolute;

            top: 0;

            left: 0;

            width: 170px;

            height: 100px;

            filter: alpha(opacity=55);

            opacity: 100;

            transition: opacity .6s;

            -moz-transition: opacity .6s;

            -webkit-transition: opacity .6s;

            -o-transition: opacity .6s;

        }

        .jssort16 .pav img, .jssort16 .pav:hover img, .jssort16 .p:hover img {

            filter: alpha(opacity=100);

            opacity: 1;

            transition: none;

            -moz-transition: none;

            -webkit-transition: none;

            -o-transition: none;

        }

        .jssort16 .pav:hover img, .jssort16 .p:hover img {

            filter: alpha(opacity=70);

            opacity: .7;

        }

        .jssort16 .title, .jssort16 .title_back {

            position: absolute;

            bottom: 0px;

            left: 0px;

            width: 170px;

            height: 30px;

            line-height: 30px;

            text-align: center;

            color: #000;

            font-size: 20px;

        }

        .jssort16 .title_back {

            background-color: #fff;

            filter: alpha(opacity=50);

            opacity: .5;

        }

        .jssort16 .pav .title_back {

            background-color: #000;

            filter: alpha(opacity=50);

            opacity: .5;

        }

        .jssort16 .pav .title {

            color: #fff;

        }

        .jssort16 .p.pav:hover .title_back, .jssort16 .p:hover .title_back {

            filter: alpha(opacity=40);

            opacity: .4;

        }

        .jssort16 .p.pdn img {

            filter: alpha(opacity=100);

            opacity: 1;

        }

    </style>

 <div id="jssor_1" style="position: relative; margin: 0 auto; top: 100px; left: 0px; width: 510px; height: 700px; visibility:hidden; overflow: hidden; z-index:1000">

        <!-- Loading Screen -->

        <div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 510px; height: 600px; overflow: hidden;">

            <div data-p="112.50" style="display: none;">

                <img data-u="image" src="../tab-slider/img/05.jpg" />

                <div data-u="thumb">

                    <img src="../tab-slider/img/landscape.jpg" />

                    <div class="title_back"></div>

                    <div class="title">

                                1111

                    </div>

                </div>

            </div>

            <div data-p="112.50" style="display: none;">

                <img data-u="image" src="../tab-slider/img/001.jpg" />

                <div data-u="thumb">

                    <img src="../tab-slider/img/motor.jpg" />

                    <div class="title_back"></div>

                    <div class="title">

                                2222

                    </div>

                </div>

            </div>

            <div data-p="112.50" style="display: none;">

                <img data-u="image" src="../tab-slider/img/004.jpg" />

                <div data-u="thumb">

                    <img src="../tab-slider/img/photography.jpg" />

                    <div class="title_back"></div>

                    <div class="title">

                                3333

                    </div>

                </div>

            </div>

        </div>

        <!-- Thumbnail Navigator -->

        <div data-u="thumbnavigator" class="jssort16" style="position:absolute;left:0px;bottom:0px;width:510px;height:100px; " data-autocenter="1">

            <!-- Thumbnail Item Skin Begin -->

            <div data-u="slides" style="cursor: default;">

                <div data-u="prototype" class="p">

                    <div data-u="thumbnailtemplate" class="t"></div>

                </div>

            </div>

        </div>

                    <!-- Thumbnail Item Skin End -->     <a href="javascript:document.all.noticelayer.style.visibility='hidden';setCookie( 'nlayer', 'done' , 1);"><strong>[오늘 하루는 그만 보기]</strong></a>

</div>