Shutter Effect Image Slider/Gallery On Blogger

I've been constantly trying to pull out unique articles for blogs run on blogger. I'm sure you would have noticed the same provided you are a constant follower of my blog. So, we've yet another interesting article based on jQuery, called the "Shutter Effect for the Images On Blogger", inspired from tutorialzine. Just take a look at the live demo of the effect by hitting the link below and we'll get started...

SHUTTER EFFECT ON BLOGGER - LIVE DEMO

Interesting effect... Isn't it? I would suggest the above effect for blogs based on photography. While, webmasters and web designers can use the above effect to showcase their portfolios. I'm sure there are lots more places wherein you can use the above effect. So, I'm open to your suggestions... Well, let's get started with the tutorial.

JAVASCRIPT/JQUERY
1. Navigate to "Design>>Edit HTML" and click on the "Download full template" link at the top of the page. Once the back up is over, search for the following code in your template.
</head>
2. Paste the code present in the following text document - Jquery For Shutter Effect, just above the line mentioned in step 1.
3. That's it! Save your template temporarily.

HTML
1. Look out for any one of the following codes in your template.
<div id='content-wrapper'>
(or)
<div class='columns fauxcolumns'>
(or)
<div id='main-wrapper'>
2. Paste the following code just below the code, you searched for, in step 3.
<div id='container' style='position: relative;'>
<ul>
<li style='display: none;'>
<img height='450' src='IMAGE URL' width='600'/>
</li>
<li style='display: none;'>
<img height='450' src='IMAGE URL' width='600'/>
</li>
<li style='display: list-item;'>
<img height='450' src='IMAGE URL' width='600'/>
</li>
<li style='display: list-item;'>
<img height='450' src='IMAGE URL' width='600'/>
</li>
</ul>
<div class='shutterAnimationHolder' style='width: 600px; height: 450px; display: none;'>
<div class='film' style='height: 15000px; width: 1000px; margin-left: -500px; top: -300px;'>
<canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/>
</div>
</div>
</div>
(Note: It is not necessary that you place the above code below those lines mentioned in step 3. You can place them anywhere in your template. If you end up with some layout issues or bugs, then leave a comment below.)
3. Replace "IMAGE URL" with the URL of your images - image dimensions shall be 600x450px. Save your template again.
4. If you wish to change the width and height of the images (600x450px), then you need to change the codes highlighted in blue mentioned at step 2.

CSS
1. Search for the following code in your template. 
]]></b:skin>
2. Add the following piece of code just above the line mentioned in step 1.
#container{
    width:600px;
    height:450px;
    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);
    margin-bottom:5px;
}

#container ul{
    list-style:none;
    margin-top:0px;
}
.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;
}
3. Save your template and we're done. 
Just in case you customized the image or in other words, followed the step 4 in HTML part, then change the codes highlighted in green mentioned at step 2. If not, just neglect this step and check out the stunning effect on your blog.

The above effect was tested to work perfectly fine on all the major browsers that include, not limited to, FF, Chrome, Opera and Safari. If you find the HTML part difficult to customize, then you may refer to the following text document for the coding that I used on the demo blog - Reference for Shutter Effect. Share your opinions via comments!

Enjoyed the article?
Subscribe to this Blog via Email:

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

    Other Recommended Posts

  • Blogger Tutorials, jQuery
Niño said on August 11, 2011 at 9:22 PM :

Is there any possibility where we can have dynamic images...wherein we would not need to manually input the image URL?

REPLY
Sagar said on August 11, 2011 at 10:32 PM :

Awesome dude, simply amazing ! :)

REPLY
Mukund said on August 11, 2011 at 11:09 PM :

@Niño: Well, there should be a source url for the images to pick up! So, it's not possible. We can dynamically call the images provided the Jquery or Javascript you write has the image in it. For example, the shutter image which is used in the above tutorial is dynamically called. Hope I answered your query! Thanks for the comment buddy!

REPLY
Mukund said on August 11, 2011 at 11:11 PM :

@Sagar: Thanks for the comment buddy! Hope you enjoy the upcoming articles on my blog too:)

REPLY
Sagar said on August 11, 2011 at 11:12 PM :

I love reading your Blog Mukund:)

REPLY
blogging said on August 12, 2011 at 9:47 AM :

this's very suitable for album photos weblog, awaiting for yr lightbox effect ;>

REPLY
Mukund said on August 12, 2011 at 11:02 AM :

@blogging: Yes! I'm working the same! I hope you'll find the article published in not more than 10 days! Thanks for the comment buddy!

REPLY
Blogigng said on August 18, 2011 at 2:11 PM :

@Mukund Thanks, i have found the code to automatically add the lighbox effect on all image, even copy image :) I share it on my blog already

REPLY
Mukund said on August 18, 2011 at 3:07 PM :

@Blogigng: Well, I've seen this lightbox effect on many blogs. I want a lightbox effect for a gallery of images and not just one image!

REPLY
stumpedout said on August 25, 2011 at 10:58 PM :

Any way to add links to the post and link title?

REPLY
Mukund said on August 25, 2011 at 11:32 PM :

@stumpedout: Well, you need to define a separate CSS class for the same. I'm not sure if it achievable but I guess we can:) Should redo the codes to fit in as per your needs.

REPLY
MaherHackers said on August 28, 2011 at 2:18 AM :

Amazing Tutorial Dude...Like it.

REPLY
Mukund said on August 28, 2011 at 11:04 AM :

@MaherHackers: Yup! Thanks for the comment buddy! I hope you enjoy the upcoming tutorials as well:)

REPLY
benooi said on August 29, 2011 at 7:52 PM :

This is absolutely POWERFULL! thanks....

REPLY
Mukund said on August 29, 2011 at 11:16 PM :

@benooi: More power to you:) Thanks for the comment:)

REPLY

Use the tab below to comment. No spam please!!!

[netinsert=0.0.1.11.14.1]