Whatever images you want to present, you can present them in slide shows or in a thumbnails gallery. but how can we offer it in an attractive and intuitive way? And , can the presentation itself make images more valuable and simplify the browsing through hundreds of slides? We selected 50+ impressive plugins you can use for effective presentations of your images. They all are built with different javascript frameworks such as jQuery, Prototype and MooTool. you can use them easily.
jQuery
1. ThickBox 3.1
ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.
|
|
jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery´s selector. LightBox is a plugin for jQuery. It was inspired in Lightbox JS by Lokesh Dhakar. The better way to know what is jQuery lightBox plugin is to click the Example and see it in action.
|
|
Working for Obu Web i’ve found myself spending less time on code I would say meets the definition of AJAX I put in my book and more time on code that used to be called DHTML. But I guess I’m ok calling it AJAX, at least its pronounceable and building little JavaScript widgets is fun. Today’s widget is an Image Strip, it has a lot of real uses, but the way I like too use it is for fancy visual effects.
 |
4. slideViewer (a jQuery image slider built on a single unordered list) 1.1
What’s this? slideViewer is a lightweight (1.5Kb) jQuery plugin wich allows to instantly create an image gallery by writing just few lines of HTML such as an unordered list of images. slideViewer checks for the number of images within your list, and dynamically creates a set of links to command (slide) you pictures. Also, clicking on each image will make the gallery slide to the next picture. You can optionally customize the kind of animation and its duration and also enhance(*) the default tooltips with some fancy tooltips.
5. jQuery: jqGalScroll v2.1 (Photo Gallery)
jQuery Gallery Scroller (jqGalScroll) takes list of images and creates a smooth scrolling photo gallery scrolling vertically, horizontally, or diagonally. The plugin will also create pagination to allow you to flow through your photos.
First we need to start off with some images. You’ll want these images to be thumbnails that also have a larger view available. In this tutorial I’m using a thumbnail size of 50×50 and a full view of 600×400. You can have any size for the "full view" but the thumbnails must all be the same size. We’ll start with 4 thumbnails.
jThumb dynamically wraps images and/or link images with a div. You can add them an specific size (width and height) inside the css file. And optionally it can automatically center the image inside the frame. jThumb was developed using jQuery, obstrusive Javascript, and CSS by Joan Piedra.
jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. Put simply, you can navigate images and/or HTML in a carousel-style widget. It is super light weight, at about 2 KB in size, yet very flexible and customizable to fit most of our needs.
9. jQPanView based in jQuery 1.1
Inspired in Pan View plugin of Christian Bach. Creates a pan view, hold down your mouse button and start moving.
The time devoted to this work was offered by Intelliance, Web Agency at La Rochelle, Charente Maritime.
11. EOGallery
EOGallery is a web animated slideshow gallery maid with jQuery. It only uses basic jQuery functions and Cody Lindley’s Thickbox to display larger pictures. By the way, EOGallery is XHTML 1.0 strict valid and almost CSS valid, it has been tested on Firefox, Safari, Internet Explorer 6 and works even with non-javascript and/or non-css browsers. EOGallery has been maid for testing purposes, there could be bugs and strange behaviors. For more informations, read read FProd’s blog. Enjoy trying it.
The jQuery Cycle Plugin is a lightweight slideshow plugin. Its implementation is based on the InnerFade Plugin by Torsten Baldes, the Slideshow Plugin by Matt Oakes, and the jqShuffle Plugin by Benjamin Sterling. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects.
13. Lazy Load Images jQuery Plugin
It delays loading of images in (long) pages. Images below the fold (far down in the page) wont be loaded before user scrolls down. This is exact opposite of image preloading. With long pages containing heavy image content end user result is the same. Page feels snappier. Browser is in ready state after loading visible images. No need to wait for n pictures to load.
14. Lightview
Lightview was built to change the way you overlay content on a website. 
15. Galleriffic
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.
16. 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.
17. prettyPhoto a jQuery lightbox clone
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. It comes with useful APIs so prettyPhoto can be launched from nearly anywhere (yes, that includes Flash)!
18. loopedSlider
loopedSlider is a plugin made for jQuery that solves a simple problem, the looping of slide content. It was created to be easy to implement, smooth and most of all end the “content rewind” that most other content sliders suffer from.
19. DevKick Galleria
Galleria is a JavaScript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.
|
|
20. jFlow gallery
Tutorial and documentation, how to use jFlow plugin to create Your own gallery.
21. Spacegallery -jQuery plugin
Another image gallery for you.
22. Slider Gallery
This ‘product slider’ is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items. Simple stuff using jQuery plugins.
23. PrettyGallery
One more way how to display Your photos using jQuery.
|
|
Lightbox scripts have become a very popular way of displaying images online in recent months. There are a huge number of them available, using a variety of different frameworks and languages. DesignShack offers a new jQuery Lightbox script It has been designed and created by Diego Valobra.
FlickrGallery is a jQuery plugin for embedding flickr photos into a webpage. Plugin considers a Gallery to be a list of Albums (similar to Flickr’s Collections). Albums are considered to be photo sets.
JQuery Slideshow with three different features and displaying sides, fully customizable sizes, delay speed and with good documentation.
27. jQZoom Evolution
JQZoom is a JavaScript image magnifier built at the top of the popular jQuery JavaScript framework. jQzoom is a great and a really easy to use script to magnify what you want.
|
|
28. jQuery Multimedia Portfolio
This plugin for jQuery will automatically detect the extension of each media and apply the adapted player.
This is an extension to the simple panorama viewer that allows you to play a little bit more with jQuery by adding interactivity to transform some panoramic views into a virtual tour!
Easy Slider 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.
31. 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.
|
|
32. Create a Thumbnail Gallery with Slick Heading and Caption Effect with jQuery
It is an elegant way to put more content in your website, but only display it when the user wants to see it. It keeps your website clean, but in the same time does not compromise your website content.
|
|
33. Sliding Boxes and Captions with jQuery
All of these sliding box animations work on the same basic idea. There is a div tag .boxgrid in this css that essentially acts as a window where two other items of your choosing peek through.
|
|
Prototype
34. iPhoto-like image resizing using Javascript
Upon seeing the Fluxiom intro video, I was compelled to figure out how they pulled off iPhoto-like image scaling in a browser. Leveraging the work of others, it’s actually very simple. If you use the script.aculo.us slider control to capture input values, it’s really just a matter of converting those values into something useful and modifying styles.
|
|
35. AJAX Image Gallery powered by Slideflow (like Cover Flow)
You can drag the Slideflow using your mouse, or click anywhere in the stack to jump there. Click inside the frame in order to enable mouse wheel and arrow key navigation!
|
|
36. qGallery
qGallery is a simple to use prototype based gallery script. All image processing is done by the script so you don’t have to worry about the images you upload on the server. All images for the skimmer graphics and the fullsize view will be created on the fly and stored in a cache directory on the server to save processing power on the server.
37. protoFlow
ProtoFlow is a coverflow effect written in Javascript. It uses Prototype and Scriptaculous to do bulk of the work and it uses Reflection.js to do all the image reflections stuff!
38. VisualLightBox
VisualLightBox is a free tool that helps you easily generate online photo galleries, web photo galleries, based on famous LightBox2 script, in a few clicks without writing a single line of code. Just drag&drop your photos to VisualLightBox application window, press "Publish" and your own picture album web site with beautiful LightBox effects will open in the browser at once! No javascript, image editing, html coding, css, just a click to get your css web site album ready.
MooTool
39. SmoothGallery
Unlike other systems out there, JonDesign’s SmoothGallery is designed from the ground up to be standard compliant: You can feed it from any document, using custom css selectors. And even better, this solutions is very lightweight: The javascript file is only 24kb.
40. Imago – An Ajax Image Gallery
Imago is an Ajax Image Gallery with focus on simplicity and ease of use. It’s plain JavaScript and build on the mature ajax library mootools. No server side scripting is required! Neither is flash. Whether your photos are on flickr, smugmug or you’d like to host them yourself, Imago can show them.
(E)2 Photo Gallery is a open source gallery built with Mootools Javascript Library the compact, modular, Object-Oriented javascript framework. Designed to allow you to upload your photos to a desired folder, tell the (E)2 Photo Gallery what folder to look at and it will automatically load the images using PHP.
42. mooCicle
|
|
43. MooFlow
Image gallery uses MooTools. It can autosetup graps all images inside a element.
44. Slideshow 2!
Slideshow 2! is a javascript class for Mootools 1.2 to stream and animate the presentation of images on your website. This page features some examples of how Slideshow might be used to enhance the presentation of images on your website. Please view the source of this page for usage information.
|
|
45. ImageCaption – a MooTools Plugin for Auto-Captioning Images
ImageCaption is a MooTools 1.2+ plugin for easily adding figure captions to image elements on a web page. It is very customizable and painless to style.
46. noobSlide – Mootools Image Slideshow
noobSlide – A mootools based image gallery with 7 different styles. You’ll find download link at the bottom of the page.
 |
47. MooTools 1.2 image slider – SlideItMoo
SlideItMoo is a MooTools 1.2 JavaScript plugin for sliding images, browser friendly and nicely degradable. All CSS styling is external. The plugin can slide the images from your photo gallery either by clicking the back – forward buttons or by mouse wheel. It can be used to display any number of thumbnails in a photo gallery or as a banner rotator. To switch from one way to the other, you simply have to set the appropriate values when instantiating the class.
48. JSGallery
An image gallery with thumbnails, paging and some smooth effects. Please visit the example page for more information. If you use MooTools 1.2, please check out JSGallery2.
|
|
Slideshow using JavaScript MooTools with features like fade, Slide and Wipe transitions.
|
|
50. MooSlideBox
The mooSlideBox v3 is a small and slim Ajax based extension or replacement of the common “Lightbox” that can be found on nearly every page. This Lightbox clone works in IE 6/7, Opera and Firefox. It is based on the MooTools framework version 1.11.
谢谢共享。学习更好的资源给我们提供帮助。
thanks,share.
This is incredible! I’ve always seen the elegance of these Ajax concepts working on various Websites, and I’m glad you’ve compiled a list of resources so I can implement them into my own sites! Thank you. It’s amazing how, using various pre-written code, web developers with very little experience beyond CSS and HTML can implement these amazing features.
nice reference ^-^