Full version: jsB@nk » Image » Image viewer » xImgGallery
URL: https://www.javascriptbank.com/ximggallery.html
A Javascript image gallery and slide-show all in one file. This thing just keeps getting better thanks to everyone's feedback.
Full version: jsB@nk » Image » Image viewer » xImgGallery
URL: https://www.javascriptbank.com/ximggallery.html
<STYLE type=text/css>#gallery {DISPLAY: none; HEIGHT: 320px}#slideshow {DISPLAY: none}.gcap {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: xx-small; PADDING-BOTTOM: 0px; MARGIN: 3px; PADDING-TOP: 0px}.scap {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: xx-small; PADDING-BOTTOM: 0px; MARGIN: 3px; PADDING-TOP: 0px}.gcon {BORDER-RIGHT: #bf8660 1px solid; BORDER-TOP: #bf8660 1px solid; BACKGROUND: #cfd4e6; FLOAT: left; MARGIN: 10px; BORDER-LEFT: #bf8660 1px solid; WIDTH: 114px; BORDER-BOTTOM: #bf8660 1px solid; HEIGHT: 120px}.scon {BORDER-RIGHT: #bf8660 1px solid; BORDER-TOP: #bf8660 1px solid; BACKGROUND: #cfd4e6; MARGIN: 10px; BORDER-LEFT: #bf8660 1px solid; WIDTH: 480px; BORDER-BOTTOM: #bf8660 1px solid}#gallery IMG {BACKGROUND: #cfd4e6; MARGIN: 6px 6px 3px}#slideshow IMG {BACKGROUND: #cfd4e6; MARGIN: 6px 6px 3px}#navigation {}#prev {FONT-WEIGHT: bold; CURSOR: pointer; COLOR: #bf8660; MARGIN-RIGHT: 20px}#next {FONT-WEIGHT: bold; CURSOR: pointer; COLOR: #bf8660; MARGIN-RIGHT: 20px}#back {FONT-WEIGHT: bold; CURSOR: pointer; COLOR: #bf8660; MARGIN-RIGHT: 20px}#auto {FONT-WEIGHT: bold; CURSOR: pointer; COLOR: #bf8660; MARGIN-RIGHT: 20px}#time {FONT-WEIGHT: bold; CURSOR: pointer; COLOR: #bf8660; MARGIN-RIGHT: 20px}.clearAll {CLEAR: both; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px}</STYLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT type=text/javascript>window.onload = function(){ if (window.winOnLoad) window.winOnLoad();}window.onunload = function(){ if (window.winOnUnload) window.winOnUnload();}</SCRIPT><SCRIPT type=text/javascript>// Begin User Configurable Variables:var imgsPerPg = 6; // number of img elements in the htmlvar imgsMax = 23; // total number of imagesvar slideTimeout = 7; // seconds before loading the next slidevar gPath = ''; // gallery files (thumbnails) path, include trailing slashvar gPrefix = '';var gSuffix = '';var gExt = '.gif';var gZeros = true; // filename uses leading zeros?var gDigits = 4 // total digits in filename, including leading zerosvar sPath = ''; // slideshow files (big imgs) path, include trailing slashvar sPrefix = '';var sSuffix = '';var sExt = '.gif';var sZeros = true; // filename uses leading zeros? var sDigits = 4 // total digits in filename, including leading zerosvar captions = new Array();// There must be (imgsMax + 1) captions.// captions[0] is currently not used.captions[0] = "not used";captions[1] = "Wind and waves... and Light";captions[2] = "I'm gettin dizzy";captions[3] = "I can see forever...";captions[4] = "All images copyright (C) GoneCoastal";captions[5] = "Gotta work on that tan";captions[6] = "The Gulf in a basket";captions[7] = "Hidden treasures";captions[8] = "Wild at Tyndall";captions[9] = "All images copyright (C) GoneCoastal";captions[10] = "Deep blue";captions[11] = "And a glass of wine...";captions[12] = "Bird's eye view";captions[13] = "Catch a wave";captions[14] = "Ahhh...";captions[15] = "All images copyright (C) GoneCoastal";// End User Configurable Variablesfunction winOnLoad(){ xImgGallery();}/* Development Notes and Script Assumptions:1) Optional URL arguments: g = 'gallery first num', s = 'slideshow img num'. For example: img_gallery_2.php?g=21 img_gallery_2.php?s=302) IMG IDs begin with 'g' (for gallery) or 's' (for slideshow) then are numbered sequentially beginning with 1. No leading zeros.3) Gallery (thumbnail) image pathnames: gPath + gPrefix + seq_num + gSuffix + gExt SlideShow (large image) pathnames: sPath + sPrefix + seq_num + sSuffix + sExt Leading zeros (as part of seq_num) are optional.4) The captions array initializations could be generated server-side.5) This file does not have to be a PHP file - I use it here for my page-template, not for this demo.*//* xImgGallery, Copyright (C) 2004,2005 Michael Foster (Cross-Browser.com) Distributed under the terms of the GNU LGPL.*/// don't change these:var galMode = true;var autoSlide = false;var slideTimer = null;var slideCounter = 0;var currentSlide = 1;function xImgGallery(){ if (document.getElementById && document.getElementById('navigation').style) { var n = 1, a = xGetURLArguments(); if (a.length) { var arg = a['g'] || a['s']; if (arg) { n = parseInt(arg, 10); if (n <= 0 || n > imgsMax) { n = 1; } if (a['s']) { galMode = false; } } } gal_paint(n); document.getElementById('time').style.display = 'none'; }}function gal_paint(n){ gal_setImgs(n); gal_setNav(n);}function gal_setImgs(n){ var ssEle = document.getElementById('slideshow'); var galEle = document.getElementById('gallery'); var i, imgTitle, pth, img, id, src, ipp, idPrefix, imgSuffix, imgPrefix; var zeros, digits, capEle, capPar; if (galMode) { ipp = imgsPerPg; idPrefix = 'g'; imgPrefix = gPrefix; imgSuffix = gSuffix + gExt; imgTitle = 'Click to view large image'; ssEle.style.display = 'none'; galEle.style.display = 'block'; pth = gPath; zeros = gZeros; digits = gDigits; } else { currentSlide = n; ipp = 1; idPrefix = 's'; imgPrefix = sPrefix; imgSuffix = sSuffix + sExt; imgTitle = ''; ssEle.style.display = 'block'; galEle.style.display = 'none'; pth = sPath; zeros = sZeros; digits = sDigits; } for (i = 0; i < ipp; ++i) { id = idPrefix + (i + 1); img = document.getElementById(id); capEle = document.getElementById((galMode ? 'gc':'sc') + (i + 1)); if (capEle) capPar = capEle.parentNode; if ((n + i) <= imgsMax) { if (zeros) src = xPad(n + i, digits, '0', true); else src = (n + i) + ""; img.title = imgTitle; img.alt = src; img.src = pth + imgPrefix + src + imgSuffix; // img to load now img.onerror = imgOnError; if (galMode) { img.style.cursor = 'pointer'; img.slideNum = n + i; // slide img to load onclick img.onclick = imgOnClick; } if (capEle) { capEle.innerHTML = captions[i + n]; if (capPar) capPar.style.display = 'block'; } img.style.display = 'inline'; } else { img.style.display = 'none'; if (capEle) { if (capPar) capPar.style.display = 'none'; } } } }function imgOnClick(){ galMode = false; gal_paint(this.slideNum);}function imgOnError(){ var p = this.parentNode; if (p) p.style.display = 'none';}function gal_setNav(n){ var ipp = galMode ? imgsPerPg : 1; // Next var e = document.getElementById('next'); if (n + ipp <= imgsMax) { e.nextNum = n + ipp; e.onclick = next_onClick; e.style.display = 'inline'; } else { e.nextNum = 1; } // Previous e = document.getElementById('prev'); e.style.display = 'inline'; e.onclick = prev_onClick; if (n > ipp) { e.prevNum = n - ipp; } else { e.prevNum = galMode ? normalize(imgsMax) : imgsMax; } // Back e = document.getElementById('back'); if (!galMode) { e.onclick = back_onClick; e.style.display = 'inline'; e.backNum = normalize(n); } else { e.style.display = 'none'; } // Auto Slide e = document.getElementById('auto'); if (!galMode) { e.onclick = auto_onClick; e.style.display = 'inline'; } else { e.style.display = 'none'; }}function normalize(n){ return 1 + imgsPerPg * (Math.ceil(n / imgsPerPg) - 1);}function next_onClick(e){ gal_paint(this.nextNum);}function prev_onClick(e){ gal_paint(this.prevNum);}function back_onClick(e){ galMode = true; if (slideTimer) { clearTimeout(slideTimer); } autoSlide = false; gal_paint(this.backNum); document.getElementById('time').style.display = 'none';}function auto_onClick(e){ var ele = document.getElementById('time'); autoSlide = !autoSlide; if (autoSlide) { slideCounter = 0; slideTimer = setTimeout("slide_OnTimeout()", slideTimeout); ele.style.display = 'inline'; } else if (slideTimer) { clearTimeout(slideTimer); ele.style.display = 'none'; }}function slide_OnTimeout(){ slideTimer = setTimeout("slide_OnTimeout()", 1000); ++slideCounter; document.getElementById('time').innerHTML = slideCounter + '/' + slideTimeout; if (slideCounter == slideTimeout) { if (++currentSlide > imgsMax) currentSlide = 1; gal_paint(currentSlide); slideCounter = 0; }}/* xGetURLArguments and xPad are part of the X library, distributed under the terms of the GNU LGPL, and maintained at Cross-Browser.com.*/function xGetURLArguments(){ var idx = location.href.indexOf('?'); var params = new Array(); if (idx != -1) { var pairs = location.href.substring(idx+1, location.href.length).split('&'); for (var i=0; i<pairs.length; i++) { nameVal = pairs[i].split('='); params[i] = nameVal[1]; params[nameVal[0]] = nameVal[1]; } } return params;}function xPad(str, finalLen, padChar, left){ if (typeof str != 'string') str = str + ''; if (left) { for (var i=str.length; i<finalLen; ++i) str = padChar + str; } else { for (var i=str.length; i<finalLen; ++i) str += padChar; } return str;}</SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><DIV id=demo1><DIV id=gallery><DIV><DIV class=gcon><IMG id=g1 src="alien.gif"><DIV class=gcap id=gc1> </DIV></DIV><DIV class=gcon><IMG id=g2 src="bong.gif"><DIV class=gcap id=gc2> </DIV></DIV><DIV class=gcon><IMG id=g3 src="bongbong.gif"><DIV class=gcap id=gc3> </DIV></DIV><DIV class=clearAll> </DIV></DIV><DIV><DIV class=gcon><IMG id=g4 src="butterfly2.gif"><DIV class=gcap id=gc4> </DIV></DIV><DIV class=gcon><IMG id=g5 src="eye.gif"><DIV class=gcap id=gc5> </DIV></DIV><DIV class=gcon><IMG id=g6 src="ghost0.gif"><DIV class=gcap id=gc6> </DIV></DIV><DIV class=clearAll> </DIV></DIV></DIV><DIV id=slideshow><DIV class=scon><IMG id=s1 src="ghost1.gif"><DIV class=scap id=sc1> </DIV></DIV></DIV><DIV id=navigation><SPAN id=prev>« Previous</SPAN> <SPAN id=next>Next »</SPAN> <P><SPAN id=back>Back to the Gallery</SPAN></P><P><SPAN id=auto title="Toggle Auto-Slide">Auto-Slide</SPAN> <SPAN id=time> </SPAN></P></DIV></DIV><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->