Lightbox is a simple, unobtrusive script used to overlay images on top of the current page. It’s a snap to setup and works on all modern browsers.
Best jQuery Plugins Plugins & Tutorials with Demo
jQuery Animated Responsive Image Grid
A jQuery plugin for creating a responsive image grid that will switch images using different animations and timings. This can work nicely as a background or decorative element of a website since we can randomize the appearance of new images and their transitions.The idea is to have a list of images and define the number of columns and rows which will arrange the images into a grid. The remaining images will appear with different animations and delays. With some sizing options we can define how the grid should be laid out for different screen widths.
This kind of component can work nicely as a background or decorative element of a website since we can randomize the appearance of new images and their transitions.
Animator jQuery Script
“Animator” gives you the possibility to animate almost every single HTML element on the page.It can’t be easier to do. Just add a class called “animate” + <<animation name>>
Sometime you will need to do the animation faster. So, only add another class called “quick” and it will reduce the animation time.You have 50 different animations to choose. 29 to appear HTML elements and 21 disappear animations.Also I’ll give you a javascript function, to control the animation flow. Even if you don’t know anything about javascript, you will be able to change the animations in real time.It works amazing on iPhone, iPad and some other mobile devices.
Also works in Chrome, Opera, Firefox. IE is not supported yet, but still perform the enter and exit animation.
JZoopraxiscope : jQuery plugin for making animations from static images
JZoopraxiscope is a jQuery plugin for making animations from static images inspired in Eadweard Muybridge’s Zoopraxiscope.Besides jQuery, it also uses jQuery UI and requires the frames to be animated as a single, horizontal image.It all works by calling a simple function where we define dimensions of the images and the frame.
After that, JZoopraxiscope works with the help of play and pause buttons provided.Although it looks hard to use the resource widely, with a bit help of creativity, it can beautify a web page easily.
Photo Booth Strips with Lightbox in jQuery
In today’s tutorial we’ll show you how to create some cute looking photo strips and integrate Lightbox 2, one of the most popular and widely used lightbox scripts. The idea is to show some photo strips and make them navigable by scrolling with the mousewheel. When clicking on a picture we will show the larger version using jQuery Lightbox 2. We will also optimize it for touch devices.
Slide-in backgrounds with jQuery
In this tutorial I’ll give you a quick run down of how to go about creating this slide in effect.There are a few things we want to accomplish. The code I provide below is just a quick roundup of how this effect is accomplishable. I do plan to turn this into a plugin at a later date with a much wider breadth of applicability.
- Firstly we must generate the ‘slices’ in Javascript. This will be determined by screen width and will have to change as the user resizes their window.
- Next we need the slices to slide in. We can do this with animations, but we don’t want the animations to queue in such a way that it ruins the effect
- We want the slices to reset when another animation comes on top of it.
- The slices should be positioned absolutely so content can be placed on top if it.
TwitStream : jQuery, AJAX, and the Twitter Search API
I was perusing the Web looking for some quick and dirty Javascript I could use with the Twitter Search API to display a list of recent tweets containing a particular keyword. I came across the monitter.com widget, which was almost exactly what I had in mind, except that it includes some really great, rich features that were well beyond what I needed. I adapted and simplified the monitter script to:
- Fix an issue with unescaped characters, e.g. hashes, in the search query.
- Fix an issue with ampersands in links in the
linkify()function. - Replace some deprecated HTML tags, e.g.
<b>, and fix other XHTML validation issues, e.g. using self-closingimgtag. - Fetch search results only once, rather than every few seconds (since Twitter sets a rate limit of 100 requests per-hour per-user, I found this to be necessary).
- Specify the number of tweets to return using an additional
class. - Remove the fade-in effect.
- Hyperlink each user’s profile image to their timeline.
Just like monitter, TwitStream utilizes the jQuery framework. Because jQuery is awesome.
