Stunning Colorful Jquery Effects, Lightbox, Tutorials | Web Designers Inspiration and Online Resource

JQuery is one of the most popular JavaScript frameworks which are powerful tools and huge benefit for developers to improves the designs integration with Web applications. This article will briefly introduce you to the jQuery with excellent examples. JQuery is really wonderful plug-in for designers which are giving attractive functionality to the web sites. Even now day's every designers focusing on Jquery because of needs to have functionality out of the box that can be accessed by using this.
Here with showcased Complete 95+ Stunning Jquery effects examples, with Tutorials For Your reference and Inspirations.

1. Flip! A jQuery plugin

This demo mimics the popular card flip technique which can rotate an element 360 degrees around its own x or y-axis.

2. jQuery Quicksand plugin

This is a great plugin for sorting an array of elements/icons on a page with nice fade-in/fade-out and animation effects.

3. ImageFlow

This image viewer is similar to Apple's CoverFlow interface that has become so familiar in their various products and applications.

4. Building an interactive map with jQuery instead of Flash

This demo joins the power of jQuery with Ajax to really create an engaging interface.

5. Slideout Tips With jQuery & CSS3

Clicking on the "+" symbols reveals additional information with a nice smooth animation effect.

6. Zoomer Gallery

In this demo, what appears to be a regular static image gallery is given some extra interactivity by using a multi-layer zoom effect when hovering over an image.

7. Circulate

This demo shows the much used Flash effect of circling an image around a page – all done using jQuery.

8. Photo Zoom Out Effect

This demo looks deceptively simple, but upon further examination you will find there are several layers to the complexity of the zoom-out effect.

9. Sliding Boxes and Captions with jQuery

Here we get to see how powerful transitions can be created using jQuery, a technique once reserved for Flash developers only.

10. CSS3 Lightbox Gallery

This plugin looks like it was written specifically for social-media. Dragging and dropping a photo on top of the "share box" will open a modal window that can be the interface to call an API via AJAX which can allow the user to share a photo on Flickr, Twitter, Facebook, and other sites.

11. Making a Photoshoot Effect With jQuery & CSS

Although this demo may seem like eye-candy at first glance, it could be a very powerful tool for working with large images when coupled with AJAX or HTML5 local storage.

Advertise Here

12. Awesome Bubble Navigation

Here the developer makes good use of color transitions and animation to produce a very attractive and interactive menu.

13. Beautiful Background Image Navigation

In this demo each user action triggers several transitions which all act to fully immerse the user in the interface.

14. AviaSlider

AviaSlider uses classic Flash-like transition effects to enhance what would appear to be a standard slider interface.

15. Background Image Slideshow

Animated backgrounds are one of the areas where Flash used to dominate in web design. Here is an example using jQuery instead.

16. Panning Slideshow

Another unique take on the typical slideshow interface. Here the author adds diagonal navigation to spice up the interface and to make it stand out.

17. jqFancy Transitions

This plugin can be used to display your photos as a slideshow with fancy Flash-like transition effects.

18. iCarousel – Horizontal images slider

Another slideshow that adds just a touch of easing to make the transitions really stand out. It's no wonder that they chose to showcase sexy Mac products in this demo.

19. Making an Interactive Picture with jQuery

This demo can be used to take advantage of websites where there is lots of screen space. Clicking on a section of the website reveals a modal box which displays more information about the clicked section.

20. Cloud Zoom

A plugin that looks like it was designed with eCommerce in mind. Cloud Zoom is easy to implement and can really enhance the user's experience.

21. Apple-like Retina Effect

Anyone who has used an iPhone, iPod touch, or iPad is familiar with the "Retina View" that will enlarge a small area on the screen when you touch the area for an extended period of time. This demo implements this effect for the desktop.

22. Photo Zoom Out Effect

Here you'll learn how to create a simple image zoom out effect with jQuery. The idea is show some images which are zoomed in initially and when hovering over an image it gets zoomed out. This effect could be used in photography websites or image galleries.

23. jCrop

Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

24. Zoomer Gallery

Zoomer Gallery allows you to easily transform your image lists into beautiful galleries with Flash-like zoom effects in them. It's a simple but elegant way of giving your interfaces a nice little shine and at only 2KB in size, it's both compact and surprisingly easy to use.

25. jQuery Captify Plugin

Captify is a plugin for jQuery written by Brian Reavis (@brianreavis) to display simple, pretty image captions that appear on rollover. It has been tested on Firefox, Chrome, Safari, and the wretched Internet Explorer.

26. Animate Panning Slideshow with jQuery

In this tutorial you'll take the makings of a classic slideshow, but use a different kind of transition to animate between slides.

27. Sponsor Flip Wall With jQuery & CSS

In this tutorial you'll learn to create an interactive sponsor wall that fits a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other elements of your design.

28. jSquares

jSquares is a jQuery plugin that pops up an image and a description in an overlay on hover.

29. ZURB JavaScript Annotation Plugin

A plugin to easily add and save annotations on an image.

30. Zoomooz

Zoomooz is an easy-to-use jQuery plugin for making any web page element zoom.

31. iViewer

iViewer is a plugin used to load and view image in container with ability to zoom image and to drag it with mouse in container.

32. SIDEWAYS – jQuery fullscreen image gallery

A simple, yet elegant fullscreen image gallery.

33. Nivo Slider

34. An HTML5 Slideshow w/ Canvas & jQuery

35. Image Flow 0.9

Image flow is inspired by Apple's cover flow. The javascript renders the cover flow effect without any noticeable flaw. Keyboard navigation (arrow keys), mouse scroll and dragging is supported. Very cool script to use.

36. jquery mb.gallery

A full featured photo gallery, with navigation toolbar, thumbnails, autosize frame; you can also use it to show a public Flickr set or all public Flickr user photos.

37. PictureSlides

PictureSlides is a plugin for jQuery, and it is a highly customizable JavaScript-based way to easily turn your images into a collection viewable as a slideshow, and with fading effects, if desired. It can be a stand-alone slideshow or have a complete image library look with thumbnails, navigation buttons etc (an older version, which also works with DOMAssistant.

38. Supersized jQuery Plugin

39. AviaSlider

AviaSlider, a slideshow plugin features unique transition effects, includes an image preloader, autoplay and stop, supports linked images and size of only 8 kb works with jQuery lower and higher versions.

40. The Lof JSiderNews Plugin

Base on the Jquery Framework and the Easing Plugin, The JSiderNews Plugin is a slideshow plugin that displaying images or type of content and support favious navigation to previous|next items.

41. Creating a Slick Auto-Playing Featured Content Slider

42. GalleryView: A jQuery Content Gallery Plugin

GalleryView aims to provide jQuery users with a flexible, attractive content gallery that is both easy to implement and a snap to customize.

43. Advanced jQuery background image slideshow

44. Simple Slideshow using Mootools / JQuery

45. A Beautiful Apple-style Slideshow Gallery With CSS & jQuery

46. Zoomable & Interactive Map

47. Bubble Navigation

48. Full Page Image Gallery

49. Collapsing Site Navigation

50. Slide Down Box Menu

51. Sideways – Fullscreen Gallery

52. Apple-like Retina Effect

53. DualSlider

54. WanderWall

55. WYSIWYG Editor

56. Movie Search App

57. Crazy Dots

jdCrazyDots is a jQuery Plugin that creates a loading spinner via CSS. Best appearance is with CSS3 capable browser, but can be made to work in older browsers, too.

58. An easy way to create light-box with jQuery & CSS

59. COIN SLIDER

60. Presentation Cycle

61. 3D Cloud Carousel

62. LofCoolFlashNews Plugin

63. JCoverflip

64. Slide Deck

SlideDeck is a powerful slider plugin made for web designers. With SlideDeck, you can organize any type of web content into a beautiful and user-friendly slider.

Tutorials

65. Thumbnails Navigation Gallery with jQuery

66. Custom Animation Banner with jQuery

67. Annotation Overlay Effect with jQuery

68. Compact News Previewer with jQuery

69. Posts Slide Out Boxes with jQuery and CSS3

70. Latest Tweets Tooltip with jQuery

71. Slide Down Box Menu with jQuery and CSS3

72. Minimalistic Slideshow Gallery with jQuery

73. Randomizer App w/ jQuery

74. Google Powered Site Search with jQuery

75. Animated 404 Page

76. Feature Suggest App w/ PHP, MySQL & jQuery

77. Dynamic FAQ Section

78. Stunning Circular Motion Effect with jQuery

79. Full Page Image Gallery with jQuery

80. Make Your Header Responses To Mouse Movements with jParallax

81. Create A Funky Parallax Background Effect

In this tutorial, we'll be using JQuery to take a horizontally scrolling website and add a parallax scrolling background effect reminiscent of old-school 2D platform games like Sonic the Hedgehog.

82. Auto-Moving Parallax Background

83. Animated Header in jQuery

We are going to build a header that animates it's background. We will also encase the header in shadow for the little extra dramatic effect.

82. Cartoon-like Background Image Animation

jAni is a simple plugin for jQuery which allows you animate background images. The plugin is basically an alternative to the animated GIF but with several benefits. At first, it's always better to use an animated GIF as this format is supported by all browsers without any JavaScript code or additional markup, but the "dark side" of it is that an animated GIF allows only 256 colors and you cannot control animation in any way. The jAni loads a long vertical image and changes its background position with the speed you setup, giving you more control of the animation.

83. Animated Cartoon Robot

Aside from being a fun exercise, what purpose does something like this have? None that's plainly obvious. Its about as useful as a miniature ship in a bottle. Yet it does have an underlying purpose. It could inspire someone to look beyond the perceived constraints of web designers and developers.

84. Crafting an Animated Postcard

85. Grid Accordion with jQuery

86. jQuery/PHP Powered Chat Room

87. Colourful rating system with CSS3

88. COIN SLIDER

89. Presentation Cycle

90. Hover Zoom effect With Jquery and Css

91. Create a Simple iTunes-like Slider

92. Slide Thumbs

In this post I want to explain how to turn old boring image viewer into a nice-looking one with jQuery. It's simple just using some lines of java-script code. Implement this and enrich animation features to your web projects.

93. Rotating Billboard System with jQuery and CSS

Video and Media Plugins

94. Custom YouTube Video Player

95. jMediaelement

96. HTML5 video player with CSS3 and jQuery

97. HTML5 video player with CSS3 and jQuery

• Tags: Jquery, lightbox, Tutorials

Simple Lightbox effect with CSS – no javascript needed

You may call it Lightbox, or Greybox, or Thickbox, but it's always the same effect.

When you are on a page, and click on a photo or trig some event, a Lightbox is an effect that fades the pagein the background to show you new content in the foreground.

I mean this effect

In the upper example, when clicking on a photo the site fades to black and shows the photo, in the lower one when clicking on "login" the site fades to white and shows the login form.

There are tons of Lightbox scripts in the web, each one with its unique features and limitations, but all require massive use of Javascript or the installation of javascript frameworks.

In some cases, there are "lightweight" versions with "only" 40KB of Javascript.

This example does not want to compete with those scripts, but if you are looking for a simple, 100% CSS, 0% javascript lightbox, this may help you.

Features of this Lightbox:

100% CSS as said
You can insert any content in it (some scripts out there only allow images) and easily upload your codes to your web hosting provider.

That's all. Did you need something more? Think wisely…

Let's start with the CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

.black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); }   .white_content { display: none; position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; padding: 16px; border: 16px solid orange; background-color: white; z-index:1002; overflow: auto; }

The black_overlay class is the layer that will make the web page seem to fade. It's a black 80% opaque background as long and wide as the browser that will overlay the web page (look at the z-index) and at the moment is not shown (look at the display).

The white content class is the layer with the photo/login screen/whatever you want to appear in the Lightbox overlay. It's a white layer to be placed over the black_overlay layer (look at the z-index, greater than the black_overlay one). The overflow allows you to have a scrollable content.

In the html file, put this line just before the tag

1	<div id="light" class="white_content">Hi, I am an happy lightbox</div><div id="fade" class="black_overlay"></div>

Now, trig the action you want to open the Lightbox and insert this code:

1	document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';

For example, in a link would be:

1	<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Click me</a>

Remember to include in the lightbox the code to close it, for example

1	<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Hide me</a>

A complete example page could be

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>LIGHTBOX EXAMPLE</title> <style> .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); } .white_content { display: none; position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; padding: 16px; border: 16px solid orange; background-color: white; z-index:1002; overflow: auto; } </style> </head> <body> <p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p> <div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div> <div id="fade" class="black_overlay"></div> </body> </html>

That you can find up and running in this page.

In this example everything is static and preloaded, but you can easily add some php/ajax code to make it more dynamic while keeping the effect 100% CSS based.

Hope you will find it useful, should you use it in one of your works send me a comment and I'll feature your site as example.

Mobile Web Design Tips and Tricks

Having a mobile-optimized web site can really make your site stand apart from the pack. Even though smartphones like the iPhone and Google Android devices can display "the full web," having a web page formatted for smaller screens and with features that can take advantage of a touch screen, geolocation, or address book functionality can make the mobile web browsing experience that much better.

Even just a few years ago, optimizing websites for mobile browsers was a painful and difficult process, in part because of the limitations of most mobile browsers. Today, thanks to the proliferation of WebKit (which powers the browsers on the iPhone, Android and webOS devices, with BlackBerry expected to join the mix next year), it's much easier to decide on a strategy for making your website pop on mobile platforms.

We've put together a toolkit of resources for the designer and non-designer alike to get you started. Did we miss your favorite tool or service? Let us know in the comments!

---

Services for Optimizing Your Content for Mobile Browsers

---

If you don't have experience with HTML and CSS (or you don't have the time), there are a number of services that can create mobile versions of your website for you.

MoFuse and MoFuse Premium — MoFuse has been offering a simple way for bloggers and businesses to easily create mobile versions of their websites for quite some time. For bloggers or smaller sites, the company offers MoFuse for Blogs, which is a free and easy way to quickly mobilize your web site (it uses your RSS feed to generate the new site) whenever it is accessed by going to "m.yourdomain.com." For businesses or larger sites that want a little more control, MoFuse Premium offers more customizable options.

Disclosure: MoFuse powers Mashable's mobile website.

Mippin — Mippin is another free service that can create a quick mobile version of your website using your RSS feed. The options aren't extensive, but the version that Mippin creates should be viewable on almost any WAP compatible mobile phone.

mobiSiteGalore — mobiSiteGalore can create quick mobile versions of websites, offers users some customization options, and can take advantage of the .mobi TLD. mobiSiteGalore will let you create your mobile site from a computer or from your phone.

---

Plugins for WordPress and Other Publishing Systems

---

Having a WAP-formatted site is fine, but if you want to be able to offer visitors from an iPhone or Android device some really great optimized mobile features, you want to consider creating a separate stylesheet for your website. For users of WordPress and other publishing systems, there are a lot of plugin options available that make adding a mobile theme to your site extremely easy.

WPtouch — WPtouch is a fantastic plugin available for WordPress.org users (WordPress.com users can also take advantage of WPtouch with the recent addition of mobile themes) that automatically makes your site easy to read and access from an iPhone or Android device.

The plugin is extremely robust and even offers backend features like the ability to set an iPhone Favicon (so that when users add your web page to their iPhone's home screen, it has a great looking icon), the ability to work with other WordPress plugins like FlickrRSS and Blip.it, support for AJAX, customized headers, and more. What I really like about WPtouch is that users can choose to turn it off and access the full version of a website at any time by flicking the mobile on/off switch at the bottom of each page.

WordPress Mobile Edition – Crowd Favorite created this plugin that allows users to easily define what type of devices should be shown a mobile web page (and what shouldn't — for instance if you want BlackBerry users to see your mobile page but you want iPhone users to see the full site) and it comes with Crowd Favorite's Carrington Mobile Theme which is easy on the eyes and also fully customizable.

WordPress Mobile Pack — The WordPress Mobile Pack is from the dotMobi team and it is a whole suite of tools for mobile web optimization. It includes a base mobile theme, which is very attractive, a mobile admin panel, mobile ad support and the option for visitors to switch between the full and mobile versions of a website.

WPtap — WPtap is a plugin for WordPress, and the site also offers up some alternative themes for users who want a more customized look and feel to add to their sites. WPtap looks very similar to WPtouch, but the emphasis seems to be on offering pre-built mobile styles.

WordPress Mobile by Mobify — This is a plugin for the Mobify service (see description in the next section). It handles automatic redirection of mobile clients to your Mobify mobile view page.

Mobile Plugin for Drupal — Mobile Plugin offers Drupal sites a mobile optimized view, comes with a mobile version of the standard Drupal Garland theme and includes device detection, hooks for adding mobile-specific features and automatic YouTube mobile replacement.

OSMOBI — OSMOBI is a service and plugin for Joomla and Drupal users that makes it easy to customize your blog for mobile visitors. The service is free for 150 page views every day but premium plans are also available.

---

Tools for Designers

---

Mobify — Mobify is a really interesting service because it makes it easy for designers or users who know HTML and CSS to painlessly modify and optimize their website for mobile access. The service is free (though paid monthly plans are available for more features) and it works extremely well with systems like WordPress, Drupal, ExpressionEngine and any other system that has predictable URL patterns and well formed HTML.

Mobify has a visual editor that lets you see what your content looks like on different device types and you can then modify the CSS and see the changes in real-time. Some sites that have used Mobify to create mobile optimized versions of their content include A List Apart and revered web developers and designers, such asJonathan Snook and Veerle Pieters.

iPhoney — iPhoney from Marketcircle gives Mac users a pixel-accurate web browsing environment that is powered by Safari. Why does this matter? Because when crafting the mobile version of your site, it's important to be able to see how the final product will look on your phone. iPhoney hasn't been updated in a while but is still a really useful tool.

iWebKit — iWebKit is a framework of sorts for creating iPhone-optimized websites or web apps that can take advantage of the iPhone's UI elements and other features.

jQTouch — jQTouch is a really innovative jQuery plugin for mobile web development on the iPhone and iPod touch. With it you can create websites or web apps with animations, support for forms, customized UI elements, additional extensions, swipe controls, and more. The developer is really active with the project and some of the stuff you can do with it is amazing.

iPhone Compatible CSS Layouts — Matthew James Taylor created a bunch of liquid CSS layouts that are iPhone and iPod Touch compatible and free for anyone to use. If you're looking for a starting point for building a mobile optimized site, you might want to give these layouts a look.

---

Other Resources

---

Mobile Web Design by Cameron Moll — This is a really great book (available in print or as an ebook) with tips, best practices, and examples on styling and optimizing your site for mobile content. If it suffers from anything it is that it was written before the iPhone explosion really took off, thus it isn't as up to date as it could be. Still, for mobile web enthusiasts, there's a lot of great information here.

Craig Hockenbery's "Put Your Content in My Pocket" — In August of 2007, Craig Hockenberry (from the Iconfactory and one of the brains behind Twitterrific for the Mac and the iPhone) wrote a great article for "A List Apart" and although some of the technologies have evolved, much of what Craig wrote then still applies today. A great read.

Smashing Magazines's Mobile Design Showcase – Need some inspiration? Smashing Magazine did a great roundup of iPhone optimized designs in September.

CSSiPhone — CSSiPhone is a CSS gallery dedicated to iPhone optimized site designs. Like Picasso said, "Good artists copy, great artists steal!"

Opera Mobile Developer Community — As some of our commenters pointed out, the Opera browser lets you see what a website will look like on a mobile handset by pressing Shift-F11. Also check out Opera's developer documentation for optimizing pages to be viewed on mobile devices. Opera Mobile and Opera Mini is a common browser on many cellular phones.

thanks to : http://mashable.com/2009/11/26/mobile-web-design/

Why tables are stupid in HTML Pages layout

Just like search engines, most screen readers read web pages in the order that they are displayed in the HTML. And tables can be very hard for screen readers to parse. This is because the content in a table layout, while linear, doesn't always make sense when read left-to-right and top-to-bottom. Plus, with nested tables, and various spans on the table cells can make the page very difficult to figure out.

This is the reason that the HTML5 specification recommends against tables for layout and why HTML 4.01 disallows it. Accessible web pages allow more people to use them and are the mark of a professional designer.

With CSS, you can define a section as belonging on the left side of the page, but place it last in the HTML. Then screen readers and search engines alike will read the important parts (the content) first and the less important parts (navigation) last.

1. Tables are usually more bytes of markup.(Longer to download, and more bytes of traffic for the host.)
2. Tables usually prevent incremental rendering.(Takes longer for the user to see anything on the page.)
3. Tables may require you to chop single, logical images into multiple ones.(This makes redesigns total hell, and also increases page load time [more http requests and more total bytes].)
4. Tables break text copying on some browsers.(That's annoying to the user.)
5. Tables prevent certain layouts from working within them (like height:100% for child elements of ).(They limit what you can actually do in terms of layout.)
6. Once you know CSS, table-based layouts usually take more time to implement.(A little effort up-front learning CSS pays off heavily in the end.)
7. Tables are semantically incorrect markup for layout.(They describe the presentation, not the content.)
8. Tables make life hell for those using screen readers.(Not only do you get the other benefits of CSS, you're also helping out the blind/partially-sighted. This is a Good Thing.)
9. Tables lock you into the current design and make redesigns MUCH harder than semantic HTML+CSS.(Have you seen CSS Zen Garden?)

About.com says  : http://webdesign.about.com/od/layout/a/aa111102a.htm


More :http://coding.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/


More : http://www.hotdesign.com/seybold/everything.html


Arguments :http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html    ,   http://webmasters.stackexchange.com/questions/6890/are-html-tables-bad-for-seo