// ----------------------------------------------------------------------------------- // // Name: Slidebox // Beschreibung: Crossbrowser Slideshow mit Überblend-Effekt // Version: 1.1 // Build: 26.05.2007 // Autor: Konrad Abmeier // (c)Copyright 2007 Konrad Abmeier // // ----------------------------------------------------------------------------------- // Hinweise // // Es werden folgende externe Bibliotheken benötigt: // Prototype JavaScript Framework (http://www.prototypejs.org/) // script.aculo.us JavaScript libraries (http://script.aculo.us/) // // Die Dateien sollten im selben Unterverzeichnis (z.B.: "/js") // und werden in folgender Reihenfolge zwischen eingebunden: // // // // // Bilder und Position werden vom HTML Dokument gesteuert. // Das erste (Start) Bild gibt die größe des Containers vor. // Das Präfix gibt die Box und die Bilder für die Slideshow an. // Das erste (Start) Bild steht in der Box, die anderen Bilder werden // über Links referenziert. Im folgenden Beispiel wurde s als Präfix gewählt: // //
// Slideshow //   //   //   //
// // Das (Start) Bild ist von einem DIV-Container der From "
" umschlossen. // Das (Start) Bild hat die id id="Präfiximage". Danach folgen die Links auf die weiteren Bilder mit // class="slidelink" und rel="slidebox[Präfix]". In class="slidelink" wird einfach die Anzeige ausgeschaltet // .slidelink {display: none;} // Der Präfix gibt somit die Box, das Satrtbild und die Gruppe der zu slidenden Bilder an. // ----------------------------------------------------------------------------------- // Konfiguration // var myInterval = 3; // Zeit zwischen den einzelnen Bildern in Sekunden var myduration = 1.5 // Zeit für den Überblend-Effekt in Sekunden var myLoop = true; // Nach dem letzten Bild von von beginnen? (true,false) // ----------------------------------------------------------------------------------- // ----------------------------------------------------------------------------------- // ab hier bitte nichts mehr ändern! // ----------------------------------------------------------------------------------- // init vars // var sbimageArray = new Array; var sbactiveImage = -1; // ----------------------------------------------------------------------------------- // Array Objekt um removeDuplicates erweitern // - array.removeDuplicates() // Array.prototype.removeDuplicates = function () { for(i = 1; i < this.length; i++){ if(this[i][0] == this[i-1][0]){ this.splice(i,1); } } } // ----------------------------------------------------------------------------------- var Slidebox = Class.create(); Slidebox.prototype = { // init initialize: function() { if (!document.getElementsByTagName){ return; } // abbrechen, wenn getElementsByTagName nicht vorhanden ist // alle links finden var anchors = document.getElementsByTagName('a'); // init sbimageArray = []; var aryParts = new Object(); // alle prüfen for (var i=0; i sbactiveImage){ preloadNextImage = new Image(); preloadNextImage.src = sbimageArray[sbactiveImage + 1][0]; } } } // ----------------------------------------------------------------------------------- function initSlidebox() { mySlidebox = new Slidebox(); } Event.observe(window, 'load', initSlidebox, false);