Thumbnail Slideshow Creator with Full Size Centered Popup Image

[MJH]

1) CODE TITLE: Thumbnail Slideshow Creator with Full Size Centered Popup Image and Caption

2) AUTHOR NAME/NOTES: Michael J. Hill www.javascript-demos.com

3) DESCRIPTION:

Use this code to quickly create as many thumbnail slideshows on a page, as you need.

See the screenshot, of the Demo file, for an example of its appearance.

I'm unable to upload the demo images due to the upload file size limit of this site.
So, I've provided a download link for the .zip file.

The demo is obvioulsly useless without the sample images. This way it's easy to test.

Tested in IE and FF, with many images of differnt sizes, and many captions of various lengths.

No coding is necessary!

Copy and paste a block of markup, declare your image names and captions, the path to that set of
images and you're done. Every image set has its own folder, making the code easy to maintain.

These are the configuration variables:

	var slideInterval = 3;        // a new image every 3 seconds in the slideshow;
	var newGifPath = "./";        // the path to the new.gif image;
	var randomize = true;         // or false, to keep the images in the same order as in each imgSet[?], below;
	var fullSizePct = .85;        // full size image is displayed at 85% of its actual size;	

/****** You may have as many image/caption sets as needed *******/

	var dateAdded = [];
	dateAdded[1] = "new | Our Most Recent Visit 09/2009"; // if you include "new | ", then the new.gif will be inserted instead of the comment;
	dateAdded[2] = "8/15/2008";    // you could also use August 2008, etc.

	imgPath = [];
	imgPath[1] = "./cleveland/";   // the path to the image folder for imgSet[1];
	imgPath[2] = "./cleveland/";   // etc.

	var imgSet = [];

	imgSet[1]  = ["tower_city.jpg | Tower City Fountain is Really Cool You Should See It! Just Kidding, It's Only a Fountain.", 
		      "society_tower.jpg | Society Bank Tower", "skyline.jpg | Cleveland Skyline", 
		      "rock_hall.jpg | Rock & Roll Hall of Fame", "free_stamp.jpg | Free Stamp", "playhouse.jpg | Playhouse Square",
		      "ballpark.jpg | Cleveland Indians Ballpark", "hard_rock.jpg | Hard Rock Cafe Guitar"];

	imgSet[2]  = ["tower_city.jpg | Tower City Fountain", "society_tower.jpg | Society Bank Tower", "skyline.jpg | Cleveland Skyline", 
		      "rock_hall.jpg | Rock & Roll Hall of Fame Is Probably The Most Popular Attraction In Cleveland. Cleveland Rocks!", 
		      "free_stamp.jpg | Free Stamp", "playhouse.jpg | Playhouse Square",
		      "ballpark.jpg | Cleveland Indians Ballpark", "hard_rock.jpg | Hard Rock Cafe Guitar"];

Great for those who have many photos to share, and who need a non-technical, and easy to maintain way to do so.

Only one slideshow is allowed to be active at a time.

Clicking on a thumbnail image opens the centered, "full size" image with its caption, subject to the fullSizePct variable.

Most digital photos are too large to fit comfortably inside the average screen. The fullSizePct variable will help
manage that.

It's not affected by popup blockers.

Clicking on a thumbnail image while a slideshow is running, pauses the show until the user clicks the
full size image to "close" it, resuming the slideshow.

The code doesn't use ANY HTML element NAMES or IDs, greatly reducing the chance for a conflict when inserted in
to an existing document.

4) URL TO CODE: http://www.javascript-demos.com/down...ow_Creator.zip

[MJH]

I corrected an error in the code.

Those who previously downloaded the .zip file, should obtain the new one.

[MJH]

Greatly improved code.

Download link: http://www.javascript-demos.com/down...ow_Creator.zip

Now includes the "shadow" or "gray layer" effect, commonly referred to as "Lightbox."

Also includes an easier way to input your data:

	var misc = [];
	misc['headline'] = "Our Fantastic Vacation to Cleveland, Ohio";
	misc['tagline'] = "Our first visit was in August 2008";
	misc['randomize'] = false;
	misc['fullSizePct'] = .85;
	misc['imgPath'] = "./misc/";
	misc['imgSet'] = 
		     [
		      "CB1.jpg | Contemplating All These Books", 
		      "CB2.jpg | Children Teaching an Adult How to Use a Computer",
		      "CB3.jpg | A Happy Family Of Actors", 
		      "CB4.jpg | La Casa Doorway",
		      "CB5.jpg | Graduating Students",
		      "CB6.jpg | Look at All These Clocks!",
		      "CB7.jpg | An Obsolete Computer"       // NOTE: no comma following the last image / caption;
		      ];


	var phoenix_visit_06 = [];
	phoenix_visit_06['headline'] = "My Visit to Phoenix";	
	phoenix_visit_06['tagline'] = "February 22nd to March 6th, 2006";  
	phoenix_visit_06['randomize'] = false;
	phoenix_visit_06['fullSizePct'] = .95;
	phoenix_visit_06['imgPath'] = "./phoenix/";
	phoenix_visit_06['imgSet'] = 
		     [
		      "dcp_0910.jpg | Brenda, in Her Big Chair, Probably Watching Gilmore Girls", 
		      "dcp_0911.jpg | The Kitchen",
		      "dcp_0913.jpg | The Living Room", 
		      "dcp_0914.jpg | Another Living Room View",
		      "dcp_0915.jpg | Brenda's Office",
		      "dcp_0919.jpg | A Front View of the House",
		      "dcp_0920.jpg | Outside the Science Museum",
		      "dcp_0928.jpg | At the Hiking Trail, That's Phoenix in the Distance",
 		      "dcp_0931.jpg | Both of Us at the Hiking Trail",
 		      "dcp_0933.jpg | Looking in to the Living Room",
 		      "dcp_0934.jpg | Another Kitchen View",
 		      "img_3532.jpg | Me at the Science Museum",
 		      "img_3539.jpg | What Am I Doing Standing Way Out Here, and Still Wearing a Wristband?"
		     ];


	cleveland_vacation_09 = [];
	cleveland_vacation_09['headline'] = "We Loved Cleveland So Much We Went Back Again This Year!";
	cleveland_vacation_09['tagline'] = "new | Our visit in September 2009"; // if you include "new | ", then the new.gif will be inserted instead of the comment;
	cleveland_vacation_09['randomize'] = true;
	cleveland_vacation_09['fullSizePct'] = 1;  // 100%
	cleveland_vacation_09['imgPath'] = "./cleveland/";  
	cleveland_vacation_09['imgSet'] = 
		     [
		      "tower_city.jpg | Tower City Fountain is Really Cool You Should See It! Just Kidding, It's Only a Fountain.", 
		      "society_tower.jpg | Society Bank Tower",
		      "skyline.jpg | Cleveland Skyline", 
		      "rock_hall.jpg | Rock & Roll Hall of Fame", 
		      "free_stamp.jpg | Free Stamp",
		      "playhouse.jpg | Playhouse Square",
		      "ballpark.jpg | Cleveland Indians Ballpark", 
		      "hard_rock.jpg | Hard Rock Cafe Guitar"      
		     ];

[jscheuer1]

Many of us, I imagine - certainly myself - would prefer it if you also included a link to a live working demo if possible.

[MJH]

Yes, of course. I should have thought of that.

Link to demo:

http://www.javascript-demos.com/Demo.html

[MJH]

Improved Code.

I was informed that the fade in / out did not work for "large" images, a file size greater than say, 150Kb.

That defect was repaired, and several small improvements were made.

The previous demo link is no longer active.

This is the current link to the demo page:

http://www.javascript-demos.com/thumbnail/Demo2.html

The download link, containing all the sample images and some notes, is the same. See, the first post in this thread.

Also, this application has been accepted by FreewareFiles -- my 6th.

http://www.freewarefiles.com/Thumbna...ram_52424.html