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

Join testking HP0-S20 online training with testking 642-481 design guides and other testking 642-426 web development products to improve your creativity and work.

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

Jitu – who has written posts on Artatm - Creative Art Magazine.


7 Responses to “Nice jQuery Effects and Plugins for Gallery”
  1. Alaa Badran

    I would like to share jQuery Gloss plugin
    http://www.freelancer-id.com/gloss

    thanks :)

  2. Tanya Struchen

    This informal article helped me a lot! Saved your site, very excellent categories everywhere that I see here! I really like the info, thanks.

  3. forex robot

    nice post. thanks.

  4. Ivan Miši?

    Great post, bookmarked

  5. Tinh@eblogtip.com

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

  6. NetKit

    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/

    • artatm

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

Leave a Reply