10 Superb Image Effects and Slider Tutorials with Jquery


Jquery iMAGE EFFECTS10 Superb Image Effects and Sliders with Jquery and CSS.

I haven’t been into jquery much but since i had to use it in one of my site i worked on one and i became a fan of jquery. that is why i have gathered a list of awesome jquery effects tutorial for images and sliders.

All tutorials are gathered from various sites and are linked back.

Fancy Thumbnail Hover Effect w/ jQuery

This is an awesome thumbnail hover effect jquery tutorial. Get rid of the same plain old thumbnail images by this simple tutorial. A great work done by www.sohtanaka.com.

jquery thumbnail effect

Sliding Boxes and Captions with jQuery

This tutorial is my personal favorite, u can stylize your images with divs/boxes and make superb , very attractive effects by simple jquery. The tutorial belongs to www.buildinternet.com

sliding box jquery tutorial

Create an Image Rotator with Description (CSS/jQuery)

This is a very very handy and attractive master piece of jquery and css. You can pour life in your site’s homepage by using this image rotator. All your features of site can be well explained in limited space too. This tutorial Belongs to www.designm.ag

jquery image rotator

AnythingSlider jQuery Plugin

AnythingSlider is an attempt at bringing together the functionality of all of those previous sliders and adding new features. It is an awesome Plugin/ Jquery you can make animated slider effect with images, text, text and images together, very well written by www.css-tricks.com



A superb easy to use plugin which switches between images in a very attractive animated style. An awesome work done by www.hieu.co.uk

jquery image switch


carausel viewer jquery

Image Cross Fade Transition

In particular, Nathan Wrigley of pictureandword.com, needed a method one image into another mouse rolls over, and the slowly fade back once the mouse has left. Image rollovers were the staple JavaScript nugget of the 90s, and for a lot of JavaScript developers I know, one of the starting places their passion for JavaScript. Today, rollovers are a no-brainer – either in CSS or with the simplest of JavaScript:

image cross fade transition


Scrollable is useful jQuery plug-in for creating scrollable content. Scrollable items can contain any HTML. You can make items scroll horizontally or vertically and choose how many items are visible at once.

scrollable jquery plugin

Creating a polaroid photo viewer with CSS3 and jQuery

This example is making use of CSS3 and jQuery. It really shows the effect when combining two powerful techniques. The CSS3 is injected by jQuery, keeping the CSS file clean. The result is nice looking polaroidsthat you can drag around on the page…cool!

poloroid jquery photo viewer

Create a Thumbnail Gallery with Slick Heading and Caption Effect with jQuery

This tutorial will show how to add heading and caption to your thumbnail and display it with jQuery cool transition effect. It’s an elegant way to put content in your website, and only display it when users want to see it. It keeps your website clean!

thumbnail gallery jquery

create free website wix below post

Further Related Readings

  1. Jason October 23, 2009 at 5:24 am

    Nice work with jquery .

  2. Frog October 27, 2009 at 4:50 am

    Bookmarked! Thanks

  3. eagle November 11, 2009 at 12:48 pm

    you’re jenius ,, I Love you

    1. Ayaz Malik November 11, 2009 at 4:50 pm

      lol thx XD

  4. eagle November 11, 2009 at 12:55 pm

    you are beautiful

  5. christmas stocking fillers November 25, 2009 at 1:26 am

    Thanks for the great tutorial. Just one question: Is it at all possible to make the slideshow not have to rewindto the first image one the last image is reach, but instead just move forward to the first image like an infinite loop?

  6. Kyle January 25, 2010 at 8:17 am

    Hey great work!

  7. PC Walkthroughs January 25, 2010 at 8:43 am

    This plugin is really fantastic, but there’s one thing I can’t seem to figure out how to do. I’m trying to have the picture change by clicking a text link instead of the thumbnail image. Every jquery plugin I’ve found so far uses thumbs as the base point for the image swap.

    To be more specific, I’d want the image to change by clicking on the title of the piece (ex. Slowing Down) and having that change the image and getting rid of the thumb all together.

    Any way to do this?

  8. Ayaz Malik January 25, 2010 at 8:46 am

    there are ten plugins in this post which one are u refering too ?

  9. Paarth June 13, 2010 at 3:57 am

    Nice post, some plugings / effects are really cool.

  10. waleed July 12, 2010 at 11:44 am

    also find my top jquery-image-content-slider for this month

  11. vikas July 12, 2010 at 11:45 am

    There is a website where you can simply convert your photo to sketch or painting with maintaining actual size and that is totally free……

  12. GDesignwork - Web Site Designer September 19, 2010 at 8:13 pm

    Nice article you have here mate! Very useful, bookmarked.

  13. jCrazy November 20, 2010 at 3:25 am

    wow! really nice collection which i’m searching for i really need in one of my projects
    thanx a lot!!

  14. ionman March 15, 2011 at 1:31 am

    anything with a numeric navigation instead of thumbnails? these are good though… thanks

  15. Jennifer April 10, 2011 at 2:20 am

    Thank you for this collection, it’s the best I have seen so far – every one was an inspiration. Hope you find more, I’ve bookmarked your website.

  16. Fader August 5, 2011 at 7:46 am

    Good Stuff is here Nice cOllection

    1. Tayyab August 6, 2011 at 2:20 am

      Thank you Fader!

  17. prashant September 10, 2011 at 1:42 am

    awesome tutorial …i enjoyed it …nice work

  18. raj December 9, 2011 at 2:52 am

    this is nice

  19. Dimitar Ivanov January 10, 2012 at 3:14 pm

    Great collection!
    Did you see Zino Image Slider?

  20. syed mohammed ahmed March 13, 2012 at 12:53 pm

    check this one !

  21. July Rana February 22, 2013 at 11:02 am

    Wow good work I am really appreciate it.

Comments are closed.

Copyrights © 2016 - Designzzz. All Rights Reserved