JavaScripts -> Bilder -> Bild-Viewer mit Filmstreifen-Effekt

<script type="text/javascript">
<!--
// = = ======================================================================= = =
// = = Arsenal 'F' Viewer v1.0 (c) 2004 Triple-M / http://www.htmlarsenal.de = =
// = = ======================================================================= = =

// -------------------------------------------------------------------------------
// -- Dieses Script und viele andere im --
// -- This script and many more in the --
// -------------------------------------------------------------------------------
// -- HTML ARSENAL - Die Quelle für HTML, JavaScript, PHP --
// -- HTML ARSENAL - Your Source for HTML, JavaScript, PHP --
// -------------------------------------------------------------------------------
// -- -= http://www.htmlarsenal.de =- --
// -------------------------------------------------------------------------------

// Sie dürfen dieses Script für nicht-kommerzielle Zwecke nutzen, wenn diese Urheber-Notiz erhalten bleibt.
// You may use this Script for non-commercial causes as long as you include this copyright notice.

// Benutzung / Usage:
// ==================

// Fügen Sie ein Script mit dem Inhalt film() im Body-Tag ein.
// Include a script with the content film() in the body tag.

// Veränderbare Einstellungen / Adjustable Settings
// ================================================

// Liste der Thumbnails (Kleine Bilder). Es können beliebig Bilder hinzugefügt oder entfernt werden
// list of thumbnails (small images). you may freely add or remove images

var thumbs=Array("/pics/examples/thumb01.jpg",
                 "/pics/examples/thumb02.jpg",
                 "/pics/examples/thumb03.jpg",
                 "/pics/examples/thumb04.jpg",
                 "/pics/examples/thumb05.jpg",
                 "/pics/examples/thumb06.jpg",
                 "/pics/examples/thumb07.jpg",
                 "/pics/examples/thumb08.jpg");

// Liste der großen Bilder. Es können beliebig Bilder hinzugefügt oder entfernt werden
// WICHTIG: Es müssen beide Listen die gleiche Anzahl Elemente haben!
// list of big images. you may freely add or remove images
// IMPORTANT: Both lists must have the same number of elements

var pics=Array("/pics/examples/gallery01.jpg",
               "/pics/examples/gallery02.jpg",
               "/pics/examples/gallery03.jpg",
               "/pics/examples/gallery04.jpg",
               "/pics/examples/gallery05.jpg",
               "/pics/examples/gallery06.jpg",
               "/pics/examples/gallery07.jpg",
               "/pics/examples/gallery08.jpg");

var thumbwidth=100; // Breite der Thumbnails / width of thumbnails

var imgurl="/pics/examples/film.gif"; // URL des Filmstreifen-Bildes / URL of film strip image
var speed=20; // Geschwindigkeit des Effektes / speed of effect

// Script-Code
// ===========

// Ab hier bitte nichts mehr verändern
// Please do not change anything from here on

var picpl=new Array();
var current;

function film() {
  document.write('<table style="border-collapse:collapse; margin:0px;height:100%; table-layout:fixed; width:100%">');
  for(i=0;i<thumbs.length;i++) {
    document.write('<tr>');
    if(i==0)document.write('<td id="film1" style="width:8px; padding:0px; background-image:url('+imgurl+'); background-position:0px 0px" rowspan="'+thumbs.length+'"></td>');
    document.write('<td id="thumb_'+i+'" style="background-color:#000000; text-align:center; padding:0px; width:'+(thumbwidth+10)+'px">');
    document.write('<img src="'+thumbs[i]+'" style="border:0px; cursor:pointer" onClick="load('+i+')">');
    document.write('</td>');
    if(i==0) {
      document.write('<td id="film2" style="width:8px; padding:0px; background-image:url('+imgurl+'); background-position:0px 0px" rowspan="'+thumbs.length+'"></td>');
      document.write('<td style="background-color:#202020; text-align:center; vertical-align:middle" rowspan="'+thumbs.length+'">');
      document.write('<img id="out" src=""><br>');
      document.write('<span style="font-family:Verdana; font-size:12px; font-weight:bold; color:#c0c0c0; cursor:pointer" onClick="previous()">&lt;&lt;</span><span style="font-family:Verdana; font-size:12px; font-weight:bold; color:#c0c0c0"> - </span><span style="font-family:Verdana; font-size:12px; font-weight:bold; color:#c0c0c0; cursor:pointer" onClick="next()">&gt;&gt;</span></td>');
    }
    document.write('</tr>');
  }
  document.write('</table>');
  for(i=0;i<pics.length;i++) {
    picpl[i]=new Image();
    picpl[i].src=pics[i];
  }
  load(0);
  window.setTimeout("roll(0)",speed);
}

function load(num) {
  current=num;
  for(i=0;i<thumbs.length;i++) document.getElementById("thumb_"+i).style.backgroundColor="#000000";
  document.getElementById("thumb_"+num).style.backgroundColor="#808080";
  document.getElementById("out").src=picpl[num].src;
}

function roll(pos) {
  pos++;
  if(pos>=8)pos=0;
  document.getElementById('film1').style.backgroundPosition="0px "+pos+"px";
  document.getElementById('film2').style.backgroundPosition="0px "+pos+"px";
  window.setTimeout("roll("+pos+")",speed);
}

function previous() {
  if(current>0)load(current-1);
}

function next() {
  if(current<thumbs.length-1)load(current+1);
}

// ----------------------------
// -- Ende / End Script-Code --
// ----------------------------
// -- Arsenal 'F' Viewer --
// -- Author: Triple-M --
// -- www.htmlarsenal.de --
// -- 18.Apr.2004 --
// ----------------------------

//-->
</script>