How to Add Shutter Image Effect on Blogger

In this post i will show you How To Add shutter effect image/photo slider/Gallery Featured Slideshow to blogger. This is a featured slideshow with shutter effect. This is done using jQuery and Canvas

  

SHUTTER EFFECT IMAGE SLIDER DEMO

Live Demo

HOW TO ADD FEATURED MOVING SLIDESHOW TO BLOGGER

• Go to Blogger Dashboard --> Design --> Page Elements
• Click on Add a Gadget then select HTML/JavaScript Widget
• Copy the code shown below and paste it inside the widget.

<div id="cont">
<li><img height="400" src="http://demo.tutorialzine.com/2011/03/photography-portfolio-shutter-effect/assets/img/photos/1.jpg" width="640" /></li>
 <li><img height="400" src="http://demo.tutorialzine.com/2011/03/photography-portfolio-shutter-effect/assets/img/photos/1.jpg" width="640" /></li>
 <li><img height="400" src="http://demo.tutorialzine.com/2011/03/photography-portfolio-shutter-effect/assets/img/photos/1.jpg" width="640" /></li>
 <li><img height="400" src="http://demo.tutorialzine.com/2011/03/photography-portfolio-shutter-effect/assets/img/photos/1.jpg" width="640" /></li> </ul>
</div>
<style>
 #cont{ width:640px; height:400px; margin:0 auto; border:5px solid #fff; overflow:hidden; -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); }
#cont ul{ list-style:none; padding:0; margin:0; }
 #page{ width:650px; height:400px; }
#cont img{ padding:0; } .shutterAnimationHolder .film canvas{ display: block;     margin: 0 auto; } .shutterAnimationHolder .film{ position:absolute; left:50%; top:0; } .shutterAnimationHolder{ position:absolute; overflow:hidden; top:0; left:0; z-index:1000; }
</style>
<script src='http://latesthack.googlecode.com/svn/mywidgets/shuttereffect/shutter.js'> </script>
<script src='http://latesthack.googlecode.com/svn/mywidgets/shuttereffect/script.js'> </script>