Saturday, July 24, 2010

10 New CSS3 & jQuery Image Gallery and Slider Tutorials

Yestutor picks the 10 new css3 jQuery Image Gallery and slider tutorials and demos for its users around the web

An Awesome CSS3 Lightbox Gallery With jQuery

An Awesome CSS3 Lightbox Gallery With jQuery

In this tutorial you are going to create an awesome image gallery which leverages the latest CSS3 and jQuery techniques. The script will be able to scan a folder of images on your web server and build a complete drag and drop lightbox gallery around it.

View the Demo

Interactive Photo Desk with jQuery and CSS3

Interactive Photo Desk with jQuery and CSS3

In this little experiment you will create an interactive photo desk that provides some “realistic” interaction possibilities for the user. The idea is to have some photos on a surface that can be dragged and dropped, stacked and deleted, each action resembling the real world act.
View the Demo

Making a Mosaic Slideshow With jQuery & CSS

Making a Mosaic Slideshow With jQuery & CSS

When designing a product page, it is often necessary to present a number of images in a succession, also known as a slideshow. In this technique you will be making a jQuery & CSS mosaic gallery, featuring an interesting tile transition effect when moving from one slide to another.
View the Demo

Beautiful Photo Stack Gallery with jQuery and CSS3

Beautiful Photo Stack Gallery with jQuery and CSS3

In this tutorial you are going to create a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, you show the images of that album as a beautiful photo stack. In the photo stack view, you can browse through the images by putting the top most image behind all the stack with a slick animation.
View the Demo

Awesome Image Gallery using CSS3 and jQuery

Awesome Image Gallery using CSS3 and jQuery

You will be shown how you can create a kick-ass animated Shine Effect with jQuery & CSS3 and then use it to create your very own Shiny Gallery ‘ShineTime’. This effect is useful in making your user interface elements look like they’re a real polaroid photo (or made of glass) and the best part is, it’s not that difficult to achieve.
View the Demo

Kick-Ass jQuery & CSS3 Gallery With Animated Shine Effects

Kick-Ass  jQuery & CSS3 Gallery With Animated Shine Effects

You will be shown how you can create a kick-ass animated Shine Effect with jQuery & CSS3 and then use it to create your very own Shiny Gallery ‘ShineTime’. This effect is useful in making your user interface elements look like they’re a real polaroid photo (or made of glass) and the best part is, it’s not that difficult to achieve.
View the Demo

Interactive Image Vamp up with jQuery, CSS3 and PHP

Interactive Image Vamp up with jQuery, CSS3 and PHP

In this technique you will be shown how to create an online application for giving some funny touches to an image, using jQuery and jQuery UI for dragging and resizing little bling elements like mustaches and glasses. With PHP the image and the bling elements will get merged and the end result can be viewed.
View the Demo

Recreating the MLB.com Content Switcher

Recreating the MLB.com Content Switcher

The goal of this project is to try to recreate the Flash content switcher from MLB.com, using jQuery and CSS3 and without any extraneous images or other non-essential elements that tend to make stuff less maintainable.
View the Demo

Elegant Accordion with jQuery and CSS3

Elegant Accordion with jQuery and CSS3

Here you will create an elegant accordion for your sites content. The idea is to have some vertical accordion tabs that slide out when hovering. You will add some CSS3 properties to enhance the looks.
View the Demo

Pretty Simple Content Slider

Pretty Simple Content Slider

You will learn how to create an auto-playing content slider with jQuery and CSS3. The idea is to alter the background image and to slide in the heading and the description. By clicking on one of the menu items, the auto-play function is stopped and the respective content slides out.
View the Demo


People who read this post also read :



If you liked my post then,

Subscribe to this site via Email:

Click here to Subscribe to FREE email updates from "itrickz", so that you do not miss out anything that can be valuable to you and your blog!!

DropJack!
Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

0 comments: on "10 New CSS3 & jQuery Image Gallery and Slider Tutorials"

Post a Comment