Recent news

Wednesday, 25 May 2016

jQuery Flip Book Plugin Using CSS3




jQuery flip bool plugin provide slider using css3 like a book. This plugin flip gallery images with 3D transforms activated by jQuery to create the effect.

How To Use
1. Add the below library reference

<link rel="stylesheet" type="text/css" href="http://inserthtml.com/demos/javascript/flip-book/style.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://inserthtml.com/demos/javascript/flip-book/modernizr.js"></script>
<script src="http://inserthtml.com/demos/javascript/flip-book/jquery.pictureflip.js"></script>


2. Now add the below html tag.

<div id="flipbook">
       <div class="slide">
              <img src="images1.jpg" alt="" />
              <div class="content"><a href="#">Flowers: What you didn't know</a></div>
       </div>
       <div class="slide">
              <img src="images2.jpg" alt="" />
              <div class="content"><a href="#">Flowers: Real or Fiction?</a></div>
       </div>
       <div class="slide">
              <img src="images3.jpg" alt="" />
              <div class="content"><a href="#">A Flower ate my Baby!</a></div>
       </div>
       <div class="slide">
              <img src="images4.jpg" alt="" />
              <div class="content"><a href="#">Will Flowers Destroy Earth?</a></div>
       </div>
</div>


3. Add the below code to perform operation
                                                                                                                              
    $(document).ready(function () {

        $('#flipbook').pageFlip({

        });

    });




Pranav Singh Author: Pranav Singh

Hello, I am Author of this blog. The main purpose of this blog is to provide all the jQuery plugins which is helpful in designing and developing a web application in a single location from the web.

Previous
Next Post »

E-mail Newsletter

Sign up now to receive breaking news and to hear what's new with us.

Recent Articles