MJH
09-24-2009, 09:34 PM
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/download_center_lite/index_t.php?Thumbnail_Slideshow_Creator.zip
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/download_center_lite/index_t.php?Thumbnail_Slideshow_Creator.zip