위토즈 - 개발자프로그램판매공간

정보공유

[JQUERY] 갤러리 슬라이더

 

<script language="javascript" type="text/javascript" src="./js/jquery.lightSlider.js"></script> 

 

<style>

    #bx_gallery {position:relative;}

    #bx_gallery .photo_slide {position:absolute;top:25%;width:100%;}

</style>

 

<ul id="imageGallery">

    <li data-thumb="{domain}/m150106_000.jpg"><img src="{domain}/m150106_000.jpg" /></li>

    <li data-thumb="{domain}/m150105_000.jpg"><img src="{domain}/m150105_000.jpg" /></li>

    <li data-thumb="{domain}/m150105_001.jpg"><img src="{domain}/m150105_001.jpg" /></li>

    <li data-thumb="{domain}/m150106_000.jpg"><img src="{domain}/m150106_000.jpg" /></li>

    <li data-thumb="{domain}/m150105_000.jpg"><img src="{domain}/m150105_000.jpg" /></li>

    <li data-thumb="{domain}/m150105_001.jpg"><img src="{domain}/m150105_001.jpg" /></li>

    <li data-thumb="{domain}/m150106_000.jpg"><img src="{domain}/m150106_000.jpg" /></li>

    <li data-thumb="{domain}/m150105_000.jpg"><img src="{domain}/m150105_000.jpg" /></li>

    <li data-thumb="{domain}/m150105_001.jpg"><img src="{domain}/m150105_001.jpg" /></li>

</ul>

 

<script type="text/javascript">

<!--

    $('#imageGallery').lightSlider({

        gallery:true,

        item:1,

        thumbItem:4,

        slideMargin:0,

        mode:'fade',

        currentPagerPosition:'left',

        controls         : true,  // Whether to display prev/next buttons.

        loop             : true, // Allows to go to the other end of the gallery at first/last img.

        auto             : true, // Enables slideshow mode.

        pause            : 3000,  // Delay (in ms) between transitions in slideshow mode.

        escKey           : false,  // Whether lightGallery should be closed when user presses "Esc".

        closable         : false,  //allows clicks on dimmer to close gallery

        onSliderLoad: function(el) {

            el.lightGallery();

        }

    });

//-->

</script>

첨부파일

정보공유
Total 436건 1 페이지
번호 제목 글쓴이 날짜 조회
436 입금된 주문도 준비, 배송전까지는 취소할 수 있도록 하는 방법 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-10 201
435 CSS를 사용하여 4x4 형태의 갤러리 디자인 그리드 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-05 231
434 magnificPopup css 를 추가하여 popup 마다 다른 사이즈 로 띄우기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-16 810
433 magnificPopup 조건이 맞지 않으면 popup 띄우지 않기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-12 774
432 magnificPopup iframe 으로 form submit 하기 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-12 900
431 mysql 사용자 함수 생성 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-09 662
430 html 로 된 svg 태그를 png 파일로 만들기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-08 840
429 prepare bind_param 쿼리구분 select * 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-14 1525
428 javascript 플랫폼 디바이스 확인 함수 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 07-13 1595
427 stmt 등록 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 06-14 1879
426 prepare 함수 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 05-16 1886
425 magnificPopup 으로 창을 호출 후 날짜 입력박스에 datepicker 실행되지 않는경우 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-13 1831
424 magnificPopup 파라미터 변수 값 ajax 타입으로 전송 방법 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-31 1899
423 jquery 로 text 필드와 file 첨부를 동시에. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-09 2019
422 파일 첨부 를 이미지버튼으로 대체한경우 첨부한 파일명 표시하기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-09 1989