디자인팁

제이쿼리 미리보기 확장기능

페이지 정보

작성자 BSAA 작성일16-05-20 18:01 조회1,813회 댓글0건

본문

 

썸네일 이미지를 클릭시 신속하게 새로운 페이지 영역이 나오면서 썸네일에 관한 정보를 볼 수 있도록 미리보기효과 입니다.

 

샘플 사이트 보기


demo.html 파일을 열어보시면

 

css :  jquery.gridder.min.css

js : jquery.gridder.min.js

 

필수파일

 

제이쿼리 옵션

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

 

// Call Gridder

$(".gridder").gridderExpander({

  scrollOffset: 60,

  scrollTo: "panel", // "panel" or "listitem"

  animationSpeed: 400,

  animationEasing: "easeInOutExpo",

  onStart: function(){

      console.log("Gridder Inititialized");

  },

  onExpanded: function(object){

      console.log("Gridder Expanded");

      $(".carousel").carousel();

  },

  onChanged: function(object){

      console.log("Gridder Changed");

  },

  onClosed: function(){

      console.log("Gridder Closed");

  }

});

});

 

소스 설정

<li class="gridder-list" data-griddercontent="#gridder-content-1"> <----- 첫번째 리스트에 썸네일 이미지 순번이다. 

  <img src="images/images1.jpg" class="img-responsive" width="200"/>

</li> 

 

<div id="gridder-content-1" class="gridder-content"> <------- 첫번째 썸네일 리스트에 상세정보를 표시 데이터 컨텐츠 1

  <div class="row">

  <div class="col-sm-6"><img src="images/images1.jpg" class="img-responsive" /></div> 상세 이미지

  <div class="col-sm-6">

  <h2>Item 1</h2> 상세 타이틀

 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ex augue, hendrerit sed gravida ut, mattis vel tortor. Duis hendrerit sagittis bibendum. Fusce massa risus, hendrerit et est vitae, convallis accumsan ipsum. Integer vitae erat mattis, ornare tortor nec, luctus turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse finibus fermentum consectetur. Nulla vestibulum, diam ut finibus dictum, justo felis blandit mi, sed rhoncus tortor augue vitae orci. Fusce semper eu ante ut faucibus.</p>

 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ex augue, hendrerit sed gravida ut, mattis vel tortor. Duis hendrerit sagittis bibendum. Fusce massa risus, hendrerit et est vitae, convallis accumsan ipsum. Integer vitae erat mattis, ornare tortor nec, luctus turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse finibus fermentum consectetur. Nulla vestibulum, diam ut finibus dictum, justo felis blandit mi, sed rhoncus tortor augue vitae orci. Fusce semper eu ante ut faucibus.</p>

 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ex augue, hendrerit sed gravida ut, mattis vel tortor. Duis hendrerit sagittis bibendum. Fusce massa risus, hendrerit et est vitae, convallis accumsan ipsum. Integer vitae erat mattis, ornare tortor nec, luctus turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse finibus fermentum consectetur. Nulla vestibulum, diam ut finibus dictum, justo felis blandit mi, sed rhoncus tortor augue vitae orci. Fusce semper eu ante ut faucibus.</p>

  </div>

  </div>

</div> 

 

다음 리스트를 작성시 데이터 컨텐츠 번호순을 2부터 시작하면 됩니다.

 

 

 


다운로드

댓글목록

등록된 댓글이 없습니다.