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

For Multiple Usage
For Single Usage

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

05 Sep 2011 Implementing Flux Slider in Blogger

05 Sep 2011
Implementing Flux Slider in Blogger