Submit your widget
96
Yays

Animated Header in jQuery

Views 16011   downloads 2168   Image Effects

We'll show you how to animate your header’s background image using jQuery to give your website that little extra something.We are going to build a header that animates it’s background. …

94
Yays

Simplest jQuery Spotlight Effect

Views 9713   downloads 1414   Image Effects

This is a Simplest jQuery Spotlight Effect 1. HTML We will use divs instead of ul list here. I have tested it with UL before, and it will work perfectly fine, you just have to style is with CSS. The caption…

135
Yays

Useful and Practical jQuery Image ToolTips

Views 42680   downloads 13374   Image Effects

It displays a tooltip image when user hover on the thumbnail with fadein and out effect. it's a useful script for your website. 1. HTML I have been thinking of using UL list, but then I think it's not…

107
Yays

Image Highlighting and Preview with jQuery

Views 9754   downloads 1573   Lightbox & Dialog & Overlay

We will highlight images on a delayed hover and offer a preview mode which will enlarge and center the bigger version of the image on the screen. The Markup   For the HTML structure we simply need…

118
Yays

Interactive Photo Desk with jQuery and CSS3

Views 10235   downloads 1825   Image Effects

In this little experiment we created an interactive photo desk that provides some “realistic” interaction possibilities for the user. The idea is to have some photos on a surface that can…

128
Yays

Beautiful image Filterable Portfolio with jQuery

Views 21296   downloads 3085   Layout & Interface

  If you have worked in your field for a while, there is a pretty good chance that you have a rather extensive portfolio. To make it a little easier to navigate, you will probably be tempted to break…

138
Yays

Stunning Sliding Door Effect with jQuery

Views 14408   downloads 3213   Image Effects

Basically, this is what it does: Grab all the div with qitem class, find the image and replace it with four DIVs (four corners) Each of the corner will have the same background image (grabbed from qitem…

120
Yays

Image Preview Gallery

Views 19068   downloads 3670   Image Effects

Here we have a bunch of thumbnails. When each thumbnail is rolled over, script will load an image that we have linked in HREF attribute of an A tag. That makes this method accessible as well, because…

89
Yays

Thumbnail Gallery with Slick Heading and Caption Effect with jQuery

Views 11666   downloads 1887   Image Effects

This is a simple jQuery , but can be extremely useful in frontend design Similar examples 1. HTML It's simple, inside the container - photo class you have three objects, first div is the heading, image…

103
Yays

Zoom-Info – Create An Informative Image Gallery With jQuery & CSS

Views 15456   downloads 3024   Image Effects

Question: Have you ever wanted to neatly display a few lines of text about an image in your site but didn’t want to compromise on the design of your overall layout?we'll going to show you how to…

147
Yays

Interactive Picture with jQuery(Image Tips)

Views 20326   downloads 3927   Tooltips

In this tutorial I will be showing you how to piece together an interactive picture – aka an image that contains tooltips and popup boxes. This can be useful for showing off a particular aspect…

486
Yays

Reorder and filter items with a nice shuffling animation(Quicksand)

Views 44998   downloads 4408   Image Effects

How it works At the very basic level, Quicksand replaces one collection of items with another. All you need to do is provide those two sets of items. You can do it in a couple of ways: Use plain HTML,…

254
Yays

Images Or Banner Rotator With jQuery

Views 29154   downloads 2993   Image Effects

How To Use It? Step 1 – XHTML The XHTML code of the banners is generated on the fly by PHP after a database query, and outputted to the page. Here is how the markup for a sample banner looks like:…

97
Yays

Fancy Hover Effect with jQuery

Views 19853   downloads 2540   Image Effects

Very cool hover effect HTML   <div id="featured-wrap"> <div id="featured-content"> <a href="http://www.jardinesdelte.com/"><img alt="Jardines" src="2_s.jpg" /></a> <a…