jQuery 5 In One Image Effects For Your Photos On Blogger




| 21 comments

Crack Page Blogger Logo IconBloggers are always using images and photos on their blogs so in this post we will see how you can add five different effects to those images.The neat thing about this is you just have to add some jQuery and Css to your template (We make it easy) then you can easily add from 5 hover effects to add some spice to your blog images.

Lets look through the effects and you can also check out the demo to see it in action.

The five effects will be :

Effect 1 - Popout, this is a basic pop out effect on hover the image will pop out from the page.
Effect 2 - SliceDown, The image will have an dark overlay and on hover a slice effect reveals the image clearly.
Effect 3 - BoxRandom, The image has a light overlay and on hover the image is revealed by boxes randomly clearing.
Effect 4 - FoldLeft, Once again the image has a light overlay and this time on hover an accordion fold effect reveals the image.
Effect 5 - RainGrowReverse, This time on hover the image is revealed from corner to corner.

View Demo Button

Add The Image Effects To Blogger


Remember Always Back Up Your Template Before You Make Changes - How To Back Up A Blogger Template

Step 1. In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Template > Then Edit Html > Now Proceed as shown in the video Below :

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

</head>

Step 3. Copy and Paste the following code Directly Above / Before </head>

<script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/143237963/jquery.adipoli.min.js' type='text/javascript'/>
<script type='text/javascript'>
/*<![CDATA[*/
jQuery(function($pice){
$pice('.effect1').adipoli({
'startEffect' : 'normal',
'hoverEffect' : 'popout'
});
$pice('.effect2').adipoli({
'startEffect' : 'overlay',
'hoverEffect' : 'sliceDown'
});
$pice('.effect3').adipoli({
'startEffect' : 'transparent',
'hoverEffect' : 'boxRandom'
});
$pice('.effect4').adipoli({
'startEffect' : 'overlay',
'hoverEffect' : 'foldLeft'
});
$pice('.effect5').adipoli({
'startEffect' : 'transparent',
'hoverEffect' : 'boxRainGrowReverse'
});

});
/*]]>*/

</script>

Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)
]]></b:skin>

Step 5. Now Copy And Paste This Code Directly Above / Before ]]></b:skin>
.adipoli-wrapper{position:relative;display:inline-block;margin:auto}
.adipoli-slice{display:block;position:absolute;z-index:0;height:100%}
.adipoli-box{display:block;position:absolute;z-index:0}
.post img{border:0!important;margin:0!important;padding:0!important}
.adipoli-wrapper>img,.adipoli-before,.adipoli-after{position:absolute;z-index:0}

Step 6. Save your template.

Adding The Effect To Your Images


Now we need to add a class tag to images we want the effect on.So as you seen them on the demo page; if you want to use Effect 1 you add class="effect1" for Effect 2 you add class="effect2" and so on.Below I show were to add this class tag on your images.

OK if your uploading your images directly onto Blogger we have an easy way to add the class.The code below is how the html for an image looks when uploaded to Blogger.

Important - This is when you upload the image in compose mode then switch to html mode.

<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-cbDPX6gDf5E/T_mUG8pC0yI/AAAAAAAAHbI/KMZlTGxy3nA/s1600/image-effects-image-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-cbDPX6gDf5E/T_mUG8pC0yI/AAAAAAAAHbI/KMZlTGxy3nA/s1600/image-effects-image-2.png" /></a></div>

You can see highlighted div class="separator" we change this to div class="effect1" (or effect2 etc..) like below :

<div class="effect1" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-cbDPX6gDf5E/T_mUG8pC0yI/AAAAAAAAHbI/KMZlTGxy3nA/s1600/image-effects-image-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-cbDPX6gDf5E/T_mUG8pC0yI/AAAAAAAAHbI/KMZlTGxy3nA/s1600/image-effects-image-2.png" /></a></div>

If you are adding images in html mode or adding externally hosted images your image code will be like this :

<a href="http://2.bp.blogspot.com/-cbDPX6gDf5E/T_mUG8pC0yI/AAAAAAAAHbI/KMZlTGxy3nA/s1600/image-effects-image-2.png"><img src="http://2.bp.blogspot.com/-cbDPX6gDf5E/T_mUG8pC0yI/AAAAAAAAHbI/KMZlTGxy3nA/s1600/image-effects-image-2.png" /></a>

We add the class as shown below :

<a href="http://2.bp.blogspot.com/-cbDPX6gDf5E/T_mUG8pC0yI/AAAAAAAAHbI/KMZlTGxy3nA/s1600/image-effects-image-2.png"><img class="effect1" src="http://2.bp.blogspot.com/-cbDPX6gDf5E/T_mUG8pC0yI/AAAAAAAAHbI/KMZlTGxy3nA/s1600/image-effects-image-2.png" /></a>

For this we used the idea from the Adipoli jQuery Image Hover Plugin, make sure to check out more of our Blogger Tutorials.

Drop Your Comments And Questions Below.

AuthorAuthor - Paul Crowe is the owner and main author of Spice Up Your Blog.Paul lives in Ireland, has been blogging since 2006 and writing Spice Up Your Blog since 2009.You can find him in the usual social networks.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

21 comments:

  1. Hellow... It's a beautifull tutorial, but i have one question about something else: can you make, someday, a tutorial/talk about the differnecce (advantage, dezadvantage, why using this or that?) between the standard blogger system of commenting and another commenting sistem like disqus, IntenseDebate, Livefyre etc....
    Thank you

    ReplyDelete
  2. i didnt understand how to add class tags to images,where to put the code for effects,,explain a little bit plz plz

    ReplyDelete
    Replies
    1. When you upload your images on Blogger click the Edit Html tab on the top left of the post editor.Then add the tag as shown.

      Delete
  3. You can create Effect1 with css3 for better page speed.

    ReplyDelete
    Replies
    1. You could create a lot of effects with Css, the idea here is to have 5 different effects that can be used at any time.

      Delete
    2. CSS3 is good for speed, and yes we can do alot of experiment to show effects. But still, we can't add effects like what jquery can do using CSS3 only. SO, I agree with Paul.

      Delete
  4. This post is good. I love it. Thanks for helping us spice our blog. Its really a great work u are doing over here.

    ReplyDelete
  5. Wow its amazing post with unique and different design of Images effects.

    ReplyDelete
  6. wow,really cool effects..thanx for lovely post

    ReplyDelete
  7. Love this, i´ll try at my blogs. xo

    ReplyDelete
  8. This is a brilliant post. But i have a problem i added all the codes and i applied it successfully but when i hover on the image it doesn't work. Nothing, maybe you can suggest.

    ReplyDelete
  9. I am having the same issue as Debbie above. What should I do??

    Here is my link: "http://the3amteacher.blogspot.com/

    Thank you for all that you provide for free!!

    Michelle
    The 3AM Teacher
    Visit My Blog
    Email The 3AM Teacher
    Visit My FB Page

    ReplyDelete
  10. Great post! The effect is very nice.

    ReplyDelete
  11. Thanks a lot for very nice trick,but little bit difficult,every time we have to add code when we upload image,is there any other trick no need to add code every time,it will come automatic....????

    ReplyDelete
  12. Thanks Paul Buddy , I was just looking about this script and finally my search is over.

    ReplyDelete
  13. It's works great and fast, thanx a lot, I really like this :)

    ReplyDelete
  14. Good information, Your information is very helpful for me. Thank you very much....

    ReplyDelete
  15. Hi Paul - thanks for this and the slideshow! I have used the slideshow successfully on two sites, but for some reason, this and the slideshow don't work on another blog that I'm working on at the moment. The slide show loads all the pics at once and then slowly removes each one as it's 'changing'. The pic effects above show below the graphic instead of replacing it when I mouse over.

    ReplyDelete
  16. I find some very useful stuff on your blog keep up the good work.

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us