3D Book Flipping Image Slideshow with jQuery and CSS3 - OneBook3D

OneBook3D is a jQuery plugin which allows you to create a responsive, flexible, beautiful image slider/slideshow with cool 3D pageflip effects. For local security reasons, some things will not work locally, but everything will work on your website. OneBook3d is supported only by: Chrome, Opera (WebKit), Firefox and Safari.

Features:

• Auto generates a set of controls to easily navigate through your images.
• Flexible, adaptive and responsive design with image auto resizing.
• Dynamically add your images through JS array.
• Fully customizable and has fullscreen mode support.

How to use it:

1. Include jQuery library and the jQuery OneBook3D plugin in the html page.

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/jquery.onebook3d.min.js"></script>

2. Include jQuery mousewheel plugin for mouse wheel navigation support (Optional).

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.11/jquery.mousewheel.min.js"></script>

3. Create an empty container to place the 3D book flipping slideshow.

<div id="photobook"></div>

4. Call the plugin and pass the images array. You can add as many images to array as you want. Plugin has smart loading system.

var srcDemo = [
  '010.jpg',
  '011.jpg','002.jpg',
  '004.jpg','007.jpg',
  '005.jpg','012.jpg',
  '003.jpg'
  ];

$('#photobook').onebook(srcDemo,{OPTIONS});

5. Available options.

• startPage: page that will be displayed when the book starts, default:1 
• flip: string (’basic’,’soft’), type of the flip animation, default:’basic’
• skin: string (’dark’,’light’), the book’s skin mode. Can be as array with two valuesfor both embedded and fullscreen plugin mode, default:’dark’
• bgDark: text/css, set background image for ‘dark’ skin, default:’’
• bgLight: text/css, set background image for light’ skin, default:’’
• pageСolor: text/css, set color for all pages in book, default:’white’
• slope: int (0 | 1 | 2), slope mode, default: 0
• border: int, space around images, default:30
• language: string (’en’, ‘ru’), skin language, default:’en’
• cesh: boolean (true/false), cesh images, default:true

---

This awesome jQuery plugin is developed by riadesign. For more Advanced Usages, please check the demo page or visit the official website.