Awesome enough Slide Shows developed using jQuery, Ajax, Prototype.js, Ext.js, Lightbox JS, Mootools, YUI

Jul 1, 2007

Awesome enough Slide Shows developed using jQuery, Ajax, Prototype.js, Ext.js, Lightbox JS, Mootools, YUI

Categories: Featured, Programming

Tags: Ajax, Ext.js, jQuery, Lightbox JS, Mootools, ProtoType, YUI

Written By: admin

Hi Folks out there, Hmm… I am back again with some useful stuff where you guys can enjoy, I came up with some awesome slide shows which the web world is using. These slides shows are developed using Ajax, Prototype.js, jQuery, Ext.js, Lightbox JS v2.0, mootools v1.0,YUI, etc., I grabbed only 10 screen shots and listed some of the valuable sites where you can find valuable and awesome slide shows, so guys what are you waiting for come and enjoy with these scripts.

1. JonDesign’s SmoothGallery
(Web Site: http://smoothgallery.jondesign.net/showcase/manual-slideshow/ )

What is it ?
Using mootools v1.0, this javascript gallery and slideshow system allows you to have simple and smooth (cross-fading…) image galleries, slideshows, showcases and other cool stuff on your website…

Some of you might have heard of JonDesign’s SmoothSlideshow. SmoothGallery is its evolution.

So, what is so cool about it ?
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 16kb.

2. huddletogether.com - Lightbox2
(WebSite: http://www.huddletogether.com/projects/lightbox2/ )

Overview

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

What’s New in Version 2
Image Sets: group related images and navigate through them with ease
Visual Effects: fancy pants transitions
Backwards Compatibility: yes!

3. ThickBox3
(WebSite: http://jquery.com/demo/thickbox/ )

ThickBox3 : 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 .

4. TripTracker slideshow
(WebSite: http://slideshow.triptracker.net/ )

The TripTracker slideshow is a lightweight JavaScript image viewer with an animated slideshow feature. To see the script in action , The viewer is free to use in personal or commercial web pages, provided that the script is not sold or exchanged for profit. An unbranded version of the slideshow, suitable also for resale, may be purchased for a one-time per-site license fee.

5. Couloir - JS slideshow:
(WebSite: http://www.couloir.org/js_slideshow/ )

This photo slideshow is a demonstration of Flash-like behavior implemented solely in Javascript, HTML, and CSS. The code is offered as-is â€” Couloir.org offers no technical support. However, you are permitted to use it on your own project so long as you do so according to the rules outlined in the Creative Commons ‘Attribution-ShareAlike 2.0′ License and the license terms contained in the associated, third-party APIs.

6. interface.evecon.ro
(WebSite:http://interface.eyecon.ro/demos/slideshow.html )

SlideShow

Creates an image slideshow. The slideshow can autoplay slides, each image can have caption, navigation links: next, prev, each slide. A page may have more then one slideshow, eachone working independently. Each slide can be bookmarked. The source images can be defined by JavaScript in slideshow options or by HTML placing images inside container.

7. Madb - SlideShow
(WebSite: http://www.madb.net/slideshow/ )

A flexible slideshow

This slideshow is based on YUI, Yahoo’s javascript library. I wanted to add a slideshow to the presentation site of MyOwnDB and hoped to find a simple widget that let me load slides on demand, and accepts HTML slides. As I didn’t immediately find what I wanted, I started to experiment. I learnt a lot, and the result is a slideshow that lets you

choose transition effect
easily develop new transition effects
define the slides in the page or choose to load on demand

8. flickrshow
(WebSite:http://www.flickrshow.com/ )

flickrshow provides you with the simplest way of displaying your Flickr photosets on your own website. It is simple to install, completely free and doesn’t require Flash or any server side programming knowledge. Generate your own code and install your own flickrshow now!

We developed flickrshow because it was a tool we needed. The focus is on simplicity and ease of use, so many features in more bloated software are not included. The following is a run down of all the things we did think were important.

Unobtrusive and compatible: we built flickrshow on top of Prototype so it will work with all modern browsers and won’t interfere with any other Javascript on your page.
Themeable to match your site: I like blue, you like green, he likes pink. You can alter the colour of flickrshow to match your site.

Can be used multiple times: it caused a number of headaches, but you can run as many slideshows on your site as you want, as long as your viewers can handle the loading times.

9. AJAX Feed API Slide Show Control
(WebSite:http://googleajaxsearchapi.blogspot.com/2007/05/ajax-feed-api-slide-show-control.html )

This afternoon we extended the AJAX Feed API with a new Slide Show Control . This control allows you to easily embed a slide show of images from PhotoBucket , Flickr , Picasa Web Albums , or any feed that uses the Media RSS extensions.

10. schillmania - SlideShow
(WebSite: http://www.schillmania.com/projects/35mm/demo/ )

There might be only one way to look at photos, but there are an infinite number of ways to organize and present them.

This DHTML-driven browser-based app provides viewing of photos sorted by collection. A few different CSS-driven "skins" are also available to choose from. Thumbnails are dynamically displayed allowing for quick visual searches within a collection, and XML/XSLT functionality provides for more dynamic data sources and ease of updates.

Sound effects are also added for fun where supported, and are fairly simple to modify.

This viewer is best suited for smaller collections of photos, although it could easily enough be split across multiple pages or sections on a web server; the idea is that all photos are accessible from one actual HTML page, but this could be split to lower the page weight and load time.

Development and testing has been done under IE 5.0, 5.5 and 6.0, Netscape 7, Mozilla Firefox and Safari.

As a general notice, this project is in flux and functionality may change as bugs are found and fixed and features are added.

Hmm….. Guys!!! As I have said, I have displayed only 10 - and the remaining which I have noted and listed are depicted below:

all out there!, Enjoy…..

Rockup the Web World!!!!

guddu Says:
July 1st, 2007 at 1:54 pm

A good compilation of slideshows I must say. I wonder why it does not have many diggs yet. Anyways appreciation for your time and efforts in making this list. Hope to see something like that for css designs, ajax stuff and like.

admin Says:
July 1st, 2007 at 3:02 pm

Hi Guddu, Thanks for your feedback. I am striving hard to give up something useful info to the developers.

psymeg Says:
July 3rd, 2007 at 7:56 am

thanks for the hard work in putting that together! i think i like the first one best. i wonder if it is possible to add comments to one of these slideshows, a little database action:)

WebGyver Says:
July 3rd, 2007 at 4:51 pm

WOW! Awesome stuff, I must say. Thanks for sharing with the rest of us.

In my usual “not enough time for details” mode, I came to your BLOg because of the mention of ext.js â€” but I was unable to find anything that was done, specifically using the ext.js library.

Did I miss something? Am I losing it?

If you know of any strictly ext.js demos or tutorials, I’d appreciate a link (or at least a hint).

Thanks again,

WebGyver
============================================
Making web stuff out of bubble gum, ball
point pens and ordinary household cleaners.

Tools and Resources for Successful Web Design,
Web Development, Web Applications
and Web Business Marketing

admin Says:
July 3rd, 2007 at 5:27 pm

Hi WebGyver,

Here is the link http://extjs.com/, you can go through this website once. Here you can find all the required stuffs.

Thanks,
Admin

Sean O Says:
July 3rd, 2007 at 8:22 pm

While not technically a slide show, SlideViewer 1.0 — which uses jQuery — is a beautiful way to showcase your images using easing transitions (and tooltips if you like).

http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html

admin Says:
July 4th, 2007 at 10:22 am

Hi Sean,

Thanks for sharing this with us, its awesome enough.

Mat_ Says:
July 5th, 2007 at 5:35 am

Hi Sean

Thanks for adding my gallery to your list ( http://marseille.afev.org/Galerie )
This is an example and she can be downloaded here: http://allviewer.mat-b.info/

By the way, i would like to add more features but i don’t know what … If someone has an idea, tell me !

Thx again for the quote !

Mat_

forgethis Says:
July 12th, 2007 at 9:54 pm

Great effort. Thanks for sharing your research.

links for 2007-07-18 « Mandarine Says:
July 17th, 2007 at 9:33 pm

[...] Awesome enough Slide Shows developed using jQuery, Ajax, Prototype.js, Ext.js, Lightbox JS, Mootools… These slides shows are developed using Ajax, Prototype.js, jQuery, Ext.js, Lightbox, mootools ,YUI, etc. I grabbed only 10 screenshots and listed some of the valuable sites where you can find awesome slide shows. (tags: ajax gallery photo inspiration webdesign webdev) [...]

Revue de presse | Simple Entrepreneur Says:
July 21st, 2007 at 6:03 am

[...] Awesome enough slide shows developed using jquery, ajax, mootools, … Une liste de scripts Javascript pour prÃ©senter de maniÃ¨re dynamique et interactive des images ou des photos sur un site Internet. [...]

Wordpress Customize Says:
July 27th, 2007 at 11:08 pm

Wordpress Customize…

I don’t agree with you in 100%, but you covered some good points regarding this topic…