Follow Us  
 
 

Nice jQuery Effects and Plugins for Gallery

 
 

Sliding Boxes and Captions with jQuery

All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through. From this basic idea we can play around with animations of the sliding element to either show or cover up the viewing area, thus creating the sliding effect.

Sliding_Boxes_in_jQuery

Overview

Demo

Download


jQuery image slide on hover effect

This is a simple technique to animate an image when hovering using jQuery’s animate() effect. We will use this effect to manipulate our CSS, creating a seamless transition between two areas of an image. Have a look at the demo below for a better understanding.

ImageSlide_on_hover_in_jQuery

Overview

Demo


Longer Captions for jQuery’s FancyBox Plugin

jQuery’s FancyBox Plugin has been a huge hit and is now being used in a lots of websites. But still there is something that is missing in it. That something is the “Longer Captions”. FancyBox allows only short captions, in short it could turn out to be a bad option for the ones who need to provide longer and bigger captions.

Over here you will get an improvised version of the jQuery’s FancyBox

This version of FancyBox has been modified to handle captions in a more interactive way. It also doesn’t break on excessively large captions. This example is based on FancyBox 1.2.1.

fancybox_modified

View Demo

Download


jQuery’s Star Rating Widget

What is this?

The Star Rating widget is a plugin for the jQuery javascript library that creates a non-obstrusive star rating control based on a set of radio input boxes or select options.
What it does?

* It turns a collection of radio boxes / select options into a neat star-rating control.
* It creates the interface based on standard form elements, which means the basic functionality will still be available even if Javascript is disabled.
* It gives you the full access to each instance of “stars” created on the page, with an easy to use syntax provided by the jQuery UI core library.

star_rating

Overview

View Demo

Download


LavaLamp for jQuery Users

As User Interface developers, we know that one of the first widgets our visitors use is a “Menu”. Capturing their attention right there is something that we always strive for, and I guess LavaLamp is a step in that direction.

LavaLamp_jQuery

LavaLampjQuery2

LavaLamp_jQuery3

Overview

Download


Hover zoom Effect with jQuery and CSS

The hover zoom effect basically reverse zooms an image while fading in a label on top of it when the mouse hovers over it. It makes for a pretty slick effect which could be used on thumbnails. You can check out a demo or grab the source right here if you don’t want to read the entire tutorial.

Hover_Zoom_in_jQuery

Demo

Download


Greyscale Hover Effect with CSS & jQuery

This effects would help you in making your portfolio or making portfolio websites. In this effect, with the help of CSS and jQuery, a greyscale effect comes into being on Hover

Greyscale _effect_in_ jquery

Overview

Demo


jQuery Image Zoom Plugin

The imageZoom jQuery plug-in makes it easy to show off your images in an easy and attractive manner for portfolios.

Image_Zoom_in_jQuery

Overview

Demo

Download

Related posts:

  1. Photo gallery Using CSS3 and JQuery
  2. 20+ Easy to Use jQuery Text Effects and Animations
  3. jSlickmenu: A jQuery plugin for slick CSS3 menus
  4. 35 useful fresh jQuery plugins
  5. Collection of mega drop down and multi level menus
 

Written by Jitu

A total football nerd, he loves designing to the core and also likes to get his hands on some programming. He is the Co-Founder of ArtAtm. He hails from India. You may want to Follow Him On Twitter
 
 
 

Share And Bookmark

Related Posts From Network

5 Comments

  1. NetKit, January 4, 2010 at 9:06 am

    Nice collection of great jQuery effects to embed in web projects. Thank you.
    I have similar post on my blog: http://www.net-kit.com/15-excellent-thumbnail-gallery-effects/

  2. artatm, January 4, 2010 at 10:37 am

    Thanx for informing me..
    Nice collection gor gallery effects. it must be helpful..

  3. Tinh@eblogtip.com, January 5, 2010 at 2:38 pm

    Excellent jquery! If this can be implemented in WordPress, I am sure I will use it. Thanks

  4. Ivan Miši?, January 7, 2010 at 8:47 pm

    Great post, bookmarked

  5. forex robot, January 21, 2010 at 1:44 pm

    nice post. thanks.


Get a Trackback link

4 Trackbacks/Pingbacks

  1. Pingback: Twitted by artatm on January 4, 2010
  2. Pingback: Tweets that ment.. on January 4, 2010
  3. Trackback: You are now list.. on January 4, 2010
  4. Pingback: Blogging tools i.. on January 18, 2010

Leave a comment

CommentLuv Enabled