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 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.
- 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
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.
Shutter was designed to be a base theme that could be a foundation for future themes, while including some added functionality.
Slide in/out thumbnail tray
Fluid thumbnail bar based on Thumb Reel
Option for mouse-responsive thumbnail scrub
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
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!
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.
So, what exactly does Mosaic do?
- Automatically generates sliding boxes & captions
- Allows slide & fade animations with custom directions
- Preloads images within boxes
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
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.
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.