Photo Gallery and Slideshow

20 Background Effects using jQuery with 19 Excellent Examples

One of the latest web design trends is creating effects on the webpage background and using the entire visible area of the screen for an entertaining display. Besides creating pleasing user experience, the background images in full-screen are sometimes a real practical need of the web designers as they have to manage the webpage layouts on high resolution graphical screens of the modern devices.

Using the full-sized background images is also pleasant for the users resizing the browser window as the image is not distorted, but scales accordingly. So, lets move across some of most useful jQuery plugins to enrich our web backgrounds.

bxSlider: jQuery Content Slider and Image Slideshow

bxSlider is a great plugin for those who need a content slider with image slideshow. bxSlider simplifies the task of displaying the descriptions, content or any info in three distinct styles: Slide, Fade, and Ticker. The method to implement the plugin is well illustrated on the official webpage. As the plugin is fully customizable, you can configure its speed and sliding direction to show the stuff in interesting ways as well as set for automatic run.

Features:

Shows and runs slides (carousel)
Multiple transitional effects: horizontal, vertical, & fade
Options like Prev/next, auto functionalities and pager
Starts up randomly
Ticker functioning
Smooth transitions
Multiple styles left to personal preferences
Controls to use before, after, first, last, next, previous callback commands
Plethora of other controls and features

Author: bxCreative
jQuery Version: 1.3 +
Official Page
Learn how to do it!

15 Cool jQuery Effects to Enhance User Experience

Companies wrestling for businesses on the web prefer having appealing websites with rich user interfaces and stunning visual effects. jQuery has simplified the task of presenting dynamic content along with the visual effects. With jQuery, you can rapidly create advance, feature-rich websites. Now, you can develop standardized, highly responsive web pages using Ajax, create user-friendly forms, and add jQuery to enhance usability and user experience of the visitors.

There was a time, when we were just able to categorize images in tables, which were displayed in a new window or pop up with the user’s click; it is over now. Today, with amazing effects created by jQuery, it is easy to showcase image galleries in many attractive styles. jQuery effects give excellent usability experience to the users. Browsing and viewing contents and image galleries have went through a long journey in their development area. Today, a slew of superb jQuery Plugins is available to create amazing effects, which you would really love to have on your site.

Today we’ll dig into them a little bit, and see what you can use right now to enhance user experience in your website.

Supersized

Supersized is a fullscreen background slideshow built using the jQuery library.

Currently there is only one theme, Shutter, which is the default in the download.

Features

Shutter was designed to be a base theme that could be a foundation for future themes, while including some added functionality.
Progress bar
Slide in/out thumbnail tray
Fluid thumbnail bar based on Thumb Reel
Option for mouse-responsive thumbnail scrub

Author: Build Internet
jQuery Version: 1.6 +
Official Page
Learn how to do it!

Slideshowify

Slideshowify is a jQuery plugin for generating a “*Ken Burns Effect”-style slideshow from images that match a selector. Images that don’t fit the window proportions exactly (generally the case) are cropped and panned across the screen.
Check out the DEMO: www.subchild.com/slideshowify

Author: Airtonix
jQuery Version: 1.4 +
Official Page
Learn how to do it!

Ajaxy Photo Gallery with custom image sets

A plugin that displays a gallery with defined images in sets. The sets are then used to display small thumbnails at the bottom of the gallery, with all the thumbnails of the images. At the top, they’re three tabs that represent each set. Each one when clicked, will display right underneath the tabs, the number of the images already loaded. It doesn’t take long to load! So look out!

Made up of three technologies, HTML, CSS, and jQuery, this plugin will be an easy understandable one. jQuery of course makes that possible! Whats nice about this one, is that the thumbnails are nicely tucked in and faded so that it doesn’t interfere with the view of the main image. Put your mouse over the thumbnails, and they rise up and are faded back to full opacity to be selected. Really nice!

Author: www.script-tutorials.com
jQuery Version: 1.4 +
Official Page
Learn how to do it!

Mosaic

The original sliding boxes tutorial is undoubtedly our most popular tutorial, with about 660,000 views as of this post. Given our recent surge in releasing plugins, we decided to add sliding boxes to the roster – say hello to the Mosaic jQuery plugin.

Features

So, what exactly does Mosaic do?

Automatically generates sliding boxes & captions
Allows slide & fade animations with custom directions
Preloads images within boxes

Author: Build Internet
jQuery Version: 1.5 +
Official Page
Learn how to do it!

JQUERY.MB.ZOOMIFY

EXPLORE LARGE IMAGES WITH THIS TOOL!

If you have large images and you want to let people explore them you can use this tool; it adds zoom-in zoom-out and pan functionality; it has configurable magnification level and it provides built-in image preloading.

What’s new in v. 1.3:

Major bug fix for IE8 and IE9:

The activity indicator did not work on IE8 and fired an error – fixed
Images were stretched – fixed
double click and drag event were not fired in IE8 – fixed

Author: Matteo Bicocchi
jQuery Version: 1.5 +
Official Page
Learn how to do it!

jQuery Multimedia Portfolio 2

New version of the non obstrusive and accessible portfolio supporting multiple media : photos, video (flv), audio (mp3).

This plugin for jQuery will automatically detect the extension of each media and apply the adapted player.

It has all the demonstration and implementation on the tutorial page.

Author: Arnault Pachot
jQuery Version: 1.4 +
Official Page
Learn how to do it!

“jQuery” Rich HTML Ticker

Rich HTML TIcker is a practical script for displaying ordinary, rich HTML content in a rotated fashion on your page. The ticker contents can either be defined inline on the page, or within an external file and fetched using Ajax. A listing of the script’s features:

Rotates regular HTML wrapped in DIV tags, either inline on the page, or within a single external file.
Ticker pauses onMouseover.
Session cookies used to persist the last message viewed, then recalled when the page is reloaded or returned to.

This script is powered by the versatile jQuery library.

Author: http://www.javascriptkit.com
jQuery Version: 1.2 +
Official Page
Learn how to do it!

Categories

Features

Features