scribble

Scribble

About Blog GitHub

05 Sep 2011
Implementing Flux Slider in Blogger

At some point in a site you might have used a slider of images for e.g. your featured articles or something. While there are literally hundreds of these out there, Flux goes a step further and while browser support is not the best , have a look at it as it utilizes some really great CSS3 effects. As the author states, you can either use jQuery or Zepto.js. In order to view the demo you need a browser that supports CSS3 transitions (Chrome or Safari ). It utilizes hardware acceleration wherever possible to improve performace on less powerful devices, such as mobiles & tablets making it mobile friendly specially iPad/Android.




See Demo



Download






Steps to Add it to Blogger:

1.Login to the Blogger account


2. Now Go to Design > Edit HTML.


3.Now search for the </head> tag and paste the following code just Above/Before it. (How to copy code easily)
<!--[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="demo.css" type="text/css" media="screen" title="no title" charset="utf-8">
<!-- <script src="zepto.js" type="text/javascript" charset="utf-8"></script> --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="flux.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
if(!flux.browser.supportsTransitions)
alert("Flux Slider requires a browser that supports CSS3 transitions");

window.f = new flux.slider('#slider', {
pagination: true
});
});
</script>

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!




2.Go to the Post/Page/Gadget you want to add this plugin and then go to Edit HTML tab .



3.Now copy the code from below and paste it there. (How to copy code easily)

<!--[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="demo.css" type="text/css" media="screen" title="no title" charset="utf-8">
<!-- <script src="zepto.js" type="text/javascript" charset="utf-8"></script> --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="flux.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
if(!flux.browser.supportsTransitions)
alert("Flux Slider requires a browser that supports CSS3 transitions");

window.f = new flux.slider('#slider', {
pagination: true
});
});
</script>

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!


4.Now for adding the images into this plugin see the following markup:



<section class="container"> 
<div id="slider">
<img src="avatar.jpg" alt="" />
<img src="greenhornet.jpg" alt="" />
<img src="ironman.jpg" alt="" />
<img src="tron.jpg" alt="" />
</div>
</section>

The class container gives the pagination and bordering style to the plugin.

5.Now save the Post/Page.


See Demo



Download







Facing any problems ,Please feel free to ask

Til next time,
Prayag Verma at 18:25

scribble

About Blog GitHub