Flipper JQuery Plugin: Page Flip Image Gallery Widget

Socialize It →

Tweet

19

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. 

Flipper: Page Flip Image And Text Widget (LIVE DEMO)

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjoiHC2qv8KEk2jPIGaD5gijqzzMdhH2W3PK7RNkIbofM-8lkjNMzKI59NvkyuI6QdvKwoQ9v9Pq5_pbPj-7sp52Lzso2BLkVrn3VoAGINrXGJPopxZWZ6_staMkWiP_rDy4jP8ff_p4c/s1600/1.png" class="fullsize" /></div></div>


<div class="flipper-page no-padding">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKdZ3OozihMzfYPtx1Xg7e6CUe-jZhBRnUMn3k-V8vtTJ6AZALzsHxD4acL8MMkdss59LRPYigCVrjberMxNB5JS20tcla6Et2l1hlCq8r22oUdo94Qwq92HAN8qnmTYRFmP92vSlyTkM/s1600/2.png" class="fullsize" /></div>

<div class="flipper-page no-padding">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJfcdbM-BVksQog4lpUcZslTN7CNTSXCtB6k6qev5nLZn5gKejMDOgRNmFvB7epfWeaVYGtG_T5OkZ4HHrPf6wIx9SE91BVr6VMhJFJt5EMIHJJ4_8hOmkuw1c0TddZnLjPWGKMmsgb4U/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVJ6NoRtIFqE7iShDviKPNs6kYScSng9lRullgppIouSuwPcTUf2qVO4IZdo6YAqFNscoPHjMNF5arjZQ2n6ffRF86GqOLAMOl9xPmsusNd55tdrmeGelnhW9im2-ILiUDEc6ReDfZJhg/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVJ6NoRtIFqE7iShDviKPNs6kYScSng9lRullgppIouSuwPcTUf2qVO4IZdo6YAqFNscoPHjMNF5arjZQ2n6ffRF86GqOLAMOl9xPmsusNd55tdrmeGelnhW9im2-ILiUDEc6ReDfZJhg/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

About the Editorial Team

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