갤러리 슬라이더 > 정보공유

본문 바로가기

쇼핑몰 검색

위토즈소프트 로그인

회원가입 회원가입  아이디/비밀번호찾기 아이디/비밀번호찾기

정보공유 목록

JQUERY | 갤러리 슬라이더

페이지 정보

작성자 위토즈 쪽지보내기 아이디로 검색 전체게시물 작성일18-01-10 11:26 조회1,248 회 댓글0 건

첨부파일

본문

 

<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 321건 1 페이지
정보공유 목록
번호 제목 글쓴이 날짜 조회
321 API 구글맵 Google 지도를 제대로 로드할 수 없습니다. 메시지 뜰경우 (방법2) 인기글 위토즈 쪽지보내기 아이디로 검색 전체게시물 10-18 183
320 API 구글맵 Google 지도를 제대로 로드할 수 없습니다. 메시지 뜰경우 (방법1) 인기글 위토즈 쪽지보내기 아이디로 검색 전체게시물 10-18 219
319 영카트팁 카테고리 분류관리에서 하위분류 아이콘이 안나올경우 인기글 위토즈 쪽지보내기 아이디로 검색 전체게시물 09-17 179
318 PHP 원하는 날짜에 해당하는 주간날짜 구하기. (월~일) 인기글 위토즈 쪽지보내기 아이디로 검색 전체게시물 09-06 216
317 퍼블리싱 반응형 테이블 만들기. 인기글 위토즈 쪽지보내기 아이디로 검색 전체게시물 09-01 349
316 JQUERY 확장성있는 글깜빡임 처리 인기글 위토즈 쪽지보내기 아이디로 검색 전체게시물 08-29 274
315 PHP 단어변환 참고. 인기글 위토즈 쪽지보내기 아이디로 검색 전체게시물 08-21 326
314 기타 3자리 은행 코드 인기글 위토즈 쪽지보내기 아이디로 검색 전체게시물 08-14 494
313 PHP 생년월일로 나이계산 함수 인기글 위토즈 쪽지보내기 아이디로 검색 전체게시물 08-02 939
312 JQUERY 유투브 영상 바로실행하고 영상위에 텍스트 올려서 링크 걸기. 인기글 위토즈 쪽지보내기 아이디로 검색 전체게시물 08-01 512
311 JQUERY 메뉴 슬라이드 다운 인기글 위토즈 쪽지보내기 아이디로 검색 전체게시물 08-01 450
310 영카트팁 상품의 기본 통화단위를 달러로 변환 인기글 위토즈 쪽지보내기 아이디로 검색 전체게시물 07-30 571
309 그누보드팁 블럭 페이지 샘플 인기글 위토즈 쪽지보내기 아이디로 검색 전체게시물 07-24 558
308 영카트팁 상품의 옵션이 너무 많이 등록되어있을경우 페이지 로딩이 지연됨. 인기글 위토즈 쪽지보내기 아이디로 검색 전체게시물 07-20 397
307 그누보드팁 저장하고 나서 소스를 수정하지 않았는데 오류가 발생할경우. 인기글 위토즈 쪽지보내기 아이디로 검색 전체게시물 07-10 528
게시물 검색