So, you wanna change the registration point of a MovieClip at runtime? Here is some piece of code that allows you to do just that.



Based on an old AS2 class written by Darron Schall, this AS3 class extends MovieClip and adds a new set of properties (x2, y2, rotation2, scaleX2, scaleY2, mouseX2, mouseY2) that allow you to manipulate the sprite based on a contextual registration point that can be set using the setRegistration method.



Here is how it works







// Create a new instance

var square:DynamicMovieClip = new DynamicMovieClip();

addChild(square);



// Change registration coordinates at runtime

square.setRegistration(20, 20);



// From this point on, instead of using 'rotation'

// we use 'rotation2'

// Same principle applies for 'x', 'y', 'scaleX' and 'scaleY'

square.rotation2 = 45;



Here's a simple application.



http://www.oscartrelles.com/examples/DynamicMovie.zip

Sources

DarkBaron

Add a new class to your project and paste this code:

String Format for DateTime [C#]

This example shows how to format DateTime using String.Format method. All formatting can be done also using DateTime.ToString method.

Custom DateTime Formatting

There are following custom format specifiers y (year), M (month), d (day), h (hour 12), H (hour 24), m (minute), s (second), f (second fraction), F (second fraction, trailing zeroes are trimmed),t (P.M or A.M) and z (time zone).

Following examples demonstrate how are the format specifiers rewritten to the output.

[C#]

// create date time 2008-03-09 16:05:07.123
DateTime dt = new DateTime(2008, 3, 9, 16, 5, 7, 123);

String.Format("{0:y yy yyy yyyy}", dt);  // "8 08 008 2008"   year
String.Format("{0:M MM MMM MMMM}", dt);  // "3 03 Mar March"  month
String.Format("{0:d dd ddd dddd}", dt);  // "9 09 Sun Sunday" day
String.Format("{0:h hh H HH}",     dt);  // "4 04 16 16"      hour 12/24
String.Format("{0:m mm}",          dt);  // "5 05"            minute
String.Format("{0:s ss}",          dt);  // "7 07"            second
String.Format("{0:f ff fff ffff}", dt);  // "1 12 123 1230"   sec.fraction
String.Format("{0:F FF FFF FFFF}", dt);  // "1 12 123 123"    without zeroes
String.Format("{0:t tt}",          dt);  // "P PM"            A.M. or P.M.
String.Format("{0:z zz zzz}",      dt);  // "-6 -06 -06:00"   time zone

You can use also date separator / (slash) and time sepatator : (colon). These characters will be rewritten to characters defined in the current DateTimeForma tInfo.DateSepa rator andDateTimeForma tInfo.TimeSepa rator.

[C#]

// date separator in german culture is "." (so "/" changes to ".")
String.Format("{0:d/M/yyyy HH:mm:ss}", dt); // "9/3/2008 16:05:07" - english (en-US)
String.Format("{0:d/M/yyyy HH:mm:ss}", dt); // "9.3.2008 16:05:07" - german (de-DE)

Here are some examples of custom date and time formatting:

[C#]

// month/day numbers without/with leading zeroes
String.Format("{0:M/d/yyyy}", dt);            // "3/9/2008"
String.Format("{0:MM/dd/yyyy}", dt);          // "03/09/2008"

// day/month names
String.Format("{0:ddd, MMM d, yyyy}", dt);    // "Sun, Mar 9, 2008"
String.Format("{0:dddd, MMMM d, yyyy}", dt);  // "Sunday, March 9, 2008"

// two/four digit year
String.Format("{0:MM/dd/yy}", dt);            // "03/09/08"
String.Format("{0:MM/dd/yyyy}", dt);          // "03/09/2008"

Standard DateTime Formatting

In DateTimeForma tInfo there are defined standard patterns for the current culture. For example property ShortTimePattern is string that contains value h:mm tt for en-US culture and value HH:mm for de-DE culture.

Following table shows patterns defined in DateTimeForma tInfo and their values for en-US culture. First column contains format specifiers for the String.Format method.

Specifier	DateTimeFormatInfo property	Pattern value (for en-US culture)
t	ShortTimePattern	h:mm tt
d	ShortDatePattern	M/d/yyyy
T	LongTimePattern	h:mm:ss tt
D	LongDatePattern	dddd, MMMM dd, yyyy
f	(combination of D and t)	dddd, MMMM dd, yyyy h:mm tt
F	FullDateTimePattern	dddd, MMMM dd, yyyy h:mm:ss tt
g	(combination of d and t)	M/d/yyyy h:mm tt
G	(combination of d and T)	M/d/yyyy h:mm:ss tt
m, M	MonthDayPattern	MMMM dd
y, Y	YearMonthPattern	MMMM, yyyy
r, R	RFC1123Pattern	ddd, dd MMM yyyy HH':'mm':'ss 'GMT' (*)
s	SortableDateTi mePattern	yyyy'-'MM'-'dd'T'HH':'mm':'ss (*)
u	UniversalSorta bleDateTimePat tern	yyyy'-'MM'-'dd HH':'mm':'ss'Z' (*)
		(*) = culture independent

Following examples show usage of standard format specifiers in String.Format method and the resulting output.

[C#]

String.Format("{0:t}", dt);  // "4:05 PM"                         ShortTime
String.Format("{0:d}", dt);  // "3/9/2008"                        ShortDate
String.Format("{0:T}", dt);  // "4:05:07 PM"                      LongTime
String.Format("{0:D}", dt);  // "Sunday, March 09, 2008"          LongDate
String.Format("{0:f}", dt);  // "Sunday, March 09, 2008 4:05 PM"  LongDate+ShortTime
String.Format("{0:F}", dt);  // "Sunday, March 09, 2008 4:05:07 PM" FullDateTime
String.Format("{0:g}", dt);  // "3/9/2008 4:05 PM"                ShortDate+ShortTime
String.Format("{0:G}", dt);  // "3/9/2008 4:05:07 PM"             ShortDate+LongTime
String.Format("{0:m}", dt);  // "March 09"                        MonthDay
String.Format("{0:y}", dt);  // "March, 2008"                     YearMonth
String.Format("{0:r}", dt);  // "Sun, 09 Mar 2008 16:05:07 GMT"   RFC1123
String.Format("{0:s}", dt);  // "2008-03-09T16:05:07"             SortableDateTime
String.Format("{0:u}", dt);  // "2008-03-09 16:05:07Z"            UniversalSor

Tips, Hints, Navigation

TipTip jQuery Plugin

TipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result the tooltip will adjust itself to be displayed above, below, to the left or to the right of the element with TipTip applied to it, depending on what is necessary to stay within the browser window. TipTip is a very lightweight and intelligent custom tooltip jQuery plugin. It uses ZERO images and is completely customizable via CSS.

Contextual Slideout Tips With jQuery & CSS3

A set of contextual slideout tips with jQuery & CSS3, which are ideal for product pages and online tours.

jQuery Slider plugin (Safari style)

jQuery Slider is easy to use and multifunctional jQuery plugin.

jSquares

jSquares is a jQuery plugin that pops up an image and a description in an overlay on hover. It is basically identical to the image grid found on www.ted.com. Works like a charm in IE6+, FF 3+, Safari 3+ and Opera 10.

Nav-o-Matic

Single sprite navigation is great, but we all know it can get a little bit tedious. All that measuring of pixel perfect photoshop slices, careful coding of your CSS and subsequent calculator bashing is enough to drive anyone to start microwaving fluffy kittens. Wouldn’t it be great to have a fancy online tool to take care of all the boring stuff for you in a few simple clicks? Well wish no more…

Jquery Two Sided Multi Selector

This Plugin converts a multi select list into a two-sided multi-select list. This means you display a list of options in the left hand box and items you select are moved into the right hand box.

jQuery MegaMenu Plugin

jQuery Keyboard Navigation Plugin

The jQuery Keyboard Navigation Plugin provides the capability for elements on a page to be navigated and activated via the keyboard’s up, down, right and left arrow keys.

FullCalendar – Full-sized Calendar jQuery Plugin

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event).

Forms

iPhone Style Radio and Checkbox Switches using JQuery and CSS

A simple technique for creating radio button and checkbox switches with jQuery.

jQuery UI Selectmenu: An ARIA-Accessible Plugin for Styling a Custom HTML Select Element

Our latest contribution to labs is the selectmenu plugin, which is designed to duplicate and extend the functionality of a native HTML select element, and lets you customize the look and feel, add icons, and create hierarchy within the options. Best of all, it’s built with progressive enhancement and accessibility in mind, has all the native mouse and keyboard controls, and is ThemeRoller-ready.

A Better jQuery In-Field Label Plugin

This is a pretty nice effect, and it can really help to save space on forms. There are a billion different ways to implement this, and I don’t suggest you use the example from above because that was just a quick way to show the effect. So let’s walk through a couple of different implementation approaches and figure out the best way to implement this feature.

Sliding Labels

Tim Wright came up with a jQuery technique that presents labels in input fields by default but then slides them to the left (or up) rather than removing them on click. If JavaScript is turned off, the labels are displayed above the input fields. The small jQuery snippet works in all major browsers and can be used for input and textarea elements.

Login or Signup with jQuery

Some users doesn’t like to filling the registration form. So that I had implemented login and singup fields in same block just controlling with jquery and PHP. It’s is very simple javascript and basic PHP code.

Uniform – Sexy forms with jQuery

Have you ever wished you could style checkboxes, drop down menus, radio buttons, and file upload inputs? Ever wished you could control the look and feel of your form elements between all browsers? If so, Uniform is your new best friend. Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.

Slideshows and Galleries

jQuery Quicksand plugin

Reorder and filter items with a nice shuffling animation.

Nivo Slider: Slideshow jQuery Script

Nivo Slider is a simple and powerful jQuery image slider plug-in that fits the bill. The tool has nine unique transition effects built in, as well as plenty of options to fiddle with: for instance, you can define functions to be applied before and after the image has changed, set the animation speed and activate pause on hover.

#grid

#grid is a little tool that inserts a grid onto the Web page. You can hold the grid in place and toggle it between the foreground and background. To display the grid, just press a hot key on your keyboard, and you can set your own short keys to switch views. #grid comes set up with a 980 pixel-wide container, with 20-pixel gutters, and assumes one lead of 20 pixels. You can download the source code (JavaScript and CSS) and use classes for multiple grids.

Improving The Content

Dynamic Footnotes With CSS and jQuery

Lukas Mathis has come up with an elegant solution to improve user experience with footnotes: his jQuery script shows the content of footnotes as soon as the user indicates that they are interested in it – i.e. when they move the cursor over the footnote symbol.

jQuery Captify Plugin v1.1.3

Captify is a plugin for jQuery written by Brian Reavis to display simple, pretty image captions that appear on rollover. It has been tested on Firefox, Chrome, Safari, and the wretched Internet Explorer. Captify was inspired by ImageCaptions, another jQuery plugin for displaying captions like these. The goal of Captify is to be easy to use, small/simple, and completely ready for use in production environments (unlike ImageCaptions at the moment).

Copy to Clipboard with ZeroClipboard, Flash 10 and jQuery

With today’s post I will show you a contrived example to get you started. I eventually hope to add this to the contextMenu.js jQuery plugin that I use, but for now this should be pretty straight forward. I do want to note that in the demo and download I am loading the latest version of the jQuery library (1.3.1) from Google’s CDN for the first time in any of my posts. For more information on how to do this see the instructions from Google.

Layouts

Columnizer jQuery Plugin

This jQuery plugin will help you create a multi-column layout without complex CSS hacks. Works across all major browsers.

jQuery Grid Plugin

Charts and Graphs

Dygraphs: Create interactive graphs from open source Javascript library

Dygraphs is an open source JavaScript library that produces an interactive, zoom-able charts of the present time series. It is mainly designed to display the dense data sets and enable the users to explore and interpret them. It is a JavaScript Visualization Library.

gMap – Google Maps Plugin For jQuery

gMap is a lightweight jQuery plugin that helps you embed Google Maps into your website. With only 2 KB in size it is very flexible and highly customizable.

10 jQuery Plugins for Easier Google Map Installation

The plugins below offer not only an easier method to install a map, they also offer the option to add extra functionality, should you choose to need them. They also all come with a varied degree of docs, some are extensive and some non-existent, so choose your plugin wisely.

Images and Visual Effects

jQuery imageless buttons a la Google

This jQuery plugin is an attempt to recreate Google’s imageless buttons and prove that it doesn’t take a whole team of engineers and an endless cycle of code revision and quality control (their own words) to pull this off. I don’t know how Google did it, but my buttons automatically adapt to paddings and other styling you wish to use. They allow for a lot of stylistic customisatoin via a few lines of css while keeping all the display critical css rules hidden deep inside the plugin.

jQuery Presentation Plugin

jQuery Presentation Plugin: Say NO to Keynote!

jQuery pageSlide

This plugin allows any developer to recreate a similar interaction on their own website using a few simple lines of Javascript. By attaching the method to an anchor tag, pageSlide wraps the original body content into a wrapper and creates an additional block for the secondary content load. The slide is animated whenever the click event is invoked.

jqFancyTransitions: jQuery Image Rotator Plugin

jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.

A demo of AD Gallery

A highly customizable gallery/showcase plugin for jQuery.

Pines Notify jQuery Plugin

Pines Notify’s features include: timed hiding with visual effects, sticky (no automatic hiding) notices, optional hide button, supports dynamically updating text, title, icon, type, stacks allow notice sets to stack independently, control stack direction and push to top or bottom.

Animate Panning Slideshow with jQuery

In today’s tutorial we’ll take the makings of a classic slideshow, but use a different kind of transition to animate between slides. It may not fit every project, but diversity is always welcome in the world of web design.

Sponsor Flip Wall With jQuery & CSS

Designing and coding a sponsors page is part of the developer’s life (at least the lucky developer’s life, if it is about a personal site of theirs). It, however, follows different rules than those for the other pages of the site. You have to find a way to fit a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other elements of your design.

Last Click

CofeeScript

CoffeeScript is a little programming language that compiles JavaScript while simplifying the code that developers actually have to deal with. It works with current JavaScript libraries and compiles clean code, leaving even comments intact. Once developers familiarize themselves with how CoffeeScript works, they could potentially save themselves a lot of time and headaches with the simplified code.

Brosho ‘Design in the Browser’ jQuery Plugin

With this Plugin you can style your markup right in your browser with a build-in element selector and CSS editor. Generate the CSS code of altered elements with one click and use it in your own stylesheet.

gameQuery – a javascript game engine with jQuery

gameQuery is a jQuery plug-in to help make javascript game development easier by adding some simple game-related classes. It’s still in an early stage of development and may change a lot in future versions. The project has a Google Code page where the SVN repository of the project is hosted and a twitter page where you can follow the daily progress of the development.

Mind-blowing JavaScript Experiments

The following JavaScript experiments demonstrates the amazing capabilities of the modern browsers such as Chrome and Safari. In this post I will showcase to you an array of experiments that will surely blows your mind off.

Is adding round-ups to our regular content a good idea?

Mind-blowing JavaScript Experiments

The following JavaScript experiments demonstrates the amazing capabilities of the modern browsers such as Chrome and Safari. In this post I will showcase to you an array of experiments that will surely blows your mind off.

Most of the following runs best in Chrome or Safari.

1. Twitch

TWITCH is a series of minimal games within small Chrome windows. How fast can you solve them all? Each game only responds to clicking; mouse position and keyboard are ignored.

Can you stay on the perilous belt? Can you accurately aim the booming cannon? Can you navigate through the electric pyramids? Can you solve the eerie labyrinth?

See it in action and enjoy

2. Browser Ball

Browser Ball attempts, with only moderate success, to allow the configuration of a seemingly endless array of continuous spaces using multiple overlapping browser windows. Within this multivariate space, users are invited to toss a beach ball both hither and yon.

Toss it!

3. Ball Pool

Start by shaking the browser, then create new balls (click on empty space), move some others (drag) and reset the screen (double click).

See it in action

4. Google Gravity

“Everything that goes up must come down. But there comes a time when not everything that’s down can come up.”

This applies in the Google main page. Play with the elements and try to search on anything. It’s fun.

See it in action

5. Depth of Field

300 balls form a plane, a cube, a little universe, a sphere and then disappear. Amazing!

See it in action

6. Wavy Scrollbars

Touch scrollbar thumb to make waves. Based on verletphysics library by toxi.

See it in action

7. Sketchpad

Sketchpad is a drawing/painting application developed in pure HTML and Javascript. It includes a number of Drawing Tools — including: Text, Shape, Spirograph, Brush, Calligraphy, Pencil, Paint-Bucket, and Stamp. It also includes a few generic Drawing Utilities — including: Marquee, Crop, Eraser, and a HSL/RGBA Color-Picker.

Try it yourself

8. JS Wars

JS WARS is a classic shoot em up written to demonstrate the power of modern web browsers.

Shoot them all!

9. Vectomatic

Vectomatic is a vector graphics editor: you create drawings by freely combining shapes, curves and segments and modifying their geometric and visual properties. At this stage the project is just a demo to explore the feasibility of a full-featured online graphics editor a la Google Docs.

See Application in action

10. JS Fireworks

Write a message, then launch fireworks over London to show your message in the sky. A shortened link to your fireworks message is provided, to post to Twitter, Facebook or other.

private function strToUTF16( str:String ):ByteArray

{

var utf16:ByteArray = new ByteArray();

var iChar:uint;

var i:uint=0, iLen:uint = str.length;



/* BOM first */

utf16.writeByte( 0xFF );

utf16.writeByte( 0xFE );



while ( i < iLen )
{
iChar = str.charCodeAt(i);
trace( iChar );

if ( iChar < 0xFF )
{
/* one byte char */
utf16.writeByte( iChar );
utf16.writeByte( 0 );
}
else
{
/* two byte char */
utf16.writeByte( iChar & 0x00FF );
utf16.writeByte( iChar >> 8 );

}



i++;

}



return utf16;

}

Ajax Image Galleries & Lightboxes

• Minishowcase
  
  Minishowcase is a small and simple php/javascript online photo gallery, powered by AJAX/JSON that lets you put easily your images in an online gallery, without having to configure databases or changing and customising code (though you may do it if you feel so) allowing to have an up-and-running gallery in a few minutes.
  
  


• JonDesign’s 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 16kb.
  
  


• Ajax Photo Gallery
  
  
  
  The AJAX version of AgileGallery is a free AJAX photo gallery that rips through the XML output from Picasa (a free download from google) and generates DHTML for the paging and thumbnails and displays the full sized photos along with any description entered in Picasa. Since this photo gallery uses AJAX technology, it eliminates the need for any page refresh as the user pages through the photos.
  
  


• Pyxy-gallery
  
  Pyxy-gallery is an AJAX image gallery in PHP and JavaScript, which optionally uses lightbox.js. It is designed to be an ultra-light-weight, “drop-in” image gallery.
  
  


• zenphoto
  
  Zenphoto is an answer to lots of calls for an online gallery solution that just makes sense. After years of bloated software that does everything and your dishes, zenphoto just shows your photos, simply. It’s got all the functionality and “features” you need, and nothing you don’t. Where the old guys put in a bunch of modules and junk, we put a lot of thought. We hope you agree with our philosopy: simpler is better.
  
  


• Couloir.org: Resizing, Fading Slideshow Demo – AJAX 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.


• Grey Box
  
  A pop-up window that doesn’t suck. GreyBox can be used to display websites, images and other content in a beautiful way.


• Lightbox2
  
  Lightbox JS 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.


• Litebox
  
  Litebox is a modified version of Lightbox v2.0 created with one thing in mind, size reduction. Litebox utilizes the 3kb javascript library moo.fx in association with prototype.lite, giving us the basic tools we need to make this work and you the ability to expand.
  
  


• Multifaceted Lightbox
  
  A script (JavaScript) that allows you to focus the users attention on a particular portion of the screen. It creates the equivalent of a modal dialog box – this means that while the user looks at this focused part of the screen, they can’t interact with the rest of the screen.
  
  


• Slightly ThickerBox 1.7
  
  Slightly ThickerBox is a modification of Cody Lindley’s Thickbox script. I modified it for use on my Jason’s Toolbox Redesign. The modifications allow the script to generate “Previous Image” and “Next Image” links. The result is that you can use Slightly ThickerBox to create image galleries. In addition, you can create groups of galleries by setting a “rel” attribute on the links. (I also moved the Caption and Close link to the top and made the script case insensitive.)


• TripTracker
  
  The TripTracker slideshow is a lightweight JavaScript image viewer with an animated slideshow feature.
  
  


• Slimbox, the ultimate lightweight Lightbox clone
  
  Slimbox is a 7kb visual clone of the popular Lightbox JS v2.0 by Lokesh Dhakar, written using the ultra compact mootools framework. It was designed to be small, efficient, more convenient and 100% compatible with the original Lightbox v2.
  
  


• Suckerfish HoverLightbox
  
  The Suckerfish HoverLightbox is a mashup of three very popular Web design techniques blended together to offer a new way of presenting your image galleries.
  
  


• Suckerfish HoverLightbox Redux
  
  The Redux has a number of improvements, mostly visual, but some behavioral changes as well. Before going into detail, it’s important to give due credit to those who helped make the Suckerfish HoverLightbox a possibility.


• ThickBox 2.1.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.
  
  

CSS-Based Image Galleries

• A Photograph Gallery
  
  Just a simple :hover over thumbnail images to give a full size view of each photograph. With all but Opera you can also click the thumbnails to retain the image on the screen. Text can be added at the bottom of each picture. Ideal for photograph albums.
  
  


• A simple CSS photo-album
  
  The text numbers and images are held in an unordered list without any extra markup (no ‘ems’ or ’spans’ etc). The CSS just styles the text numbers so that they appears in a box and the images so that they are hidden until your visitor clicks a number square.
  
  


• Cross Browser Multi-Page Photograph Gallery
  
  Based on Suckerfish HoverLightbox this one uses my multi-page layout system but includes images instead of text. Unlike the Suckerfish HoverLightbox this version is pure CSS.
  
  


• CSS Image Gallery
  
  This is a purely CSS based image gallery that displays larger versions of thumbnail images dynamically when the mouse hovers over them. A rich HTML caption can be added to the enlarged image, and every aspect of the Image Gallery exists as plain HTML on the page. The idea is to use CSS’s “:hover” pseudo class to cause an element to react onMouseover. When that happens, an absolutely positioned container holding the enlarged image, anchored on the page by another container with position set to relative, is shown. Furthermore, it’s possible to modify the behavior so the enlarged images are only shown onClick, though IE6 currently doesn’t support this behavior well. The gallery works in IE6+, Firefox, Opera 8+.
  
  


• CSS: Photo Showcase
  
  This experiment uses CSS and basic markup to create a simple way to display photo thumbnails on your site while offering convenient fast zoom viewing, even for dialup users.
  
  


• Hoverbox Image Gallery
  
  Basically, it’s a super light-weight (8kb) roll-over photo gallery that uses nothing but CSS.
  
  


• Photo scroll gallery
  
  A combination of several of my previous galleries to give a scrolling ‘thumbnail’ image, a medium size image on hover and a full size image on click. The thumbnail, medium size and full size images are all the same image just resized using CSS. The thumbnails are square to make the scrolling area simpler to work with. This does make these images a little distorted but not so much that they look wrong.
  
  


• Sliding Photograph Galleries
  
  It is just an unordered list of images that are normally compressed vertically (reduction 8:1). When you hover over one of these compressed images it expands to full size. It is based on my sliding menu system and adapted to use images. No thumbnails are required and all the images are ‘pre-loaded’.This method can be used either vertically, as shown, or horizontally.
  
  

JavaScript + CSS-based Galleries & DHTML-Galleries

• xImgGallery – Javascript Image Gallery & Slideshow
  
  This script implements a Javascript image gallery and slideshow – all in one file.
  
  


• easyAlbum
  
  A DOM photo Gallery solution that is browser friendly, keyboard friendly, bandwidth friendly and more.
  
  


• ImageGal
  
  imagegal is a simple PHP script that will automagically create a JS/CSS/DHTML powered image gallery for you when dropped into a directory containing images. This simple script was inspired by a Jeremy Keith’s article on aListApart.com.


• Highslide JS
  
  Highslide JS is a piece of JavaScript that streamlines the use of thumbnail images on web pages. The library offers these features and advantages: No plugins like Flash or Java required. Popup blockers are no problem. The images expand within the active browser window.
  
  


• Satellite
  
  Satellite is an all in one photo gallery website that takes advantage of Yahoo Flickr’s image hosting and management tools. You can upload and manage your images using Flickr and host your portfolio on your own server via Satellite.


• Dhonishow
  
  Showing Picture Online with Javascript.