GalleryView aims to provide jQuery users with a flexible, attractive content gallery that is both easy to implement and a snap to customize.
The SlidingGallery plug-in will take a group of images and turn them into a cyclical gallery of images which the user can click through. One image will be centered on the screen, with two smaller images off to the sides. The user can click either of the smaller images to bring them to the center, or the center image to enlarge it. For optimal use, this plug-in should be applied to seven or more images, but can work with fewer (images will be duplicated in order to bring the total to seven).
PrettyPhoto is a jQuery based lightbox clone. Not only does it support images, it also add support for videos, flash, YouTube, iFrames. It’s a full blown media lightbox. The setup is easy and quick, plus the script is compatible in every major browser.
This tutorial explains how to develop Create Beautiful jQuery sliders tutorial with image description and name.
A highly customizable gallery/showcase plugin for jQuery.
FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.
Galleriffic is a jQuery plugin that provides a rich, post-back free experience optimized to handle high volumes of photos while conserving bandwidth. I am not so great at spelling, and it was much later that I realized that the more appropriate spellings would be Gallerific or Gallerrific, but is too late now for a name change, so Galleriffic remains.
A light-weight, customizable lightbox plugin for jQuery 1.3.
Comparison of various scripts that display images and other objects in somehow cool CSS popups
It’s a full screen image gallery that automatically scales the image with kept aspect ratio to fill the browser background. It also supports a flickr search engine, thumbnails, captions, preloader and some other goodies.
13. Moving Boxes
SlideViewerPro is a fully customizable jQuery image gallery engine wich allows to create outstanding sliding image galleries for your projects and/or interactive galleries within blog posts.
17. Pirobox V.1.2.1
The s3Slider jQuery plugin is made by example of jd`s smooth slide show script.
An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery. Although there are many great plugins already, this tutorial will help you understand how the image rotator works and helps you create your own from scratch.
Present you images in stylish way. The links are unobtrusively highjacked to open the images in an inpage popup with drop shadow and border.
No slicing or editing of the images is needed
It’s just 5K
Reusable on multiple containers
Pikachoose is a lightweight Jquery plugin that allows easy presentation of photos with options for slideshows, navigation buttons, and auto play. Pikachoose is designed to be easily installed, easy to setup, and well… all around easy. Creating an image gallery shouldn’t be a complex thing. I’ve created a new plugin that I’m packaging with PikaChoose called SliderJS.
The image overlay plugin is a simple jQuery plugin that attempts to present an image with an overlaid title/caption. The overlay drops in on hover, as you can see above.
imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality, as well as other user interface features, such as photo notes (like those on Flickr).
- Highly configurable
- Customizable with CSS styling
- Handles scaled images
- Keyboard support for moving and resizing the selection
- Supports callback functions
- Provides API functions for easier integration with other application components
- Lightweight — the packed version is less than 8KB
This is a preloader, it scans DOM and loaded StyleSheet’s for occurence of images (in sheet, style, as element).
StyleSheet file has to be in the same domain as page using it.
The jQuery Cycle Plugin is a lightweight slideshow plugin. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects. It also supports, but does not require, the Metadata Plugin and the Easing Plugin.
33. Galleria Plugin
This demonstration shows you aome more advanced effects you can accomplish with the Galleria plugin. The history object is also active, so feel free to try the back button in your browser and bookmark a page. The next and previous links are simple to create since the galleria object has two public functions for traversing the images in your list.
Link : Galleriffic jQuery Plugin »
Description : This sleek plugin is great, its simple to use and implement, fast, looks amazing and feature rich.
– Smart image preloading once the page is loaded.
– Thumbnail navigation (with pagination).
– Support for bookmark-friendly URLs per-image.
– Slideshow gsallery (with optional auto-updating url bookmarks).
– Events that allow for adding your own custom transition effects.
– Support for image captions.
– Flexible configuration.
– Support for multiple galleries per page.
Demo : Galleriffic Demo »
Link : Galleriffic jQuery Plugin »
Description : Supersized is the first fullscreen image gallery/slideshow that I have seen that really looks amazing, its transition effects are hypnotic and its controls are simple. The most amazing thing about Supersized is that it gives the impression of being a desktop application. Amazing plugin.
– 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.
– Almost endless options.
Demo : Supersized Demo »
Link : Building a jQuery Image Scroller »
Description : In this tutorial, you’re going to be building an image scroller, making use of jQuery’s excellent animation features and generally having some fun with code. This scroller will be different from the others in that it will be completely autonomous and will begin scrolling once the page loads.
Demo : jQuery Image Scroller »
Link : Galleriffic jQuery Plugin »
Description : All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through. Nice effect.
Demo : Sliding Boxes and Captions Demo »
Link : Resizable Image Grid »
Description : Image grids that smoothly scale at the simple drag of a slider are no longer confined to desktop apps like iPhoto or Picasa. Thanks to some clever CSS and the jQuery UI, fluid image grids are now surprisingly simple to implement on the web.
Demo : Resizable Image Grid Demo »
Link : Sliding Image/Reveal Content »
Description : This tut does exactly what it says in the title, hover over the image and the text content will be revealed. Great first tutorial from Suciu Vlad.
Demo : Sliding Image/Reveal Content Demo »
Link : Creating an Image Slider »
Description : In this tutorial you will learn how to create an image slider that when a holder is hovered over, the top image slides down to reveal the image underneath. You will also learn how to use position absolute to float an image in the top right to show the image is new.
Demo : Creating an Image Slider Demo »
Link : Galleria jQuery Plugin »
– Lightweight (4k packed).
– Displays the thumbnail when the actual image is loaded.
– CSS powered – create your own gallery style.
– Super fast image browsing since the images are preloaded one at a time in the background.
– Can scale thumbnails and crop to fit in thumbnail container.
– Can be used with custom thumbnails.
– Stylable caption from image or anchor title.
– jQuery plugin – takes one line to implement.
– Can adjust the history object and enable the back button in your browser.
– Can fire events so you can customize the images behaviour onLoad.
Demo : Galleria Demo »
Link : jQuery Slider Tutorial »
Description : This tutorial shows you how to develop a beautiful jQuery slider with added image description and name. The final result is a very smooth and visually pleasing slideshow which could be easily integrated into any site.
Demo : jQuery Slider Tutorial Demo »
Link : GalleryView jQuery Plugin »
Description : GalleryView is a content-gallery plugin capable of displaying any HTML content in an animated gallery view. This plugin is bounding with options and you would be hard pressed to not use this plugin. GalleryView does require the jQuery Timers plugin to facilitate timing of animation events.
Demo : GalleryView jQuery Plugin Demo »
Link : Simple JQuery Image Slide Show »
Description : In this tutorial you will be shown how to create a simple image slide show with a semi-transparent caption using jQuery. The final result will be suitable to display news headlines, or an image slide show on your websites homepage.
Demo : Simple JQuery Image Slide Show Demo »
Link : jQuery Morphing Gallery Tutorial »
Description : In this tut you will learn how to create a simple image gallery that when an image is selected, it will “morph” into its relevant size.
Demo : jQuery Morphing Gallery Demo »
Link : Zoomimage – jQuery plugin »
Description : Present your images in a stylish way, with this plugin. The links are unobtrusively highjacked to open the images in an inpage popup with drop shadow and border. Nice and simple.
Demo : Zoomimage – jQuery plugin Demo »
Link : Image Gallery Using jQuery and Flickr »
Description : This is a full screen image gallery that automatically scales the image with kept aspect ratio to fill the browser background. It uses the flickr search engine with thumbnail preview, captions, preloader and some other excellent goodies. It scales the image using CSS only (some JS for IE6) and developed with jQuery.
– 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..
Link : Easy Slider 1.5 »
Description : The Easy Slider plugin enables images or any content to slide horizontally or vertically on click. It is configurable with css alone. So, basically you link to plugin file, set the content up and style it with css.
Demo : Easy Slider 1.5 Demo »