In this post, I’ll be featuring 30 awesome lightbox and modal dialog boxes that you can use on you web applications.

1. Facebox

Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. It’s simple to use and easy on the eyes.

2. Lightbox2

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

3. Fancybox

FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.

4. Colorbox

A light-weight, customizable lightbox plugin for jQuery 1.3 and 1.4. Supports photos, grouping, slideshow, ajax, inline, and iframed content.

5. jQuery Lightbox Plugin

jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery´s selector.

6. prettyPhoto

prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes.

7. Litebox

Lightweight lightbox which built on moo.fx and prototype.lite.

8. Thickbox

It has more features than lightbox2  like display inline content, iframed content or content served through ajax in a hybrid modal.

9. Slimbox

It was designed to be very small, efficient, standards-friendly, fully customizable, more convenient and 100% compatible with the original Lightbox 2.

10. LightView

Lightview was built to change the way you overlay content on a website that supports multiple media files.

11. jQuery Dialog

Query UI contains dialog component. It can be customized to create your own taste of image preview or gallery.

12. Prototype Window

Prototype window based dialog boxes.

13. MochaUI

MochaUI is a web applications user interface library built on the Mootools JavaScript framework.

14. Boxy

Boxy is a flexible, Facebook-style dialog box for jQuery with support for dragging and size tweening.

15. ModalBox

It’s inspired by Mac OS X modal dialogs.

16. Shadowbox

Shadowbox is a web-based media viewer application that supports all of the web’s most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable.

17. LightWindows

A lightbox solutions that enable you to embed images, video,iFrame, flash and more.

18. SimpleModal

impleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development.

19. jqModal

jqModal is a plugin for jQuery to help you display notices, dialogs, and modal windows in a web browser. It is flexible and tiny, akin to a “Swiss Army Knife”, and makes a great base as a general purpose windowing framework

20. Multibox

It support images,flash, video, mp3 and html and it is built with mootools.

21. Greybox

GreyBox can be used to display websites, images and other content in a beautiful way.

22. Highslide

Highslide JS is an image, media and gallery viewer written in JavaScript. It has a quick and elegant looking.

23. Sexybox

Lightbox that display content directly from html.

24. PiroBox

Stylish and modern jquery lightbox.

25. Super Box

Super Box is a script which allows you display windows with the lightbox effect.

26. CeeBox

It is an overlay popup script that embeds flash video, display images, or show html.

27. NyroModal

Modal box that uses callback animation and a lot more features.

28. imgBox

mgBox is a jQuery plugin that implements a smooth zoom effect on images.

29. ClearBox

Clearbox is a professional image and content viewer overlay window.

30. jQuery Tools

jQuery Tools is a collection of most user interface components for modern websites such as lightboxes.

Choose the appropriate lightbox or modal box on your website.  Next time your users visit they will be attracted on these modern trend and design for your website.

Introduction

Before we get started, i’ll tell you a little bit more about data transfer solutions… The title AJAX referred to XML, although at present, for asynchronous data transmission, it is used less frequently (in pure form, at least). In addition to XML, there are HTML (a technology called AJAH), HTML + HTTP (AHAH) and Javascript + JSON (AJAJ).

I will lead examples using jQuery JS framework. jQuery supports all three types of asynchronous data transfer.

There is a lot of features to work with AJAX in jQuery, but the main ones being. get () and. gost (). Their syntax looks like:

	$.post(url[, params[, callback]])
	$.get(url[, params[, callback]])

where, url – the address where we should send the POST (GET) request to,
params – the parameters (param1: value1, param2: value2),
callback – function to be executed after the page returns the answer for the query (as an argument it is passed the answer).

Examples

index.html

		function LoadPhpVersion() {
			$.post('version.php', {}, show_version);
		}

		function show_version(version) {
			$('#version_box').html(version);
		}

		AJAX it!
		Your php version is :

version.php

    echo phpversion();

Also in the directory with these files we should have jQuery library: jquery.js.

In this example, we just sent a POST request without parameters to the version.php script, which returned in response to our request your PHP version. A show_version() function displayed her to the html page.
As you can see everything is very simple. But in our case, everything can be even simpler :)

Using AHAH

In the previous example, the result of our request was received by the html-code (just text), which just lead to the desired location. This operation is very frequently used when templater and AJAX are working together (ie AHAH).

To use it with AHAH jQuery has a method called load().
Let’s get rewrite the previous example, but this time we will use the AHAH.

index.html

		function ShowVersion(elem_id) {
			$('#'+elem_id).load('version.php');
		}

		AJAX it!
		Your php version is :

version.php

   echo phpversion();

In this example, the javascript code is considerably reduced. As you can see, for the method load(), we should simply specify the element where we fetch the result and give him the name of the script that will send a request to.
Things got even easier.

As an example here are AHAH tests with internal javascripts

• jQuery – page load ~ 36.7 second

• Fullajax (Fullajax = AJAX + AHAH) – page load ~ 3.5 second

AJAJ

Finally we consider another, very convenient data format – JSON.
Using this format and technology (AJAJ in jQuery), it is possible to transmit data to the PHP is not one piece, as object fields. So, you can return multiple variables at a time.

Working with AJAJ in jQuery is implemented through the method called getJSON();

A quick example

index.html

		function GetVersion() {
			$.getJSON('version.php', {}, function(obj){
				$('#version_box').html(obj.version);
				$('#text_box').html(obj.text);
			});
		}

		AJAX it!
		Your php version is :
		Text :

version.php

    version: '',
    text: 'Hello'

In this example, on server side two variables are generated in JSON format: version, text and displayed.

On the client side (browser side), this block is transformed into an object (via the function eval() ) with two fields – obj.version and obj.text.

By the way, jQuery has an other useful method: getScript(), which looks like:

	$.getScript(‘script.js’);

This code loads script.js file from the server and executes its code in the browser.

Final Notes

P.S. When developing applications using AJAX, I strongly recommend using Firefox with the Firebug plugin (very easy and comfortable to track the headers sent from the browser to the client asynchronously).

Feel free to download the example files by clicking [HERE].

That’s all; I hope you enjoyed this article, and thanks for reading! As always, your comments and questions are welcome!

What are we going to build?

The distance finder we created using the previous tutorials uses the google maps api to let you find the distance and route between two locations. In this tutorial, I’ll show you how to share your search results with your twitter followers. I’ll also show you how to add hovercards and linkify usernames.

You can view the demo here. And also download the source code.

Prerequisites

The first thing we need to do in order to use @Anywhere is to registered a new twitter application. We can do this here. Once we fill in that form, we will be given an APIkey to use in the app.

Next, we’ll have to include the @Anywhere script. We’ll add the following code to your <head>section:

<script src="http://platform.twitter.com/anywhere.js?id=ADD_YOUR_API_KEY_HERE&v=1"></script>

Don’t forget to fill in the api key!

As some of the options from @Anywhere require jquery, we will have to include that too:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"  type="text/javascript"></script>

Adding a comment box

Let’s see what we need to add to show a small comment box to help us share the search results with our friends.

We’ll have to add another div to the layout, where to show the comment box with the text to share with our friends.

<center><div style="width:100%; height:13%"></div></center>

In the javascript function that shows the route (called continueShowRoute) we will have to add some code to show the comment box.

//we have to create a div where @Anywhere will place the comment box; the div will be created inside the share div
var twitter = "<div class='comments'></div>";
document.getElementById("share").innerHTML = twitter;
// we’ll call the share_twitter function with the two addresses as parameters.
share_twitter(address1, address2);

The share_twitter function is used to create the link to share with our friends and show the comment box.

The code which uses @Anywhere to show the comment box is pretty simple. It looks like this:

twttr.anywhere(function(twitter) {
   twitter(".comments").tweetBox({
      label: 'Share with your twitter friends!',
      defaultContent: 'My search on distancefinder: '+url,
      height: 30
   });
});

It calls the anywhere function for the twttr object and passes the tweetBox function as a parameter.  The comment box will be shown in the div with the id given as parameter (“.comments”). We can set the following options for the comment box:

• Label: the text to be shown above the box
• DefaultContent: the content of the box
• Height, width: the boxes dimensions
• Counter: whether or not to show the counter for remaining characters
• OnTweet: a function to be called when the tweet button is pressed.

We will also have to share the link to the current page. We’ll also have to add the two address values to the url to be able to share a search result. This way, when the friend clicks on our link, they will be redirected to the application page with the addresses set and see our results. We will use PHP Get to pass the two addresses.

As the url might get too long for a tweet, we’ll have to shorten it. For this we can use tinyurl to obtain a shorter url address. To do this, we have to make a request to:

<a href="http://tinyurl.com/api-create.php?url=THE_LONG_URL">http://tinyurl.com/api-create.php?url=THE_LONG_URL</a>

We’ll make a php script that receives an url address, sends a request to tinyurl.com and returns the result.  We’ll store it in the file called getShortURL.php. The script looks like this:

<?php
$url = $_GET['url'];
echo file_get_contents("http://tinyurl.com/api-create.php?url=" . urlencode($url));
?>

We’ll have to call this script using ajax from our share_twitter function and, when we get the result from the script, show the comment box from @Anywhere.

Here’s how the code for this looks like:

var xmlhttp;
function share_twitter(a1, a2)
{
  var my_url = location.href;
  if (my_url.indexOf('?a1=') != -1)
  {
    my_url = my_url.substr(0, my_url.indexOf("?"));
  }
  my_url += "?a1="+a1+"&a2="+a2;

  xmlhttp=GetXmlHttpObject();
  if (xmlhttp==null)
  {
    alert ("Browser does not support HTTP Request");
    return;
  }
  var url="getShortURL.php";
  url=url+"?url="+encodeURIComponent(my_url);

  xmlhttp.onreadystatechange=stateChanged;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
}

function stateChanged()
{
  if (xmlhttp.readyState==4)
  {
    twttr.anywhere(function(twitter) {
      twitter(".comments").tweetBox({
         label: 'Share with your twitter friends!',
         defaultContent: 'My search on distancefinder: '+xmlhttp.responseText,
         height: 30
      });
    });
  }
}

Here’s what the share_twitter function does. It first get the url of the current page:

var my_url = location.href;

If there are already some variables set in PHP GET it erases them and adds the new values (a1 and a2, the functions parameters)

if (my_url.indexOf('?a1=') != -1)
{
  my_url = my_url.substr(0, my_url.indexOf("?"));
}
my_url += "?a1="+a1+"&a2="+a2;

The rest of the code is a bit more complicated (also, I’ve not shown here the GetXmlHttpObject function; you can see it in the source code), but you don’t have to worry if you don’t get it! All you need to do is that it is used to make the request to the getShortURL.php script and receive the result. When it gets the result (if (xmlhttp.readyState==4)) it calls the @anywhere code to show the comment box and sets the url value to the short url it received.

We will also have to add a few lines of code to our app, to be able to load our friends search results. As I said, we have sent the a1 and a2 parameters (the two addresses) through GET. We will have to add a script to check if the variables are set and if they are, to show the correct map.

We will add this php code before the </body> tag:

<?php
if (isset($_GET['a1']) && isset($_GET['a2']))
{
   echo "<script>start('".$_GET['a1']."', '".$_GET['a2']."');</script>";
}
?>

As you can see, the script will call the start function if the two parameters are set. Let’s see how the start function looks like:

function start(a1, a2)
{
   document.getElementById("address1").value = a1;
   document.getElementById("address2").value = a2;
   initialize();
}

All it has to do is set the address values in the textboxes and to call to initialize() function, the one that shows the map.

And that’s it! We now have a comment box in our app. Of course, the users will have to be logged in their twitter accounts and allow your app to connect to their accounts. But all this is taken care of by @Anywhere!

Let’s check out other features of @Anywhere:

Linkifying twitter usernames

With only a few javascript lines added to the head section of your site, @Anywhere will convert all twitter usernames on your page in links to the proper twitter profiles.

Here’s the script we need to add:

twttr.anywhere(function (T) {
   T.linkifyUsers();
});

You just have to call the linkifyUsers() function. This code will turn all twitter usernames found in the <body> section to links. You can also chose to only linkify the usernames in a section of your site. To do this, you will only need to specify the id of the element which has the usernames you want linkified.

twttr.anywhere(function (T) {
   T("#ELEMENT_ID").linkifyUsers();
});

Hovercards

Hovercards are small tooltips that show some data about a particular Twitter user. These will show up if you go with the mouse over a twitter username on you site. To add this option, you will have to add this script:

twttr.anywhere(function (T) {
   T.hovercards();
});

You can also limit the scope when the hovercards appear, just like with linkifying usenames.

Let’s add a twitter username to the site and test these features:

<center><div style="width:100%; height:4%">Demo App by @anirib</div></center>

@Anywhere seems pretty cool, eh?

A screen cast gives you a much clear idea by its interactive way of explaining as similar to a live version with the help of a clear audio as in the case of Microsoft Office or Photoshop tutorials. These Screen casts on jQuery, AJAX, PHP and CSS takes you to a tour from the scratch to a level of professional growth.

AJAX:

1.AJAX refreshing RSS content

Overcome the hassles of page refreshing by updating the contents without a manual page refresh. This video demonstrates the do’s and how’s to refresh the RSS feeds with the help of AJAX.

If you’re doing just one feed, I think it’d be more efficient to roll your own JavaScript code, especially if it’s just parsing RSS. From what I remember, SimplePie seemed to be a lot of overhead.

2.Simple-Jquery-spy-effect

The great thing about Realmac’s QuickSnapper site is that if JavaScript is turned off, the list of snaps is visible by default. So we’ll follow suit.

It’s also worth noting that their version only keep pulling in new items until it hits the end. I’ll show you how you can keep the list looping, and in a follow up tutorial I’ll show you how to hook this in to an Ajax hit that doesn’t hammer your server and keeps the effect nice and smooth.

3.Top 25 AJAX video tutorials from youtube

The tutorials presented here gives a beginning from the scratch of how to create a HTML document, adding javascript and also linking an external javascript to that to that,building AJAX chat, adding AJAX elements to a web page using Spy framework,inserting AJAX objects into Adobe Dreamweaver, how to create Mash up applications using AJAX framework,create a Delphi for PHP web  also about AJAX MySql database

Jquery:

4.Sliding headers like iphone

Ever Got frustrated when you cannot find the header while browsing a content and got lost with your subject
when moving on to next page, this screen cast helps the header to remain content and also replaces the next heading simultaneously when you move to next page in a subtle manner.It’s very useful for every web designers who is following the trend.

5.Slidedown animation jump revisited

You would have noticed that your animation jumps towards the end, which could be because of height problems.This screen cast helps you to find a solution by considering the height factors by storing an inline height and setting an an inline height later and proceed accordingly whether we are revealing or hiding the element.We can use this action to show our results or can use this in FAQ’s also.So there’s no need to refresh the page.

6.Slider gallery

Wanna create a gallery with a slide to navigate the items? This screen cast helps you with simple steps to translate the sliders position to slide the products inversely with the help of Markup, slider-widget control, jQueryUI, CSS and certain plug-ins which provides faster scroll and a pause when needed.Using this slider you can display your products and you can roll your images etc.

7.Jquery for absolute beginners

A 15 day Absolute beginner series in Jquery with Theme forest.net as a reference by Jeff Way who has exclusive videos for each day where you could learn all the methods, Jquery style switcher, hover effect and lots more used in Themeforest.net.

This screen cast  series will teach you Jquery clearly and effectively.Each screencasts has the own style and it would be very useful for beginners who needs to learn Jquery in an defective manner.

8.Build Lava lamp style navigation menu

Learn to create a lava-lamp style menu from the beginning which initially demonstrates the same process by using a three level menu and then create a lava-lamp menu by using a Javascript library in this screen cast.

It’s highly professional way to monetize your website and this type of menu will give you a good look to your website.

9.Automatic infinite carousel

Most of the times a scroll action doesn’t stop automatically and we have to control it manually when needed, So to make a scrolling action automatic and pause it when the mouse is over the carousel using Jquery is demonstrated in this screen cast.

We can use this carousel for dynamic purpose too.

10.Jquery look tim van damme

The key effects of Tim the Accordion and Hover effect which work only in Webkit can also work in jQuery when two factors namely animated margin – left and Background rgba crossfade effect is taken into account.

For further details go through the screencast and find it on your own.

11.Popup login window

An authentication is always done with the help of a password.This screen cast will be very useful for authorization purposes.

In this screen cast we create a simple pop up window which verifies the password of an account in an LDAP server and where data is passes from a link to the dynamically created window.

12.Screencasts to build your own jquery plugin

Take the guidance of experts James Padolsey, Jeffery Way and Dan Wellman in this screen cast to create your Jquery plugins and use them in your programs. Lear how to set defaults,pre-load images, create call back methods and create dynamic radio buttons using Jquery, CSS.

To learn the full steps study the complete screen cast.

13.Jquery video series

A more elaborate and precise training regimen of 10 minutes for Themeforest.net and using the same how to use the Jquery library and create your our own projects with the help of video series description for 15 days.

The whole series will bring the beginners as a successful professional in Jquery.They can edit and customize the Jquery applications flexibly.

PHP screencasts:

14.Diving in to PHP

A short tour on various topics in PHP are given as separate tutorials.These self contained tutorials by Jeffery Way teaches you to upload files using PHP with the help of ThemeForest blog which is a complete source on PHP queries.

This screen cast covers the different type of topics for the beginners and intermediate level users.

15.PHP Json Jquery Ajax screencast

To create a communication between PHP and JSON data source using jQuery’s AJAX functionality where we create a script to send the JSON data, then a PHP array  then we load the file and our data source is populated.

To learn the full steps please view the complete screen cast.It’s an advanced screencast for PHP lovers.

16.Photo admin site using PHP and Jquery

This screencast helps you to create a photo site using PHP and jquery where a database is created with collection of photos, and the admin is given the rights of updating the title of the photos as well as maintaining any sub-directories by clicking on the text.

You can administrate the whole photo gallery as per your requirement.The specialty of this screen cast is using Jquery we are accessing the galleries.

CSS screencasts:

17.HTML and CSS the very basics

Help the absolute beginner with the basics of HTML and CSS which are only text files to a level where you can use them as a preview in your website.

This screen cast teach you that HTML is the content and CSS is the design of the website and also how to create a website with good quality.Here you can learn the very basics of both HTML and CSS so you can handle the websites easily when learned the basics well.

18.Editable CSS3 image gallery

We build a pretty typical image gallery design pattern, a grid of images that pop up larger when clicked.This image gallery will give you a highly professional look for your web development.

But this image gallery page makes use of hot semantic HTML5 markup, loads of visual treats with CSS3 and jQuery, and made editable through the CMS PageLime.

19.How to use CSS sprites

CSS Sprites have been a hot topic for a long time now. The fact is that each image on a web page is a separate server request and you can dramatically increase the performance of a page.Reducing the number of HTTP requests improves the load times. To achieve this we use CSS sprites, How to create a CSS sprite and how to those sprites describe here.

This will give you an good idea about CSS sprites and how to use this with your web development side.

20.Detailed look at 960 CSS framework

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

You don’t have to master the code to create a web application .CSS frameworks are there for you to write your code.Spend some time with this screen cast to learn about the frameworks and to efficiently develop your web applications.

21.Image switcher

Image Switcher is a free JavaScript that automatically inserts a series of images into one single hot-swappable view port.This is a pure CSS image switcher that is lightweight and standards-compliant. It could be used for a gallery or any similar function. Any number of list selection options can be used so long as the width can accommodate them.

To change the images as you move across a link is what this screen cast teaches you without the help of JavaScript.You need only z-index switching on hover and a bit of absolute positioning to achieve this.

22.Building a photo gallery

Like many people out there, you may want to create a web site to show off your photos of friends, family, vacation, wedding, etc. Well, this small tutorial will show you how to create a photo gallery and upload it to the Internet.

A photo gallery which automatically builds itself with the images from a directory as well as the sub-directories is possible by CSS . Chris Coyier teaches in this screen cast to build an automatic photo gallery.

23.Embedding audio

How do you embed an MP3 file (like a podcast, song or background music) into a web page or an RSS feed so that visitors can listen to the audio in the browser itself without requiring an external player like QuickTime or Windows Media Player.

Most of the image we either use an image or an audio file. But an image with an audio in the background makes a user quite comfortable to grasp the information. Chris Coyier teaches the same with the help of JavaScript and Flash in this screen cast.

24.Using CSS3

Many exciting new functions and features are being thought up for CSS3. We will try and showcase some of them on this web page.For visual enhancements such as multiple backgrounds, RGB, border image, border radius, @font face, animations / transitions and a lot more for CSS3 is on the move now.

To follow this latest wave catch a glimpse of this screen cast.

25.Introducing firebug

You can get the information about the markup, CSS, layout and DOM of an element in a page with Firebug, an extension of Firefox which has become inevitable for Web designers and developers where you can edit and see the results directly in the browser.

To know more learn this screen cast.

26.Unique page for twitter updates

When designed right, a Twitter feed can improve the aesthetics of a website’s layout.If tweeting is your pastime then you must be eager to display your tweets from start to finish. For e.g. you could cover the design in Photoshop also style your page.

To achieve this task follow this screen cast which guides you from the javascript stuff to CSS to style your page.

Codeigniter:

27.Basic screencasts

Code Igniter is an open source web application for writing PHP programs and also to create full -features web applications.writing code from scratch, by providing a rich set of libraries for commonly needed tasks, as well as a simple interface and logical structure to access these libraries.

In this screencast it gives you introduction about CodeIgniter and also to create a blog in CodeIgniter using PHP by Derek Jones.

28.Easy development with codeigniter

With raw PHP, this can be somewhat time-consuming. However, with CodeIgniter, it’s simply a matter of referencing the correct library, and passing in some configuration options! Let’s dive in.

Eager to tune PHP skills after learning the introduction , Move on to the next step ,this screencast teaches you to upload an image and save it after initial validation using PHP in CodeIgniter.

29.Killer startup screencasts for codeigniter

Get ready to create your first application with CodeIgniter, create a form using Form builder, build a sample application,create a blog in 20 minutes, create a Pagination, send and receive data via jQuery Post and JSON in this 10 minute screencast by Derek Jones.

We are hoping that you will learn further on CodeIgniter Application Development Framework after watch out screencast.

XML:

30.Build a login and registration system with xml

Building an entire membership system can be a tedious, and time-consuming task. Tim Cooper is going to show us how to build the ENTIRE thing in roughly thirty minutes.

Using XML we could create a login and registration form in much less time than MySQL, Tim Cooper in this screen cast shows us this by reviewing PHP, .htaccess, files, sessions and more.

31.Form builder

It may seem odd to attempt to standardize data types in a system DESIGNED TO BE SO FLEXIBLE, but more than one institution reports that setting reasonable expectations for portfolio deployments across campus and managing your IT resources to leverage some amount of standardization do a lot to the project sustainable.

Learn the basics of building a form using the Form builder tool which could be used to build an XML schema file and also use for many multiple purposes in many forms. Sean Keesler teaches you to build a form in this screen cast.

32.Parametrize test data using XML

Create automation scripts to test web application functionality in Internet Explorer on Windows.

From this Screen cast achieve this task with the help of Pamie – a Python class file which creates a Pamie test script to automate a form, create an XML file, read data and run the test.

It show you:

• How to create a Pamie test script to Automate a form
• How to find the names and ID’s of DOM Elements to automate
• Creating an XML file from scratch using Notepad++
• How to read the data in an XML file using ElementTree
• How to run the test

33.Screen casts to get you kicking ass with drupal

Find it difficult to learn Drupal, this screencast makes it easy for practically learning step by step process starting with the installation, node system, block system, content types, theme development and more.

Also you could find resources for Drupal books, Drupal podcasts, Drupal forums, Drupal channels.

34.Drupal roundup

Get all the information you wanted to know about Drupal, this screencast gives you the best of Drupal’s screencasts, best books on Drupal, resources, modules and also the annoyances of Drupal. Get the latest screencasts on Drupal 6, Learn about CSS Injector, Node Convert, open buffet syndrome, creating a backup, about Webform, Login Toboggan, Input filters, Teaser length and lots more about this content management platform – Drupal.

Here you will find easy to customize and modern image galleries you can use for your own projects, portfolios and possibilities are endless here! You just need to put them in good use!

jQuery Most for these image galleries you’ll need to use latest JQuery. You can download it here.

1. Full screen image gallery using JQuery and Flickr

Full browser – screened image gallery. Easy and understandable. Features:

• Flickr search using jQuery and JSON
• Full screen with kept ratio using CSS only
• A png raster to even out up-scaled jpegs
• Thumbnails with loader indicator and a nice hover effect that shows a bigger thumb (or description)
• A preloader loads the large images one by one for super-fast viewing
• Fetches the biggest image from flickr using their API
• Caption that can be turned on or off
• Navigate by clicking on either half of the image, or use the thumbnails.

View Demo

2. Supresized image gallery

Features:

• Resizes images to fill browser while maintaining image dimension ratio
• Cycles Images/backgrounds via slideshow with transitions and preloading
• Navigation controls allow for pause/play and forward/back

View Demo | Download Now

3. s3Slider jQuery plugin

This one is handy to put in portfolio header of index page. Self-image changing.

View Demo | Download Now

4. Nivo Slider

Features:

• 9 unique transition effects
• Simple clean & valid markup
• Loads of settings to tweak
• Built in directional and control navigation
• Packed version only weighs 7kb
• Supports linking images
• Keyboard Navigation
• Free to use and abuse under the MIT license

View Demo | Download Now

5. jQueryGlobe – jQuery Plugin

Features:

• Slick effect, no Flash needed
• It’s just 2K
• Reusable on multiple containers
• Cycles items via slideshow
• Can be styled with custom HTML/CSS

View Demo | Download Now

6. jQuery LightBox Plugin 0.5

jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery´s selector.  

View Demo | Download Now

7. jqFancyTransitions

jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects. 

View Demo | Download Now

8. Galleriffic

Features:

• Smart image preloading after the page is loaded
• Thumbnail navigation (with pagination)
• jQuery.history plugin integration to support bookmark-friendly URLs per-image
• Slideshow (with optional auto-updating url bookmarks)
• Keyboard navigation
• Events that allow for adding your own custom transition effects
• API for controlling the gallery with custom controls
• Support for image captions
• Flexible configuration
• Graceful degradation when javascript is not available
• Support for multiple galleries per page

View Demo | View JavaScript File

9. jQuery Image Scroller

View Demo | Download Now

10. Image Rotator

Image rotator is great way to display portfolio images, eCommerce product images, or even as an image gallery.  

View Demo

11. Simple Image Slide Show

Image Slide Show is one of the famous components in web design and development. A lot of the websites display news headlines in an image slide show to attract viewers attention, of course, with caption/excerpt. No doubt about it, this is a clever method not only to gain attentions, but it also makes the website more alive.

View Demo | Download Now

12. Apple style image slider

View Demo | View Source

13. Easy slider 1.7

For this one it’s easy to set up your own options to image gallery.

Demos: Here, here and here | Download Now

14. Circular Image Gallery

View Demo | Download Now

15. jQuery Image Strip

16. Coin Slider

Features:

• Unique transition effects
• Compatible with Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+
• Valid markup
• Flexible configuration
• Auto slide
• Navigation box
• Lightweight (8kb only)
• Linking images
• Free to use under MIT licence
• Fully customizable using CSS

View Demo | Download Now

17. Photo Gallery

View Demo | View Source

18. AJAX Image Gallery powered by Slideflow

The photos and titles are read from an XML file, and the thumbnails are pre-generated using Photoshop actions.

View Demo | Download Now

19. slideViewer 1.2

SlideViewer is a lightweight (1.5Kb) jQuery plugin wich allows to instantly create an image gallery by writing

just few lines of HTML. SlideViewer checks for the number of images within your list, and dinamically creates a set of links to command (slide) you pictures. Also, clicking on each image will make the gallery slide to the next picture.

View Demo | View JavaScript File

20. jQuery Before /After Plugin

Features:

• Slick effect, no Flash needed
• It’s just 7K (4K compressed)
• Reusable on multiple containers
• Degradable. If the visitor doesn’t have JavaScript they will still see both images.

View Demo | Download Now

21. Slick Auto-Playing Featured Content Slider

There is a main content area, which slide from left to right each with different unique content. There is generally a set number of panels, but the code is written in such a way that adding or removing panels isn’t a huge pain. There are links which act as navigation to quickly jump to any particular panel.

View Demo | Download Now

22. AnythingSlider

Features:

• Slides are HTML Content (can be anything)
• Next Slide / Previous Slide Arrows
• Navigation tabs are built and added dynamically (any number of slides)
• Optional custom function for formatting navigation text
• Auto-playing (optional feature, can start playing or stopped)
• Each slide has a hashtag (can link directly to specific slides)
• Infinite/Continuous sliding (always slides in the direction you are going, even at “last” slide)
• Multiple sliders allowable per-page (hashtags only work on first)
• Pauses autoPlay on hover (option)
• Link to specific slides from static text links

View Demo | Download Now

Flash

23. CU3ER The Free Flash 3D Image Slider

CU3ER, in a nutshell, is a .swf (flash) file, designed & developed for displaying images & slides in 3D way. It requires an XML configuration file in which the paths to the existing images and instructions (settings), necessary for handling those, are defined. This image slider is equipped with a great range of features that enhance the user’s experience of viewing slides. They can be grouped together lining User Interface and 3D Transitions.

View Demo | Download

24. The Piecemaker XML Gallery

The Piecemaker, a 3D Flash image rotator gallery in the purest sense of the word. It’s Open Source, so feel free to download it, use it in any project you like, learn from it, modify it and improve it if you can.  

View Demo | Download Now

25. SimpleViewer

SimpleViewer is a free, customizable Flash image gallery. It allows you to display your images on any web page in a professional, intuitive and simple way.

View Demo | Download Now

26. Flash Page Flip Photo Gallery template for Picasa

This gallery is made just like real album in your hands! Isn’t that so exciting? This template is based on the free version of the FlashPageFlip flash engine on www.flashpageflip.com. It lacks the advanced functions of the commercial versions but still makes a very nice photo album on your website. You can see and hear the pages flip.  

View Demo

27. Polaroid Gallery

Polaroid Gallery is a free, opensource flash gallery.  

View Demo | Download Gallery Now | Download Flash File Now

28. TiltViewer

TiltViewer is a free, customizable 3D Flash image viewing application.  

View Demo | Download Now

29. Flash Photo Gallery

The Flash version of AgileGallery is a free Flash photo gallery that rips through the XML output from Picasa (a free download from google) and generates the paging and thumbnails and displays the full sized photos along with any description entered in Picasa. It also includes a slideshow feature.

View Demo | Download Now

CSS

30. Cross Browser Multi-Page Photograph Gallery

This one is using CSS only – that means that there is no JavaScript. Based on the look of Suckerfish HoverLightbox, this one uses my multi-page layout system but includes images instead of text.

View Demo | Download Now

Keeping this in mind, I gathered here 21 various premium Php forms created for all the cases you should ever need – sign-up forms, advanced contact forms powered with Ajax, jQuery, e-mail signup forms, file uploads and much more. All of these forms also come with good user interface and design, so you don’t have to worry about those little things, but just focus on big tasks! How cool is that?

These forms also are pretty cheap – 5–12$, which is just a small reward to original authors I think! Before we get started I also gathered few great sources to get inspiration from and educate you how to create user-friendly and unique contact forms.

Patterntap

Here you will find various small sections in web-design – forms, buttons, headers, footers, tabs, typography and much, much more. There you will find also big collection of quality forms – now there are 351 forms available for inspiration!

Here are some more sources:

• 91 Trendy Contact And Web Forms For Creative Inspiration – I wrote myself very comprehensive article about contact and web forms some time ago! If this will not get you inspired – nothing else will!
• Beautiful Forms – Design, Style, & make it work with PHP & Ajax – excellent article from Noupe featuring a lot of unique tutorials and tips there!
• 10 Useful Tips for a Captivating Contact Form – self explaining article title, learn how to create contact form in good way!
• Web Form Design: Modern Solutions and Creative Ideas – huge inspirational article from SmashingMag – quality never disappoint only maybe examples could be a little bit outdated since article has been created in year 2008.

1. AJAX Contact Form ($6)

This AJAX jQuery website component allows you to easily place a self-contained Contact Form on any HTML or PHP page of your existing website.
It uses just 1 file to Validate, Process and Send the completed contact form to your e-mail address and best of all, does not reload the page to validate or send the form!

Features include:

• AJAX backend (no page reloads!) Save your bandwidth!
• Uses Javascript jQuery Slide for an amazing UI, Try the Demo!
• Very easy to integrate into any existing HTML or PHP page on your website.
• The form style can be integrated into your existing website Stylesheet or you can use the Default Style.
• All fields have a validation script so you get the * required info you need.
• and much more (read full description).

View Live Demo

2. Simple PHP Contact Form ($5)

This website component allows you to easily place a self-contained Contact Page on any PHP page of your website.

Features include:

• Very easy to integrate into any existing PHP page on your website.
• The form style can be integrated into your existing website Stylesheet.
• All fields have a validation script so you get the *required info you need.
• Anti spam, are you human? filter.
• Only 1 option to configure (your email address) to make the script function.
• and more features.

View Live Demo

3. Beta Splash Page Email Signup Form ($5)

This is a very simple, yet stylish, form for your website where visitors can enter their email address (and name if desired) to be added to a contact list. It uses AJAX to submit and validate email and will also function if the user has JavaScript disabled.

Installation is quick and painless. This form does not require a database to function as it will create and store input into a CSV file.

View Live Demo

4. Contact Form With Custom Auto Responder ($5)

Main Features:

• Simple form easy to edit and add to your PHP or HTML pages.
• Phone field added
• Dropdown Subject Selection with different emails.
• Auto Responder Enable / Disable
• Dropdown Subject Selection with additional emails.
• Custom Auto Responder Message
• Custom Auto Responder Message with Attachment of any file type
• Custom Catpcha Filter (you can create your own filter question and set the answer in contact.php file)
• No separate page needed for thank you message.
• Message will be displayed on the same block.

View Live Demo

5. Simple Website Comments ($7)

This website component allows you to easily place a “comment block” on any page of your website.

Features:

• Allow users to post comments on any page of your website
• Really handy for PHP websites that don’t support comments
• Easy to setup and customise
• Works out of the box, comes with copy/paste examples
• Sends admin an email with a summary of the comment when a new comment is posted, links to approve / deny.
• SPAM prevention
• Can be styled using your own CSS
• and much more.

View Live Demo

6. Easy Forms ($10)

EasyForms is a PHP library that helps you create forms on a fast and easy way including input validation.

Together with the EasyForm library, you get 4 examples forms that are created using this library:

• Contact form
• Image upload with extension and image size validation
• Quote request form
• Subscribe form that adds the email address and name to a CSV file

View Live Demo

7. Super AJAX Contact Form ($6)

This is a ajax contact form made with PHP and jQuery. The script already include rules of validations fields and with errors messages. This script allows you to perform SMTP authentications, so do not need a personal SMTP server, you can, for example, use Live or Google (Gmail). This way you can send mail locally too!

Features:

• Cross-browser compatible
• Load with ajax
• Security captcha
• Allow send for multiple adresses according to the subject chosen by the user
• and much more.

View Live Demo

8. Simple Multiple File Upload ($7)

This component allows users to upload multiple files from a single form. Uses the jQuery Javascript library to add more file input fields so that the page doesn’t need to be refreshed.

Features:

• Simple to include
• Allows multiple files to be uploaded at once
• Highly configurable
• Only allow certain file types
• Attaches uploaded files to an email

View Live Demo

9. Contact Form Generator ($8)

Contact Form Generator is a easy way to make your own custom form! You can control the validation rules, input types, icones and errors messages of a easy way.

This script allows you to perform SMTP authentications, so do not need a personal SMTP server, you can, for example, use Live or Google (Gmail). This way you can send mail locally too, this and much more without touch in a line of code!

View Live Demo

10. Awesome Contact Form ($8)

Now supports PHP 4 , full support for dropdown menus, radio buttons and checkboxes, and multiple forms from one installation. Upgrade instructions can be found in the user guide.

This script is a class-based, fully-featured PHP Contact Form with a focus on ease-of-use and extensibility. Includes an autoresponder and custom fields.

It is simple to install and comes packaged with many optional features which can be turned on simply by editing the config file – so no editing of the main source code is needed.

View Live Demo

11. Ajax Contact Form with Google Map Pointer ($4)

This script could be a fundamental part of almost any website. It consists of three parts: the map component (javascript), the form component (javascript) and the back-end php script that sends the actual email. Any of these three components could be used separately.

View Live Demo

12. Send to Friend Form ($7)

Features:

• Add a link to any website and allow visitors to easily “share” the page with their friends via email.
• User can customise the page title and description.
• Optional comment that is emailed along with page.
• You have control over the format of the email that gets sent, style it with your website branding!
• Normal javascript popup mode, or a nice lightbox popover mode so the user doesn’t leave your website.

View Live Demo

13. Drag & Drop Form Manager with E-mail Attachments ($7)

Features:

• Embed forms to your php or html files,
• Admin Login
• Determine your form and field details easily
• Add, edit or delete forms and fields to the forms easily
• Drag and drop to change the order of fields, forms or options of dropdown, multiselect, checkbox lists and radio groups.
• Edit form name and description easily
• Determine the e-mail address that you want the form to be sent.
• The form automatically creates attachments to e-mails when file fields are added.

View Live Demo

14. FeedBack ($9)

Feedback provides easy to use, customisable feedback forms for your website visitors to provide you with their comments, suggestions and bug reports. Feedback comes with a special widget which can easily be inserted on every page of your website to allow your website visitors easy access to your feedback forms.

The widget is written in Javascript, but works without Javascript too. The feedback forms are written in PHP and send you an email upon form completion.

View Live Demo

15. Beta Invitation Helper ($7)

A simple app that will store and output email address for your site. It can be used for beta invitations or notifying users when your site is ready. A mysql database is required to store emails addresses.

Features:

• You can customize the success message.
• Email validation is included.
• Duplicate emails won’t be recorded.
• A custom page is used to view all emails, separated by commas or semi-colon.

View Live Demo

16. Simple PHP RSVP ($12)

Simple RSVP is a simple, robust and powerful guest invitation and event management platform. Powered by PHP and backed by mySQL, this all-in-one package allows you complete control and expandability of your events and guests. The reserve form contains a web 2.0, user-friendly interface for your guests to sign up and reserve their place at your event.

The admin panel provides a back end to control and monitor all the activity taking place. Also, various forms of validation have been included. The interface is packed with features that make it easy for anyone to run. Whether you have one event or 2,000, Easy RSVP script is the only script you will ever need.

View Live Demo

17. Twitter Contact Page ($7)

Do you have a Contact Us page? Would you like to turn that snail mail into a Twitter messaging app? Well then this is the app you are looking for!

Your end users won’t need a twitter account. This app will send you a @mention tweet through your account or send a self-DM.

Features:

• Configurable to send DMs or public tweets.
• Form validation.
• Spam bot counter with “Math” feature.
• 140 character countdown using jquery.

View Live Demo

18. Ajax Contact form – 3 in 1 Autoresponder reCaptcha ($7)

The jQuery powered ajax contact form is the Cadillac of contact forms. It has tons of useful features and is very easy customizable via a single configuration file.

• 3 Stylish Themes
• It gracefully degrades. Try it, turn off your JavaScript.
• Customizable Auto Responder
• reCaptcha Support. It’s super easy to turn it on.
• SMTP support
• jQuery Powered AJAX + Animations

View Live Demo

19. Contact Me – Contact Form + Admin Panel ($9)

A contact form for your website which links in with a simple but powerful admin panel.

Features:

• An easy automated setup of databases
• Simple and friendly user interface
• Secure admin panel for viewing messages
• Reply to message from the admin panel without opening up a separate email client

View Live Demo

20. PalmsForm – Form API for PHP ($7)

PalmsForm takes all the hard work out of form building. You can get a form up and running within minutes. Form configuration and validation was never so easy. The best part about this library is that it is so flexible and convenient for you to customize your form, add / remove form fields, modify error messages, and extend core functionality of the library with minimal effort. As a result, you can use PalmsForm for all kinds of form, in all kinds of web sites and applications. It just works.

View Live Demo

21. Flux Contact Form ($8)

So what is flux? Flux is a Remarkably simple PHP contact form with admin panel. Dynamically select fields or remove fields on the fly. Would you like a add-on? Flux comes equip with google maps. Other add-ons may be implemented too!

Backed by PHP , this contact form script is in a league of it’s own. Fully extend able, and completely brand able. With just a few files uploaded to your server and few snippets of code, you will have a fully running contact form with customized auto responder. No need for PHP script knowledge or a database, Flux’s simple GUI has you covered.

View Live Demo

In this article we will explain the various techniques, tutorials, examples relating to the modern trends in building web forms to enhance the user experience.

Form Validation Techniques

when users enter values into the form, as the owner of the site must ensure that the value in accordance with the insert is expected, provide information on visitors to the validation before they are sent to the owner of the site

1. Live Validation

Live Validation is a small open source JavaScript library built for giving users real-time validation information as they fill out forms.

2. fValidator

fValidator is an open source (free) unobtrusive JavaScript tool for easy handling form validation.

3. Validation With Prototype

The basic method is to attach to the form’s onsubmit event, read out all the form elements’ classes and perform validation if required. If a field fails validation, reveal field validation advice and prevent the form from submitting.

4. Ajax form validation

This is Ajax form Validation, you can learning how to use AJAX to process and validate your forms.

5. jQuery inline form validation

6. sForm – Ajax Form Validation

This validation form is a real-time feedback to users, when they fill out the form, they will know what happened to see the color will appear. Fields that have not been properly will appear red and after validation is going to be green. This will facilitate the user when filling out the form

AJAX/CSS Forms Tutorials

7. How to make a password strength meter for your registration form

This tutorial will teach you how to make a password strength meter

8. AJAX Form POST/GET

With AJAX the browser page is not reloading, but the data is just sent to the server for processing. The server saves the data or calculates something and sends back the answer. The AJAX JavaScript either displays the answer (page) or does some action depending on the answer

9. Style Web Forms Using CSS

In this article you will look at step by step how you can use CSS to create attractive and usable forms.

10. Styling File Inputs With CSS And The Dom

This tutorial will explain stylish file upload inputs via clever use of js and css. This is great tutorial form Shaun Inman.

11. Degradable Ajax Form Validation

If you’ve ever confronted the task of validating data in a form, you know about choice. Whether it’s choosing between client side or server-side scripts, or the amount of information a user should see on the screen, the results should always give the user quick and meaningful feedback, while providing a solution for when things go wrong.

12. Fancy Contact Form

In this tutorial you will learn to make an AJAX contact form which leverages modern web development techniques. You will using PHP, CSS and jQuery with the help of the formValidator plugin for form validation and the JQTransform plugin, which will style all the input fields and buttons of the form.

AJAX CSS Form Online Builder

13. Form Assembly

This is A CSS Stylesheet Collection for Web Forms

14. Web Form Factory

Web Form Factory is an open source web form generator . They will automatically generates the necessary backend code to tie your form to a database.

15. JotForm

JotForm is the First Web Based WYSIWYG Form Builder. Create and publish web forms using your browser. Its drag and drop user interface makes form building doable for anybody that wants to do it

16. Wufoo

Wufoo is HTML form builder helps you create contact forms, online surveys, and invitations so you can collect the data, registrations and online payments you need without writing a single line of code.

17. FormLogix

FormLogix is an online form builder tool for creating web databases and web forms. FormLogix is a WYSIWYG tool and it requires zero coding skills. It enables a user to easily create web forms and web databases such as: Contact us forms, Feedback forms, Events registration forms, Surveys, online Polls, Order forms, Invitations, CRM

18. Phpform

Phpform  is free form builder . You can create online forms quickly and there are many color options available form

19. Formspring

FormSpring’s is easy form builder that make companies and organizations an easy to create some form online to begin the integration with the web site and data collection

20. Icebrrg

Icebrrg can easily create any kind of online forms for websites and blogs – no programming skills or special skills needed.

AJAX CSS Form Best Examples

21. Masked Input Plugin

22. prettyForms

23. Ajax Contact Form with YUI

24. Ajax Chained Select – demo

25. Instant Edit

26. Anchor Layout with Forms

27. Uploadform

28. Textarea

29. CSS-based Form Template

30. Uniform

Feel free to share your tips and techniques using comments section.

Web developers of new technologies that enrich the user is forced to vote the post with some examples of the functionality of Ajax, his voice can be recorded without reloading the page. Web designers can use a tool for further development, if we already know about JavaScript, HTML, CSS and XML, you have to spend a few coins to start learning AJAX.

1. Ajax Username Availability Checker Using MooTools 1.2

There are many examples of blatant use Ajax there, but over time, although you will find a great use of Ajax. A great use of the identifier is the availability checker. Why should the user submit the form if you can use Ajax to let them know when they will be available immediately; Heres how you can apply a correct user name comes with MooTools 1.2.

2. Ajax and XML: Ajax for tables

You will see many techniques with both Ajax and there is no evidence that the change to free access to the design of the user experience. Start with the simplest example of the Ajax user experience, the tabs down box.

3. Introducing the ASP.NET Ajax Frameworks

Ajax is a popular technique used in many ways the World Wide Web. It has become the technology of choice for creating user interfaces fast and responsive. This article gives a brief overview of the characteristics of some of the most common framework for ASP.NET AJAX.

4. How To: AJAXify WordPress Comment Posting

I’ll show you how to comments with AJAX client side JavaScript Form Validation, comments on your WordPress blog step by step, that the project should allow more versions of WordPress

5. Ajax and XML: Ajax for chat

The developers talk a lot about the community will come when the term Web 2.0. And if you think it is or is not hype, the idea of involving customers or your readers in a conversation about current issues at hand or the products they sell are quite convincing. But how we get there? Is a chat window on the same page with a list of your products so that your customers can install any software or even the Adobe Flash Player; Sure! It showed you can make with all free, off-the-standard tools such as PHP, MySQL, DHTML (Dynamic HTML), Ajax, Prototype.js and added.

6. How To Create An Amazing jQuery Style Switcher

This tutorial will show you how to create a style switcher using jQuery and PHP. The end result is a discrete switcher and degradable dynamic style applied quickly and easily.

7. Introduction to the Raphael JS Library

It will introduce some key design features, a look at the animation, DOM and eventually allow access by creating a cool widget for your site

8. Creating a Dynamic Poll with jQuery and PHP

When you combine a specific functionality courtesy of PHP with the cleverness of jQuery you can get some pretty cool results. In this tutorial, we’ll make a poll using PHP and XHTML, then use some jQuery Ajax effects to eliminate the need to refresh the page and give it a good piece of animation.

9. RSS Ajax JavaScript ticker

This tutorial will show you how to combine RSS, Ajax, JavaScript to create a live ticker RSS. Thank you for Ajax, the conventional roles of server side programming and client-side with the application as such as JavaScript, and not vice versa PHP is used to treat a large part of the project, including analysis of the RSS file

10. Create a Dynamic Scrolling Content Box Using AJAX

If you use Google Reader, so we could show the way data feed from Google Reader, its initial load when you click one and you scroll down the list until you have seen the light of other evidence, we More information dynamically and added to the list

11. Create a shoutbox using PHP and AJAX (with jQuery)

We learn how to build a momentum-based AJAX shoutbox with jQuery from scratch. It is very interesting to learn how to use the jQuery AJAX function and how it can be used to insert and retrieve data from a MySQL database with PHP asynchronous.

12. Building your first Ajax application with PHP

In this series of articles will focus on the development of the site, focusing primarily on the server using the language PHP, but I do not exclude the possibility that a crack in the Python and Ruby, ASP.NET / C # mono or as something else. This series is also available in JavaScript on the client side, and we will use XHTML labeling for all.

13. How To Build Quick and Simple AJAX Forms with JSON Responses

In this lesson we go through the steps to create a form of AJAX, which will return a response JSON is used to display the success / error messages. We use and JQuery Jquery form a plug to make this process quick and painless.

14. Vista-like Ajax Calendar version 2

Vista-like Ajax Calendar (vlaCalendar) version 2, unobtrusive web version of the working day and low taskbar Windows Vista, the Framework MooTools JavaScript, Ajax, XHTML, CSS and PHP.

15. Create an In-Place Editing System

In this lesson, learn how to create one found editing system in place, as in popular sites like Flickr.

16. How to Code a Fun To-Do List With PHP and AJAX

In this tutorial we will work with various technologies. In short, we create a list of tasks in asynchronous mode, allowing you or your users to create, update and delete. To fulfill our mission, we will work with PHP and JQuery functions AJAX. I think you can not find it as difficult as it may seem at first think. I’ll show you exactly how!

17. AJAX Multiple File Upload Form Using jQuery

Ability to upload multiple files simultaneously, which are necessary for Web applications, but the administration will increase with the number of input fields file is somewhat tedious and long. But thanks to JQuery, which we can simplify this task. Today I was Ajaxified multiple files upload form that uses less code on the server side, creating, and offers a very nice interface.

18. 8 Ajax Data Controls and Effects to Work with Tables

I was wandering around the various projects associated with HTML tables and data management. To achieve the proper table of the user for their web projects.

19. Ajax Forms with jQuery

There are so many different JavaScript frameworks out there, but in recent years with JQuery, and I like it. Not only the library significantly less than others, but it’s so easy to use. I wanted to show how easy it is on a regular basis in the form of “Ajax is a set.

20. Making an Ajax PHP Watermarker Script

In this article  will show how to make scripts PHP AJAX Watermarker. So all must do what the user can select a file in folder, type your watermark in the watermark and text at once with Ajax.

21. Use jQuery and ASP.NET AJAX to build a client side Repeater

You can only send data to the client, a deep reduction in what you send and see significant performance gains. It is also possible to easily add features such as low birth weight sorting and paging on the client. This can not only improve the user experience, but reduce server load and bandwidth requirements.

22. Ajax for Java developers: Build dynamic Java applications

Refresh the page to cycle represents one of the biggest usability obstacles in Web application development and is a major challenge for developers of Java ™. In this series, author Philip McCarthy is an innovative approach to creating dynamic Web application experiences. AJAX (Asynchronous JavaScript and XML) technology is a programming language that allows you to integrate technology Java, XML, Java and JavaScript for Web applications that break the paradigm of reloading the page.

23.Using the Prototype JavaScript library and script.aculo.us

If you are developing Web applications these days, you are on the development of Ajax. Ajax is not something unusual, that you put in their application in specific cases. It has become an integral part of web development. For some proposals with Ajax is a sensitive issue. Cross-browser limitations to deal with writing a lot of complicated JavaScript, and learning about magic numeric codes in JavaScript, which were just some of the problems facing developers of Ajax. Fortunately, there are several open source JavaScript libraries now to make things much easier. In this first article of a three-part series, creating Ajax applications for managing songs using the Prototype JavaScript library and script.aculo.us.

24.Ajax security tools

Some vulnerabilities in Ajax applications so that hackers can cause damage to your applications odor. Identity theft, unauthorized access to confidential information are the browser crashes, a reduction in Web applications, and denial of service attacks are just some of the possible disasters Ajax applications can be vulnerable to the development and protection when creating Ajax capabilities into their applications. Regular DeveloperWorks author Judith Myerson suggests some wider use of tools, including Firefox and accessories, which are used to improve and fix security problems in applications, AJAX.

25. PHP components: Autosuggest

For all beginners Ajax (the easiest to implement only 8Kb) and all you need to do is change some settings. Check this post for more information.

26. Creating An Amazing jQuery Style Switcher with Ajax Techniques

This tutorial shows how to create a style Selector with JQuery and PHP. The end result is a discrete and fully biodegradable Switcher dynamic style that implement quickly and easily.

27. Easy Ajax with jQuery

Ajax is changing web applications, giving them an answer that goes beyond the desktop is not known. But behind all the hype was not a lot is not Ajax – (X) HTML, JavaScript and XML, new, and in this tutorial, I show how the process of adding Ajax to your application further with the simplification of JQuery, a popular library of JavaScript.

28. AutoCompleter Tutorial – jQuery(Ajax)/PHP/MySQL

I thought I’d write this tutorial because most of the applications I have seen a complete car, just dump the code in the Zip file and tell you how to use it instead of how and why this works, you know that it can adapt to much more (it was with other applications, which I wrote) found!

29. Auto-populating Select Boxes using jQuery & AJAX

If you are familiar with using the box to select the categories and subcategories, such as eBay is not selling any item, usually a large amount of JavaScript can help you choose the fields that are required, but JQuery can greatly simplify this task by the touch of AJAX.

30. Using Ajax to Validate Forms

Form of a general Internet, so we believe them without a mistake is much more about it. However, if your site has some nice touches added that this process easier, seeks to accelerate the process and avoid disappointment in the achievement of our users’ preferences (for example, try to get the name using Hotmail!).

Release jQuery power and enjoy benefits right now – hope you like my findings and you’ll put them in good use.

1. UberMenu – WordPress Mega Menu Plugin

UberMenu is a user-friendly, highly customizable mega menu ( or mega drop down menu ) WordPress plugin. It works out of the box with the WordPress 3 Menu Management System, making it simple to get started but powerful enough to create highly customized and creative mega menu configurations.

View Demo

1.1. Styles with Shortcodes for WordPress

Have you ever been in the situation where you have a great looking WordPress theme, but you are missing some custom styling for different elements? Maybe you don’t know PHP , CSS and Javascript and are not able to implement the cool feature you are missing.

Styles with Shortcodes is the solution for this problem. This plugin lets you customize content faster and easier than ever before by using Shortcodes. Choose from 100 built in Shortcodes like; jQuery Accordion, Tabs and Toogle, Tooltips, Column Shortcodes, Gallery and Image Shortcodes, Button Styles, Alert Box Styles, Pullquotes, Blockquotes, Twitter buttons, Retweet button, Facebook Like, Follow me on Twitter buttons, Linkedin, Google +1, Flattr  and many more!

View Demo 

1.2.HOW TO: Create a jQuery Carousel with WordPress Posts

This post will give you a quick run down of how to easily add a simple and easily customizable carousel with WordPress posts from a specified category.

Check out demo

2. WP Slimbox 2

A WordPress implementation of the stellar Slimbox2 script by Christophe Beyls (an enhanced clone of the Lightbox script) which utilizes the jQuery library to create an impressive image overlay with slide-out effects.

Check out live demo

3.WordPress jQuery Lightbox Plugin

Used to overlay images on the current page, a little bit different popular Lightbox plugin.

If you want to see live demo of this plugin, just scroll down the page to see sample image and click on it.

Check out live demo

4.Carousel Gallery (jQuery)

This plugin tweaks the gallery tag in WordPress 2.6 thusly by replacing it with a javascript carousel. The plugin uses jQuery and a jQuery plugin called jCarousel.

Check out live demo

5.Shadowbox JS

Shadowbox is an online media viewing application that supports all of the web’s most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can display a wide assortment of media in all major browsers without navigating users away from the linking page.

Check out for live demo

6.jQuery Lightbox For Native Galleries

Makes the native WordPress galleries use a lightbox to display the fullsize images.

Check out live demo

7.jQuery Comment Preview

Live comment preview without page reboot. Works on jQuery.

8.WordPress Plugin jQuery Pagebar

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

Check out live demo

9.Google Analyticator

Google Analyticator adds the necessary JavaScript code to enable Google Analytics logging on any WordPress blog. This eliminates the need to edit your template code to begin logging. Google Analyticator also includes several widgets for displaying Analytics data in the admin and on your blog.

Check out screenshots

10.OpenID Comment Form

OpenID is an open standard that allows users to authenticate to websites without having to create a new password. This plugin allows users to login to their local WordPress account using an OpenID, as well as enabling commenters to leave authenticated comments with OpenID. The plugin also includes an OpenID provider, enabling users to login to OpenID-enabled sites using their own personal WordPress account.

Check out screenshots

11.sCategory Permalink

Permalink option of WordPress %category% has one great limitation – when this option is selected, WordPress uses category with lowest ID for permalink generation. This plugin is intented to bypass WordPress permalinks limitation and allows you to select category for permalink generation.

12.Google AJAX Translation

The Google AJAX Translation WordPress plugin provides a quick, simple, and light way to add translation to your blog.

13.Infinite scroll

Infinite scroll has been called autopagerize, unpaginate, endless pages. But essentially it is pre-fetching content from a subsequent page and adding it directly to the user’s current page. This means they never need to click “Next Page”, which dramatically increases stickiness.

Check out demo

14.GD Star Rating

GD Star Rating plugin allows you to set up rating and review system for posts, pages and comments in your blog. You can set many options for displaying the rating stars, and also add widgets into the sidebars for displaying top ratings and other statistics generated by the plugin. Plugin includes advanced settings panels that will allow you to control many aspects of rating. Plugin also supports multi ratings along with thumbs based ratings.

Check out live demos throughout their whole homepage

15.Image Drop Shadow

Image Drop Shadow wordpress plugin adds stylish drop shadow to images posted on your blog using jQuery. Just install it and all your posted images will automatically have a drop shadow.

16.J Post Slider

Show your post in fancy jQuery box, rotating images, with show-up text box with post description. This Plugin will present your HOT posts, in jQuery animation show.

17.Live Blogroll

Live Blogroll will make your blogroll livelier. It will show a number of ‘recent posts’ for each link in your Blogroll using Ajax.

18.WP Wall

WP Wall is a “Wall” widget that appears in your blog’s side bar. Readers can add a quick comment about the blog as a whole, and the comment will appear in the sidebar immediately, without reloading the page.

19.WordPress Sidebar Turned Apple-Flashy Using jQuery UI

Beautiful tutorial, explaining how to modify and add Apple type sidebar using the Accordion plugin in jQuery UI.

Check out demo

20.Adding Form Validation to WordPress Comments using jQuery

This tutorial will show you how to use jQuery to do some instant checking on an example comment form.

Check out demo

21.Snazzy Archives

Snazzy Archives is a visualization plugin for your WordPress site featuring an unique way to display all your posts. Your archive page will never be boring again!

22. Shockingly Big IE6 Warning

The Shockingly Big IE6 Warning is a plugin that shows a warning message alerting the user why it is bad to use IE6, the security risk and the bad compatibility of Web Standards.

You can choose from 3 types of warning:

• TOP, a discreet top bar
• FULL, a fullscreen warning
• CRASH, the mean option

23.WordPress Plugin – My Page Order

My Page Order allows you to set the order of pages through a drag and drop interface. The default method of setting the order page by page is extremely clumsy, especially with a large number of pages.

24.Using jQuery to liven up your WordPress login

Nifty WordPress login page using Thickbox jQuery plugin.

Check out demo

25.Plugin Central

Plugin Central is a comprehensive WordPress plugin solution. Main features are:

• Install plugins directly by typing the name of plugin or the URL to zip file!
• Multiple-plugin install feature allows you to move your plugins from one blog to another
• Displays status of plugins in need of update on the Dashboard
• Option to update all plugins at once!

26.Tweet Blender

Similar in functionality to Twitter’s own widget but has support for multiple authors, hashtags, and keywords all blended together. The plugin can show tweets from just one user (as all other Twitter plugins do); however, it can also show tweets for a topic which you can define via Twitter hashtag or keyword. But there is more! It can also show tweets for multiple authors AND multiple keywords AND multiple hashtags all blended together into a single stream.

Check out live demo on right sidebar of author’s site

27.Advanced Spoiler

Show or hide contents(text, image etc.) with animated effects wrapped by spoiler markup tag([spoiler][/spoiler]).

28.SimpleModal Contact Form (SMCF)

SimpleModal Contact Form (SMCF) is an Ajax powered modal contact form. It utilizes the jQuery JavaScript library and the SimpleModal jQuery plugin.

29.Accordion Image Menu

This is a different menu that uses your post images as a background. You can insert the menu wherever you want: content, php files or widget if your theme allows it.

Live demo on author’s website sidebar

30.PixoPoint Menu Plugin

Adds an SEO friendly, accessible regular or dropdown menu to your WordPress blog.

Check out live example

31.Quick Search

Quick Search add AJAX Search to your site sorting results by Posts, Page and Comments. You can easly customize the popup menu style by modifying the file quick-search.css.

32.Ozh’ Better Plugin Page

Better Plugin Page brings a few valueable enhancements to the Plugin Management page: tiny icons, less clutter, quick action links. Handy for those who have 70+ plugins on their blog.

Check out demo

33.Highlight Search Terms

Highlights search terms using jQuery when referer is a Google, Yahoo or Lycos search engine or within WordPress generated search results. This plugin is a light weight, low resource demanding.

34. µAudio Player

µAudio is a slim (450 Bytes!), fast plugin to create a flash mp3 player when mp3 links are clicked. In order to reduce clutter and file transfer, the links are unmodified until they are clicked, at which point a div with the player is faded in after the link. A second click on the link fades the player back out.

35.News-Ticker

A JQuery based News Ticker Displays a sliding or fading list of post titles, rss reeds or comments and excerpts with links to post.

From jQuery homepage – “jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.”

jQuery definitely is one of the biggest trends coming in up-to-date designs and the best of all, everything is done without countless code lines. Keeping in mind such aspects I created hopefully pretty complete collection of jQuery sites, tip and trick articles, video screencasts, tutorials, cheat sheets and lot’s more. Took a while to compile and research was really solid. Enjoy as always!

Getting Started

1.7 reasons why you really should learn jQuery

2. jQuery Crash Course

Introduction to Jquery, further reading and basics.

Huge Tutorial Series From Beginner To Intermediate User, Tips And Tricks

3. jQuery for Absolute Beginners: The Complete Series : Video Tutorials

Over the course of about a month, ThemeForest released fifteen video tutorials that teach you EXACTLY how to use the jQuery library. You’ll start by downloading the library and eventually work our way up to creating an AJAX style-switcher. Beautiful learning and resource!

4. 10 jQuery Tutorials for Designers by WebDesignerWall

This article contains 10 visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery.

5.4 Jquery Easy Tips And Tricks Tutorial

6.jQuery Essentials Presentation at MinneWebCon (102 pages)

Very well written jquery essentials presentation. Really worth the time.

7.12 Useful and Handy jQuery Tips and Tricks

8.Improve your jQuery – 25 excellent tips

Great tips, even some intermediate users could now know few of these.

9.Build An Incredible Login Form With jQuery

In this tutorial, you’ll create a sliding panel, that slides in to reveal more content, using JQuery to animate the height of the panel.

Demo

10.Create a Photo Admin Site Using PHP and jQuery : ScreenCast

11.Building a jQuery-Powered Tag-Cloud

12.WordPress Sidebar Turned Apple-Flashy Using jQuery UI

This tutorial assumes that you have a wordpress engine running on a server that you have access to upload files, download files and browse to.

Demo

13.How to Load In and Animate Content with jQuery

Demo

14.Create a Slick Tabbed Content Area using CSS & jQuery

Demo

15.Styling Buttons and Toolbars with the jQuery UI CSS Framework

Coded real-world examples of themeable buttons and toolbars using the jQuery UI CSS framework, a system of classes developed for jQuery UI widgets that can easily be applied to any plugin, and even static content.

Demo

16.jQuery Slideshows With the Cycle Plugin

The jQuery Cycle plugin allows developers to quickly and easily create a slideshow out of anything contained within a given div element. However, this is more than just your grandmother’s slideshow fade plugin. The jQuery cycle plugin comes with a vast array of transition effects for you to use.

Demo

17. InnerFade with JQuery

InnerFade is a small plugin for the jQuery-JavaScript-Library. It’s designed to fade you any element inside a container in and out.

These elements could be anything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings.

Demo

18.Creating a Dynamic Poll with jQuery and PHP

Demo

19.Setting Equal Heights with jQuery

Demo

20.jQuery Tools: Scrollable

Scroll your HTML with eye candy

Demo

21.jQuery Tools: Tooltips

Demo

22.jQuery Tools: Overlay

Yet another, beautiful image displaying way – similar to popular Lightbox, but this one seems to be more elegant.

Demo

23.jQuery Tools: Expose

Expose is a JavaScript tool that exposes selected HTML elements on the page so that the surrounding elements will gradually fade out. Works like a charm if you want to stand out.

Demo

24.Create an amazing music player using mouse gestures & hotkeys in jQuery: Screencast

Demo

25.Create an Amazon Books Widget with jQuery and XML

Demo

26.Creating a “Filterable” Portfolio with jQuery

This tutorial will show you how to make portfolio “filtering by category” a little more interesting with just a little bit of jQuery.

Demo

27. jQuery Hover Sub Tag Cloud

Demo

28. How To Build Quick and Simple AJAX Forms with JSON Responses

Demo

29. Simple jQuery Spy Effect

jQuery Spy Effect scrolls the list in a beautiful way.

Demo

30. Slider Gallery Tutorial: Screencast

A tutorial explaining how to create a similar effect used to showcase the products on the Apple web site.

Demo

31. Semantic Blockquotes with jQuery

Blockquotes can really assist in making your text visually appealing. Jack Franklin gives us a great tutorial on how to create blockquotes using jQuery. Even beginners to jQuery will be able to learn how to make these blockquotes.

32. Jcrop – the jQuery Image Cropping Plugin

Demo

33. Horizontal Scrolling Menu made with CSS and jQuery

Demo

34. jQuery Sequential List Tutorial

This tutorial will show you how to use jQuery to add a sequent of CSS classes to create a graphical list. The second example will show you how to add a comment counter to a comment list using jQuery’s prepend feature.

Demo

35. How easy to create a slide tabbed box using jQuery

Demo

36. How to Mimic the iGoogle Interface

This tutorial will be showing you how to create a customizable interface with widgets. The finished product will be a sleek and unobtrusively coded iGoogle-like interface which has a ton of potential applications!

Demo

37. jGrowl

jGrowl is a jQuery plugin that raises unobtrusive messages within the browser, similar to the way that OS X’s Growl Framework works.

38. Creating accessible charts using canvas and jQuery

Demo

39. jQuery and Google Maps Tutorial

This tutorial will walk you through how to get started using jQuery inside the Google Maps environment.

Demo

40. How To Create An Amazing jQuery Style Switcher

his tutorial will be showing you how to create a style switcher using jQuery and PHP. The end result will be an unobtrusive & entirely degradable dynamic style switcher which will be quick and easy to implement.

Demo

41. How-To: Reddit-style Voting With PHP, MySQL And jQuery

This tutorial will show you how to create a voting system similar to Reddit with jQuery, PHP and MySQL.

Demo

42. Selecting and Styling External Links, PDFs, PPTs, and other links by file extension using jQuery

This tutorial will explain how to use jQuery to select and style PDFs, PPT, images, and external links all differently using jQuery and CSS.

Further Reading, Advanced Tips and Tutorial Sites

43.Official Jquery Tutorial Directory

As first add is obvious, but on their official website you can find many tutorials related to mastering Your Jquery skills even in several different languages.

44.LearningJquery

Learning jQuery is a multi-author weblog providing jQuery tutorials, demos, and announcements. They have tutorials for all skill levels, and each entry is categorized by level of difficulty.

45.15 Days Of jQuery

Examples and tutorials to help you learn JQuery – it hasn’t been updated for a while, but still a lot of useful articles you’ll find there.

46.jQuery for Designers

Learn how easy it is to apply web interaction using jQuery – beautiful tutorials and website, if you still can’t find what you need, you can even request a tutorial.

47.Ultimate Jquery List

jQuery Ajax tutorials to jQuery UI examples, you’ve found the ultimate list of tutorials and plugins for jQuery! Everything from Ajax file uploaders to RSS feed plugins, all on one of the longest pages you’ll ever scroll.

48. Bassistance

This blog is about programming (with focus on web applications and JavaScript), music and other stuff the author happens to write about. It’s also the home of several jQuery plugins.

49. Remi Sharp’s Blog

Site with several good tips and articles related to jquery, also the same man behind useful tutorial site – jQueryForDesigners I showcased above.

Online jQuery Cheat Sheets

50.VisualJquery 1.2.6

An online cheat sheet and visual reference to Jquery, where you can find Jquery functions well explained, updated to jQuery 1.2.6. version. While playing with Jquery, this website seems to be a very useful place to visit.

51.jQuery 1.2 cheatsheet wallpaper

The size of wallpaper is 1280×960, two color variations.

52.jQuery 1.2 Cheat Sheet (*pdf file)

53. ColorCharge Jquery CheatSheet

Further reading, similar articles from other resources:

• 15 Resources To Get You Started With jQuery From Scratch
• 45+ New jQuery Techniques For Good User Experience
• 40 Exceptional jQuery Interface Techniques and Tutorials
• HTML, CSS, PHP and jQuery Killer Tutorials
• 18 jQuery scripts and tutorials to improve your portfolio
• 25 Powerful and Useful jQuery Tutorials for Developers and Designers
• 40+ Excellent jQuery Tutorials
• 51+ Best of jQuery Tutorials and Examples
• Top10 Simplest jQuery Tutorials

54. UsejQuery

I got great addition to the list from mustardamus – UsejQuery website is inspirational website showcasing all jQuery based sites and regularly updating. Also there’s blog ThisBlog.UsejQuery with several jQuery tutorials You should check out.

55. jQuery User Interface

I don’t know how I missed this one too, but now here it is, many effects you’ll find here already been premade for you with great support.

jQuery UI is an open source library of interface components — interactions, full-featured widgets, and animation effects — based on the stellar jQuery javascript library . Each component is built according to jQuery’s event-driven architecture (find something, manipulate it) and is themeable, making it easy for developers of any skill level to integrate and extend into their own code.

Well, good luck in your learning process and feel free to add another great tutorials, links, tips, tricks and related sites.