Full version: jsB@nk » Image » Image viewer » Photo Viewer using Selection list
URL: https://www.javascriptbank.com/photo-viewer-using-selection-list.html
A simple JavaScript picture viewer that uses a HTML selection list for surferring to choose among many thumnail images to be displayed in one fixed area.
Full version: jsB@nk » Image » Image viewer » Photo Viewer using Selection list
URL: https://www.javascriptbank.com/photo-viewer-using-selection-list.html
<script language="javascript"><!-- Image Selector// ChangeLog//// Wed Jul 10 11:29:51 EDT 1996// Added -1 check on array// Wed Jul 10 06:25:30 EDT 1996// merged pulldown and selector into one.//// Wed Jul 10 06:03:05 EDT 1996// 3.0b5a hosed something! Stopped using Image objects// and just stored in array.//// Usage:// Selector(width,height,images)// SelectorLong(width,height,boxHeight,images)// SelectorLongNames(width,height,boxHeight,images,names)// PullDownSelector(width,height,images)// PullDownSelectorNames(width,height,images,names)//// width, heightis image size (-1,-1) if you don't want to specify// boxHeightis the height of the select box// imagesis space or comma separated file list// namesis corresponding name array (comma separated)function selectImage(f){if (document.flipForm.which.selectedIndex >= 0) document.flipForm.flip.src = imageSet[document.flipForm.which.selectedIndex];}function SelectorLongNames(width,height,listHeight,images,names){/* si: start index ** i: current index** ei: end index** cc: current count*/ si = 0; ci=0; cc=0; imageSet = new Array(); ei = images.length; for (i=1;i<ei;i++) { if (images.charAt(i) == ' ' || images.charAt(i) == ',') { imageSet[cc] = images.substring(si,i); cc++; si=i+1; } } currentFlip = 0; si = 0; ci=0; cc=0; nameSet = new Array(); ei = names.length; for (i=1;i<ei;i++) { if (names.charAt(i) == ',') { nameSet[cc] = names.substring(si,i); cc++; si=i+1; } } currentFlip = 0; // should check nameSet.length == imageSet.length document.writeln("<FORM name=flipForm>"); document.writeln("<table border=0><tr><td>"); document.write("<img name='flip'"); if (width >0) document.write("width="+width); if (height >0) document.write(" height=" +height); document.writeln(" src=" +imageSet[0]+ ">"); document.writeln("</td><td>"); document.write("<Select"); if (listHeight > 0) document.write(" size="+listHeight); document.write(" name='which' onChange='selectImage(this.form)'>"); for (i=0;i<imageSet.length;i++) if (i<nameSet.length) document.write("<OPTION value="+i+">"+nameSet[i]); else document.write("<OPTION value="+i+">"+imageSet[i]); document.writeln("</SELECT>"); document.writeln("</FORM>"); document.writeln("</td></tr></table>");}function SelectorLong(width,height,listHeight,images){ SelectorLongNames(width,height,listHeight,images,",");}function PullDownSelector(width,height,images){ SelectorLongNames(width,height,-1,images,",")}function PullDownSelectorNames(width,height,images,names){ SelectorLongNames(width,height,-1,images,names)}// use -1 -1 if you don't know the width and height for the imagefunction Selector(width,height,images){ listHeight=5; SelectorLong(width,height,listHeight,images);}// End Script --></script><script language="javascript">Selector(152,136,"photo1.jpg photo2.jpg photo3.jpg photo4.jpg photo5.jpg");</script>