Nivo sloder 를 이용한 간단한 javascript web book viewer, 북 뷰어

북뷰어가 간단히 필요해서 만들게 되었다. 

책장을 넘기는 유려한 효과를 주기위해   깔끔한 

Nivo sloder 를 사용하였다

 javascript web book viewer

섬네일 기능을 사용하여 ..책페이지를 고를 수 있게 처리 

및 페이지 넘김.. 

관련된 파일은.. 

 1. js

<script type="text/javascript" src="/js/jquery-1.9.0.min.js"></script>

<link rel="stylesheet" href="/Nivo-Slider-master/themes/default/default.css" type="text/css" media="screen" />

<link rel="stylesheet" href="/Nivo-Slider-master/themes/dark/dark.css" type="text/css" media="screen" />  

<link rel="stylesheet" href="/Nivo-Slider-master/nivo-slider.css" type="text/css" media="screen" />

<script type="text/javascript" src="/js/jquery.nivo.slider.js"></script>

2. html 표현..

  <!--[if  IE 7 ]>

<style>

.theme-default .nivo-controlNav a {

text-indent: 0;

font-size: 0;

line-height: 0;

}

</style>

<![endif]-->

<div class="slider-wrapper theme-default">

<div id="slider" class="nivoSlider">

<img src="<%=src&"b.jpg"%>"  data-thumb="<%=src&"small/b.jpg"%>" />

 <%

For Each file in files

if file.name  <> "a.jpg" and file.name  <> "z.jpg" and file.name  <> "b.jpg" and file.name  <> "y.jpg"   then

 %>

 <img src="<%=src&file.name%>"  data-thumb="<%=src&"small/"&file.name%>" />

 <% end if 

  Next

 %>

 <img src="<%=src&"y.jpg"%>"  data-thumb="<%=src&"small/y.jpg"%>" />

</div>

 </div>

 3.script   는 아래 처러 ..

<script>

<!--

$(window).load(function() {

$('#slider').nivoSlider({

effect: 'slideInLeft',               // Specify sets like: 'fold,fade,sliceDown'

slices: 15,                     // For slice animations

boxCols: 8,                     // For box animations

boxRows: 4,                     // For box animations

animSpeed: 500,                 // Slide transition speed

pauseOnHover: true,             // Stop animation while hovering

pauseTime: 5000,                // How long each slide will show

startSlide: 0,                  // Set starting Slide (0 index)

directionNav: true,             // Next & Prev navigation

controlNav: true,               // 1,2,3... navigation

controlNavThumbs: true,        // Use thumbnails for Control Nav

manualAdvance: false,           // Force manual transitions

prevText: '이전',               // Prev directionNav text

nextText: '다음',               // Next directionNav text

randomStart: false,             // Start on a random slide

beforeChange: function(){},     // Triggers before a slide transition

afterChange: function(){},      // Triggers after a slide transition

slideshowEnd: function(){},     // Triggers after all slides have been shown

lastSlide: function(){},        // Triggers when last slide is shown

afterLoad: function(){}         // Triggers when slider has loaded

});

});

//  아래는 버튼에  event 를 걸어주는 .

$( document ).on( "mouseover", "#slider .nivo-prevNav", function() {

$('img').attr("data-transition","slideInRight");

$('.nivo-prevNav').trigger('click'); 

});

$( document ).on( "mouseover", "#slider .nivo-nextNav", function() {

$('img').attr("data-transition","slideInLeft");

$('.nivo-nextNav').trigger('click');

});

-->

</script>

 

더 많은 옵션은... 

http://docs.dev7studios.com/jquery-plugins/nivo-slider