div 좀 봐주세요,,

div 좀 봐주세요,,

QA

div 좀 봐주세요,,

본문

인테넷에서 소스를 구해서 하려는데 너무 안되네요

 

아래 소스는 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>


이 질문에 댓글 쓰기 :

답변을 작성하시기 전에 로그인 해주세요.
전체 8
QA 내용 검색
  • 개별 목록 구성 제목 답변작성자조회작성일
  • 질문이 없습니다.

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT