Flipper JQuery Plugin: Page Flip Image Gallery Widget

Advertisements
Flipper is an attractive Jquery Plugin which renovates any content to a beautiful book-like widget! With its touch page-turnover effect, you can easily move from one page to another without having any trouble. If you are using any tablets like iPad, then you can easily use your figures to turn its pages while if you are on a desktop then you can flick pages with the help of your mouse. After 2 hours of hard-line coding, finally I was able to recode the widget by Nickys. It could be used on any platform which accepts HTML whether its Blogger or WordPress, you can utilize it on any website.  This Flipping Widget will provide a whole new glance to your blog or website and thus, it will attract users like a bee to a honey.

We know you cannot wait to preview the Flipper: Page Flip Text and Image Gallery Widget, so no more waiting go a head and give it a try. 



What is Flipper Plugin and Its Feature?

There are tons and tons of Flipping Plugins and software available on the internet which is created with the intention to convert an unexciting content into an eye-catching flicking book. This widget is so flexible and has a quick interface this is the motive why it is extremely responsive in terms of functionality.
  • Flipper is optimized for Smartphone, Tablets, Desktops and etc.
  • With Touch Screen, you can navigate pages though your figures.
  • It has Flexible interface, touch gestures and clean design.
  • It is super lightweight thus, no compromise on your site speed.
  • You can not only use images but can also utilize text in this Flipper widget.

How To Add Flipper Jquery Plugin on Blogger BlogSpot:

The procedure is extremely straightforward and it will take minutes to be integrated into your Blogger Blog. We have shaped this tutorial in such a way that it soaks less time and gives perfect results.
  • Go to Blogger.com > Your Blog >> Template
  • Download Backup of your template incase anything went wrong.
  • Then select Edit HTML >> Proceed
  • Now in your Template Search for ]]></b:skin> and just above it paste the following CSS (Style Sheet) code.


.flipper-wrap *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

.flipper-wrap{position:relative;width:800px;height:400px;margin:20px 0 40px 0}

.flipper-wrap{-moz-user-select:none;-webkit-user-select:none;user-select:none;-ms-user-select:none}

.flipper-page{position:absolute;left:0;top:0;width:200%;height:100%;background:white;border:1px solid #e1e1e1}

.flipper-page-left{overflow:hidden;position:absolute;left:0;top:0;width:50%;height:100%}

.flipper-page-left 

.flipper-page{left:0}

.flipper-page-right 

.flipper-page{right:0;left:auto}

.flipper-page-right{overflow:hidden;position:absolute;right:0;top:0;width:50%;height:100%}

.flipper-page-wrap{position:absolute;left:0;top:0;width:100%;height:100%}

.flipper-overlay{display:none;width:100%;height:100%;position:absolute;left:0;top:0;z-index:9999}

.flipper-page-right 

.flipper-overlay{background:-moz-linear-gradient(left,rgba(0,0,0,0.085) 0,rgba(0,0,0,0.04) 100%);background:-webkit-gradient(linear,left top,right top,color-stop(0%,rgba(0,0,0,0.085)),color-stop(100%,rgba(0,0,0,0.04)));background:-webkit-linear-gradient(left,rgba(0,0,0,0.085) 0,rgba(0,0,0,0.04) 100%);background:-o-linear-gradient(left,rgba(0,0,0,0.085) 0,rgba(0,0,0,0.04) 100%);background:-ms-linear-gradient(left,rgba(0,0,0,0.085) 0,rgba(0,0,0,0.04) 100%);background:linear-gradient(left,rgba(0,0,0,0.085) 0,rgba(0,0,0,0.04) 100%);
filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#40000000',endColorstr='#14000000',GradientType=1)}

.flipper-page-left .flipper-overlay{background:-moz-linear-gradient(left,rgba(0,0,0,0.04) 0,rgba(0,0,0,0.085) 100%);background:-webkit-gradient(linear,left top,right top,color-stop(0%,rgba(0,0,0,0.04)),color-stop(100%,rgba(0,0,0,0.085)));background:-webkit-linear-gradient(left,rgba(0,0,0,0.04) 0,rgba(0,0,0,0.085) 100%);background:-o-linear-gradient(left,rgba(0,0,0,0.04) 0,rgba(0,0,0,0.085) 100%);background:-ms-linear-gradient(left,rgba(0,0,0,0.04) 0,rgba(0,0,0,0.085) 100%);background:linear-gradient(left,rgba(0,0,0,0.04) 0,rgba(0,0,0,0.085) 100%);
filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#14000000',endColorstr='#40000000',GradientType=1)}

.flipper-page-right{-webkit-backface-visibility:hidden;-webkit-transform-origin:0 50%;-moz-backface-visibility:hidden;-moz-transform-origin:0 50%;-ms-backface-visibility:hidden;-ms-transform-origin:0 50%;-o-backface-visibility:hidden;
-o-transform-origin:0 50%;backface-visibility:hidden;transform-origin:0 50%}

.flipper-page-left{-webkit-backface-visibility:hidden;-webkit-transform-origin:100% 50%;-moz-backface-visibility:hidden;-moz-transform-origin:100% 50%;-ms-backface-visibility:hidden;-ms-transform-origin:100% 50%;-o-backface-visibility:hidden;
-o-transform-origin:100% 50%;backface-visibility:hidden;transform-origin:100% 50%}

.flipper-page img{max-width:100%}

.flipper-column-full{display:block;width:100%;height:100%}

.flipper-column-full-half{float:left;display:block;width:50%;height:100%;margin:0;padding:0}

.flipper-column-outer{float:left;padding:30px;width:50%;height:100%}

.flipper-column-single-outer{padding:30px;width:100%;height:100%}

.flipper-column{overflow:hidden;height:100%;width:100%}

.flipper-inner-image{display:block;overflow:hidden}

.flipper-inner-image.start{margin-bottom:20px}

.flipper-inner-image.end{margin-top:20px}

.flipper-inner-image img{float:left}

.flipper-wrap{font:12px/18px helvetica,tahoma,sans-serif;color:#333;background-color:#fff}

.flipper-wrap h1{font-size:22px;line-height:36px}

.flipper-wrap p{margin:18px 0}

.flipper-next-page{position:absolute;width:38px;height:38px;right:-44px;top:50%;margin-top:-19px;cursor:pointer}

.flipper-prev-page{position:absolute;width:38px;height:38px;left:-44px;top:50%;margin-top:-19px;cursor:pointer}

.flipper-pager-wrap{position:absolute;left:0;bottom:-24px}

.flipper-pager{float:left;width:17px;height:18px;margin:5px 5px 0 0;cursor:pointer}

.flipper-temp{border:1px solid #e1e1e1;top:-1px}

.flipper-fb-bounce{position:absolute;z-index:9999;background:#e1e1e1;padding:10px;right:0;top:0;font:12px/18px helvetica,tahoma,sans-serif;color:#333;display:none}

.demo-box {
 padding: 10px 0 5px 0;
}
#my-flipper, #myflipper {
 margin: 0 auto;
}
.flipper-page-padding-wrap {
 padding: 40px;
}
#myflipper h1 {
 text-align: center;
 font-size: 36px;
 line-height: 340px;
 font-weight: 100;
 font-style: italic;
}
#myflipper h2 {
 text-align: left;
 font-size: 22px;
}
p.headline.first {
 margin-top: 155px;
}
#myflipper p.headline {
 display: block;
 font-size: 16px;
 line-height: 22px;
 font-weight: 100;
 font-style: italic;
 text-align: center;
}
p.left {
 position: absolute;
 left: 30px;
 top: 30px;
 width: 40%;
}
p.right {
 position: absolute;
 width: 40%;
 bottom: 30px;
 right: 30px;
}
#myflipper .description.no-margin {
 margin-top: 40px;
}
.flipper-page .fullsize {
/* margin: -31px 0 0 -31px;*/
}
.mag {
 -moz-column-count: 2;
 -moz-column-gap: 20px;
 -webkit-column-count: 2;
 -webkit-column-gap: 20px;
 column-count: 2;
 column-gap: 20px;
}
.mag img {
 float: left;
 margin: 0 10px 10px 0;
 width: 200px;
}
.video-wrapper {
 width: 700px;
 margin: 80px auto;
}
.video-wrapper h3 {
 font-size: 36px;
 line-height: 22px;
 font-weight: 100;
 cursor: pointer;
 text-align: center;
 font-family: helvetica;
 color: white;
 text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}



5. Now Search for </head> once you find it then just above it paste the following JavaScript (Jquery) code.

<script src="http://mbl-flipper-google-blogger.googlecode.com/files/modernizr-2.min.js"></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js?ver=3.3.2'></script>

<script>

(function ($, undefined) {

$(document).ready(function() {

$('#myflipper').flipper({

'width' : 700,

'height' : 400,

"arrows" : true,

pager : true,

'imagesPath' : 'http://mybloggerlab.com/Images/'

});

});

}(jQuery));

</script>
<script src="http://mbl-flipper-google-blogger.googlecode.com/files/flipper.min.js"> </script>

6. Now Go to Layout >> Add a Gadget >> Add HTML/JavaScript >> and then paste the following code 


<!-- MBL Page Flipper Widget -->
<div class="demo-box">
<div id="myflipper">

<div class="flipper-page"><div class="flipper-page-padding-wrap">

<img src="http://1.bp.blogspot.com/-h2XxOod_CPA/T_G_FT8qzZI/AAAAAAAAC3c/o4gizpZiQ2A/s1600/1.png" class="fullsize" /></div></div>


<div class="flipper-page no-padding">

<img src="http://4.bp.blogspot.com/-VdIGOZU3vbI/T_HBsCCXL9I/AAAAAAAAC3s/iNjgeKgAcnw/s1600/2.png" class="fullsize" /></div>

<div class="flipper-page no-padding">

<img src="http://1.bp.blogspot.com/-S4hWdVKqzJk/T_HElUPmhXI/AAAAAAAAC34/geiNTRgzBJE/s1600/3.png" class="fullsize" /> </div>

<div class="flipper-page"><div class="flipper-page-padding-wrap">
<h2>How about some text?</h2>
<p class="mag">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.<br /><br />

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>

<p class="headline" style="margin-top: 40px;">It feels just like a magazine.</p>
</div></div>

<div class="flipper-page">

<p class="headline first">Flicking through photos feels just like in an album. <br />Thank you for checking out Flipper.</p>
</div>

<div class="flipper-page">

<img src="http://4.bp.blogspot.com/-AxNmUQ77ekg/T_HbXUuEasI/AAAAAAAAC4s/X1yBBUeLVts/s1600/flipper.png" />
</div>

</div></div>

Remember: You can paste the Above HTML code anywhere you like i.e. in post, above posts, bellow posts and etc

7. Now you will keep the title box empty and then Save your widget by pressing Save Now button.

How To Customize Flipper:

  • If you want to add more Text pages on your Flipper, just add the following coding at the end of your HTML coding (in step 6) 
<div class="flipper-page"><div class="flipper-page-padding-wrap">
<h2>How about some text?</h2>
<p class="mag">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.<br /><br />
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<p class="headline" style="margin-top: 40px;">It feels just like a magazine.</p></div></div>
  • If you want to add more images to your Flipper, then paste the following Code at the end of your HTML coding (in step 6)
 <div class="flipper-page">
<img src="http://4.bp.blogspot.com/-AxNmUQ77ekg/T_HbXUuEasI/AAAAAAAAC4s/X1yBBUeLVts/s1600/flipper.png" />
</div>
  • The customization of the Flipper is extreamly strightforwad, i am sure you will not find any sort of difficulty while personalizing.  
From the Editors Desk:
So, guys we hope you have enjoyed the sweetest widget we ever made. These widgets will surly take your blog to the next level.If you need any help with this, or any other tutorial don’t be shy feel free to ask till then peace, blessings and Happy Flipping.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

19 comments

July 2, 2012 at 8:20 PM

Wow! Amazing! Thanks!

by
http://hari11888.blogspot.in

July 2, 2012 at 8:46 PM

Awesome CSS & JS C ode For Page Flip Effect Is Nice

Thanks Syed ------/

July 3, 2012 at 4:16 AM

Good post! thanks :-)

July 3, 2012 at 5:07 AM

Hi Syed,
this is something awesome I have seen after a long time for blogger, right now I can't use it on my main blog but I'd surely add it on my entertainment blogs and thank you very much for such a wonderful widget I appreciate all your efforts on this.. and keep them coming :))

July 3, 2012 at 5:21 AM

Super :) Post :)

July 4, 2012 at 1:19 AM
July 4, 2012 at 4:13 AM

ohh man nice foundation keep it up.....

July 10, 2012 at 4:11 AM

its awesome...:)blogtariff

July 13, 2012 at 7:08 PM

Hi, The Flipper pages are going beyond the border in chrome .Could you let me know where I am going wrong. http://notmypages.blogspot.co.uk/

Editorial Team MOD
July 14, 2012 at 1:16 AM

Thanks Everyone for Liking and Appreciating our Effort, And we will continue to Introduce Stunning Widgets So Stay Tuned.

@Anantha Ramakrishnan
I Don't Think so its the Widgets Problem Because the Widget is Only Put Live after testing again and again on Different Templates. Try To Customize the Flipper CSS. Or Send Us your Template Again We will Do it for You. Peace and Blessings

August 13, 2012 at 3:04 AM

That's very amazing, I liked it too much. I am too much impressed and this feature are very good. It works perfect for my tablet. Thanks man.
page turning software

August 13, 2012 at 10:00 PM

How do I size it so its the perfect size for my blogger blogs sidebar? I want it to fit 150x150 images, not huge images

August 13, 2012 at 10:04 PM

can the images be clickable?

Editorial Team MOD
August 14, 2012 at 4:17 AM

width:800px;height:400px Change these According to your Need From the CSS Coding. I Hope it will fit your Sidebar

Editorial Team MOD
August 14, 2012 at 4:17 AM

Yes Images are Clickable

September 1, 2012 at 6:43 AM

Is it possible to modify it by any means to give the same effect with posts and next and previous button because i want to make a template with same effect.
waiting for your asistance syed bro.

Editorial Team MOD
September 1, 2012 at 6:50 AM

Blogger it is possible but for that thing you need a high class developer because it is real touch to build a whole template that works like Flipper. Even this widget took alot hours to create. Peace

October 8, 2012 at 9:54 PM

Hi I want to change the color of navigation buttons below the flipper to the extreme left. Please help me which coding should i change

February 28, 2015 at 8:33 PM

really awesome

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.