aber ich habe keine ahnung von java script nur html??
kann jemand helfen hier der source code meines js-scripts der
galerie.js
- Code: Alles auswählen
// JavaScript-Funktionen fuer die Bilder-Galerie
// Copyright (C) 2005 Alexander Mueller
// Autor: Alexander Mueller
// Web: http://www.EvoComp.de/
// Datei: galerie.js
// The copyright notice must stay intact for use!
// You can obtain this and other scripts at http://www.EvoComp.de/scripts/skripte.html
//
// This program is distributed in the hope that it will be useful,
// but without any warranty, expressed or implied.
// Datenstruktur, in der die einzelnen Bilddaten gespeichert werden,
// in Form eines assoziativen Arrays anlegen
var Photos = new Array();
// Photo zur Galerie hinzufuegen
// thumbnail - URL zum Thumbnail
// bild - URL zum Detailbild
// alt - Beschreibung die angezeigt werden soll, wenn man mit der Maus ueber das Bild faehrt
// beschreibung - Beschreibung des Bildes, welches als Beschriftung unter dem Detailbild angezeigt werden soll
function addPhoto (thumbnail, bild, alt, beschreibung)
{
Photos[Photos.length] = new Object();
// URL des Thumbnail
Photos[Photos.length - 1]["datei"] = thumbnail;
// URL des Bildes
Photos[Photos.length - 1]["datei_gross"] = bild;
// Text der angezeigt werden soll, wenn das Bild unter der angegebenen URL nicht gefunden wurde
Photos[Photos.length - 1]["alt"] = alt;
// Kurze Bildbeschreibung zum jeweiligen Bild
Photos[Photos.length - 1]["beschreibung"] = beschreibung;
}
// Zaehlt Bilder mit IDs, die mit 'thumbnail' beginnen und einer ganzen Zahl
// enden und liefert die Anzahl als Rueckgabewert.
// Diese ID muessen die Image-Tags haben, die als Thumbnails verwendet werden.
function zaehle_thumbnails ()
{
var tn = 0;
for (i = 0; i < document.images.length; i++)
if ((document.images[i].id).match (/^thumbnail[0-9]+$/))
tn++;
return tn;
}
// Thumbnails automatisch erzeugen, um Fehler zu vermeiden
function erzeuge_thumbnails ()
{
// 'anzahl_thumbnails' Thumbnails erzeugen
for (i = 0; i < anzahl_thumbnails; i++)
{
// Ein Thumbnail besteht aus einem LI-Tag, ...
eintrag = document.createElement ("li");
// einem Link ...
link = document.createElement ("a");
// , der per JavaScript das entsprechende Bild austauscht
link.href = "javascript:grosses_bild_anzeigen (" + (i + 1) + ")";
// und einem IMG-Tag fuer den eigentlichen Thumbnail
bild = document.createElement ("img");
bild.border = "0";
bild.id = "thumbnail" + (i + 1);
// erzeugtes hierarchisch zusammenfuegen
link.appendChild (bild);
eintrag.appendChild (link);
// und unter Tag mit der ID 'thumb' ins Dokument einhaengen
document.getElementById ("thumbs").appendChild (eintrag);
}
}
// Thumbnails auf Groesse 'thumb_groesse' ausrichten
function ausrichten ()
{
for (i = 0; i < anzahl_thumbnails; i++)
{
// Thumbnails vertikal ausrichten
document.getElementById ('thumbnail' + (i + 1)).vspace = (thumb_groesse - document.getElementById ('thumbnail' + (i + 1)).height) / 2;
// Thumbnails horizontal ausrichten
document.getElementById ('thumbnail' + (i + 1)).hspace = (thumb_groesse - document.getElementById ('thumbnail' + (i + 1)).width) / 2;
}
// Thumbnail-Navigation ausrichten
// document.getElementById ('zurueck').vspace = (thumb_groesse - document.getElementById ('zurueck').height) / 2;
// document.getElementById ('pgup').vspace = (thumb_groesse - document.getElementById ('pgup').height) / 2;
// document.getElementById ('weiter').vspace = (thumb_groesse - document.getElementById ('weiter').height) / 2;
// document.getElementById ('pgdown').vspace = (thumb_groesse - document.getElementById ('pgdown').height) / 2;
}
// Thumbnails gemaess aktuellem index_erstes_bild anzeigen
function thumbnails_auffrischen ()
{
// Bei allen Thumbnails Daten des jeweiligen IMG-Tags (b1..b3) auffrischen
for (i = 0; i < anzahl_thumbnails; i++)
{
// Bild austauschen
document.getElementById ('thumbnail' + (i + 1)).src = Photos[index_erstes_bild + i]["datei"];
// Alt-Text austauschen
document.getElementById ('thumbnail' + (i + 1)).alt = Photos[index_erstes_bild + i]["alt"];
// Title-Text austauschen
document.getElementById ('thumbnail' + (i + 1)).title = Photos[index_erstes_bild + i]["alt"];
}
// Navigationslinks fuer Thumbnails anzeigen
// gelöscht phe
// Falls das P-Tag mit der ID 'thumb_beschriftung' keine Kind-Elemente hat muss eines erzeugt werden,
// damit die Beschriftungsdaten darin gespeichert werden koennen
if (!document.getElementById ('thumb_beschriftung').firstChild)
document.getElementById ('thumb_beschriftung').appendChild (document.createTextNode (""));
// Variablen in Beschriftungsstring ersetzen
tnstr = thumbnail_string.replace (/%index_erster%/i, (index_erstes_bild + 1));
tnstr = tnstr.replace (/%index_letzter%/i, (index_erstes_bild + anzahl_thumbnails));
tnstr = tnstr.replace (/%anzahl_bilder%/i, anzahl_bilder);
// Beschriftung der Thumbnails im zugehoerigen P-Tag setzen
// gelöscht phe
}
// Thumbnail-Liste ein Bild zurueck scrollen
function zurueck ()
{
// Aenderung nur noetig, wenn der erste Thumbnail noch nicht vorne ist
if (index_erstes_bild > 0)
{
// Index des ersten anzuzeigenden Thumbnails runterzaehlen
// damit die Bilder beim Auffrischen um eine Stelle nach links verschoben werden
index_erstes_bild--;
// Anzeige der Thumbnails aktualisieren
thumbnails_auffrischen ();
}
}
// Thumbnail-Liste ein Bild vorwaerts scrollen
function weiter ()
{
// nur wenn der letzte Thumbnail noch nicht erreicht ist
if (!(index_erstes_bild + anzahl_thumbnails > anzahl_bilder - 1))
{
// Index des ersten anzuzeigenden Thumbnails hochzaehlen
// damit die Bilder beim Auffrischen um eine Stelle nach rechts verschoben werden
index_erstes_bild++;
// Anzeige der Thumbnails aktualisieren
thumbnails_auffrischen ();
}
}
// Thumbnails um 'anzahl_thumbnails' zurueckblaettern
function pgup ()
{
// nur um 'anzahl_thumbnails' Thumbnails zurueck, wenn noch genuegend vor aktuellem Index
if (index_erstes_bild - anzahl_thumbnails > 0)
index_erstes_bild = index_erstes_bild - anzahl_thumbnails;
// ansonsten Thumbnails ab dem ersten Bild anzeigen
else
index_erstes_bild = 0;
// Anzeige der Thumbnails aktualisieren
thumbnails_auffrischen ();
}
// folgende 'anzahl_thumbnails' Thumbnails anzeigen
function pgdown ()
{
// um 'anzahl_thumbnails' weiter, wenn noch genuegend Thumbnails in der Liste
if (index_erstes_bild + 2 * anzahl_thumbnails < anzahl_bilder)
index_erstes_bild = index_erstes_bild + anzahl_thumbnails;
// oder eben die letzten 'anzahl_thumbnails' anzeigen
else
index_erstes_bild = anzahl_bilder - anzahl_thumbnails;
// Anzeige der Thumbnails aktualisieren
thumbnails_auffrischen ();
}
// Index des aus den Thumbnails ausgewaehlten grossen Bildes setzen und Anzeige des grossen Bildes auffrischen
function grosses_bild_anzeigen (i)
{
// neuer Index des grossen Bildes
index_grosses_bild = index_erstes_bild + i - 1;
// Anzeige des grossen Bildes auffrischen
grosses_bild_auffrischen ();
}
// grosses Bild und zugehoerige Beschriftung im IMG mit der ID 'gross' anzeigen (nach index_grosses_bild)
function grosses_bild_auffrischen ()
{
// URL des Bildes setzen
document.getElementById ('gross').src = Photos[index_grosses_bild]["datei_gross"];
// Alt-Text des Bildes setzen
document.getElementById ('gross').alt = Photos[index_grosses_bild]["alt"];
// Title-Text des Bildes setzen
document.getElementById ('gross').title = Photos[index_grosses_bild]["alt"];
// Falls das P-Tag mit der ID 'beschriftung' keine Kind-Elemente hat muss eines erzeugt werden,
// damit die Beschriftungsdaten darin gespeichert werden koennen
// if (!document.getElementById ('beschriftung').firstChild)
// document.getElementById ('beschriftung').appendChild (document.createTextNode (""));
// Variablen in Beschriftungsstring ersetzen
tstr = bild_beschriftung.replace (/%index_gross%/i, (index_grosses_bild + 1));
tstr = tstr.replace (/%anzahl_bilder%/i, anzahl_bilder);
tstr = tstr.replace (/%beschreibung%/i, Photos[index_grosses_bild]["beschreibung"]);
// Beschriftung des Bildes im zugehoerigen P-Tag setzen
// document.getElementById ('beschriftung').firstChild.data = tstr;
}
// vorheriges Bild (gross) aus Bilderliste anzeigen
function zurueck_gross ()
{
// nur noetig, wenn nicht schon das erste Bild angezeigt wird
if (index_grosses_bild > 0)
{
// zum vorherigen Bild
index_grosses_bild--;
// grosses Bild aktualisieren
grosses_bild_auffrischen ();
}
}
// naechstes Bild (gross) aus Bilderliste anzeigen
function weiter_gross ()
{
// nur wenn nicht schon beim letzten Bild angekommen
if (index_grosses_bild + 1 < anzahl_bilder)
{
// zum naechsten Bild
index_grosses_bild++;
// grosses Bild aktualisieren
grosses_bild_auffrischen ();
}
}
und hier die source der html seite
- Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></meta>
<meta name="description" content="JavaScript Beispiel: Demonstration der JavaScript Galerie"></meta>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>
<meta http-equiv="Content-Script-Type" content="text/javascript"></meta>
<meta http-equiv="Content-Style-Type" content="text/css"></meta>
<script src="crossfade.js" type="text/javascript"></script>
<script language="JavaScript1.5" src="galerie.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="eh-wohnbau1ph.css"></link>
<link rel="stylesheet" type="text/css" href="basic.css" /></link>
<title>eh-wohnbau1ph</title>
<style type="text/css">
<!--
#gallery { position: relative; width:500px; height:340px; margin:0; padding:0; }
#gallery li { display: block; }
a:link {
color: #ebebeb;
text-decoration: none;
}
a:visited {
color: #ebebeb;
text-decoration: none;
}
a:hover {
color: #FF0;
text-decoration: none;
}
a:active {
color: #ebebeb;
text-decoration: none;
}
-->
</style></head>
<body bgcolor="#4b4b4b">
<div id="container">
<div id="sign"><img src="images/signet 35x35.jpg" width="35" height="35" alt="sign" /></div>
<div id="banner"> urs p. eigenmann + peter hefti dipl. architekten eth sia</div>
<div id="wohnbau"><a href="eh-wohnbau.html">wohnbau</a></div>
<div id="wohnbau1">1998 - 2000 drei einfamilienhäuser glärnischstrasse stäfa zh</div>
<div id="pläne"><a href="eh-wohnbau1pl.html">pläne</a></div>
<div id="link_home"><a href="index.html">home</a></div>
<div id="link_bauten"><a href="index.html">bauten</a></div>
<div id="link_kontakt"><a href="eh-kontakt.html">kontakt</a></div>
<div id="link_links"><a href="eh-links.html">links</a></div>
<div id="thumbcontainer">
<ul id="thumbs"></ul>
<p id="thumb_beschriftung"> </p></div>
<div id="grosscontainer"><img border="0" id="gross" src="" alt="" title=""></img>
</div>
<script language="JavaScript1.5" type="text/javascript">
/*
Better(?) Image cross fader (C)2004 Patrick H. Lauke aka redux
Inspired by Steve at Slayeroffice http://slayeroffice.com/code/imageCrossFade/
preInit "Scheduler" idea by Cameron Adams aka The Man in Blue
http://www.themaninblue.com/writing/perspective/2004/09/29/
Tweaked to deal with empty nodes 19 Feb 2006
*/
/* general variables */
var galleryId = 'gallery'; /* change this to the ID of the gallery list */
var gallery; /* this will be the object reference to the list later on */
var galleryImages; /* array that will hold all child elements of the list */
var currentImage; /* keeps track of which image should currently be showing */
var previousImage;
var preInitTimer;
preInit();
/* functions */
function preInit() {
/* an inspired kludge that - in most cases - manages to initially hide the image gallery list
before even onload is triggered (at which point it's normally too late, and the whole list already
appeared to the user before being remolded) */
if ((document.getElementById)&&(gallery=document.getElementById(galleryId))) {
gallery.style.visibility = "hidden";
if (typeof preInitTimer != 'undefined') clearTimeout(preInitTimer); /* thanks to Steve Clay http://mrclay.org/ for this small Opera fix */
} else {
preInitTimer = setTimeout("preInit()",2);
}
}
function fader(imageNumber,opacity) {
/* helper function to deal specifically with images and the cross-browser differences in opacity handling */
var obj=galleryImages[imageNumber];
if (obj.style) {
if (obj.style.MozOpacity!=null) {
/* Mozilla's pre-CSS3 proprietary rule */
obj.style.MozOpacity = (opacity/100) - .001;
} else if (obj.style.opacity!=null) {
/* CSS3 compatible */
obj.style.opacity = (opacity/100) - .001;
} else if (obj.style.filter!=null) {
/* IE's proprietary filter */
obj.style.filter = "alpha(opacity="+opacity+")";
}
}
}
function fadeInit() {
if (document.getElementById) {
preInit(); /* shouldn't be necessary, but IE can sometimes get ahead of itself and trigger fadeInit first */
galleryImages = new Array;
var node = gallery.firstChild;
/* instead of using childNodes (which also gets empty nodes and messes up the script later)
we do it the old-fashioned way and loop through the first child and its siblings */
while (node) {
if (node.nodeType==1) {
galleryImages.push(node);
}
node = node.nextSibling;
}
for(i=0;i<galleryImages.length;i++) {
/* loop through all these child nodes and set up their styles */
galleryImages[i].style.position='absolute';
galleryImages[i].style.top=0;
galleryImages[i].style.zIndex=0;
/* set their opacity to transparent */
fader(i,0);
}
/* make the list visible again */
gallery.style.visibility = 'visible';
/* initialise a few parameters to get the cycle going */
currentImage=0;
previousImage=galleryImages.length-1;
opacity=100;
fader(currentImage,100);
/* start the whole crossfade process after a second's pause */
window.setTimeout("crossfade(100)", 1000);
}
}
function crossfade(opacity) {
if (opacity < 100) {
/* current image not faded up fully yet...so increase its opacity */
fader(currentImage,opacity);
/* fader(previousImage,100-opacity); */
opacity += 10;
window.setTimeout("crossfade("+opacity+")", 30);
} else {
/* make the previous image - which is now covered by the current one fully - transparent */
fader(previousImage,0);
/* current image is now previous image, as we advance in the list of images */
previousImage=currentImage;
currentImage+=1;
if (currentImage>=galleryImages.length) {
/* start over from first image if we cycled through all images in the list */
currentImage=0;
}
/* make sure the current image is on top of the previous one */
galleryImages[previousImage].style.zIndex = 0;
galleryImages[currentImage].style.zIndex = 100;
/* and start the crossfade after a second's pause */
opacity=0;
window.setTimeout("crossfade("+opacity+")", 1000);
}
}
/* initialise fader by hiding image object first */
addEvent(window,'load',fadeInit)
/* 3rd party helper functions */
/* addEvent handler for IE and other browsers */
function addEvent(elm, evType, fn, useCapture)
// addEvent and removeEvent
// cross-browser event handling for IE5+, NS6 and Mozilla
// By Scott Andrew
{
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent){
var r = elm.attachEvent("on"+evType, fn);
return r;
}
}
<!-- // fuer Browser ohne JavaScript auskommentieren
/* JavaScript-Bereich fuer die Bilder-Galerie
* Copyright (C) 2005 Alexander Mueller
* Autor: Alexander Mueller
* Web: http://www.EvoComp.de/
* The copyright notice must stay intact for use!
* You can obtain this and other scripts at http://www.EvoComp.de/scripts/skripte.html
*
* This program is distributed in the hope that it will be useful,
* but without any warranty, expressed or implied.
*/
// Maximalwert aus x und y Ausdehnung aller Thumbnails (in Pixel)
// Wird zur Formatierung der Thumbnails und Navigationsbilder benoetigt um ein
// 'Verrutschen' von Navigation und Thumbnails zu verhindern.
var thumb_groesse = 30; // x und y Ausdehnung der Thumbnails (zum Ausrichten)
// Anzahl der Thumbnails, die erzeugt werden sollen
var anzahl_thumbnails = 15;
// Zeichenkette, mit der die Thumbnails beschriftet werden sollen (bei Leerstring wird nichts angezeigt)
// Dabei werden folgende Bestandteile durch entsprechende Werte ersetzt:
// %index_erster% - Index des Bildes, welches als erster Thumbnail angezeigt wird
// %index_letzter% - Index des letzten angezeigten Thumbnails
// %anzahl_bilder% - Anzahl der Bilder in der Galerie
var thumbnail_string = "Bilder %index_erster% bis %index_letzter% von %anzahl_bilder%";
// Zeichenkette, mit der das gewaehlte Detailbild beschriftet werden soll
// Hier werden folgende Bestandteile durch Werte ersetzt:
// %index_gross% - Index des Detailbildes, welches angezeigt wird
// %anzahl_bilder% - Anzahl der Bilder in der Galerie
// %beschreibung% - Beschreibung zum angezeigten Detailbild
var bild_beschriftung = "Bild %index_gross% / %anzahl_bilder%: %beschreibung%";
// Hier kann der absolute Pfad zu den Navigationsbuttons und dem
// Platzhalter (transparent.gif) angegeben werden, falls diese
// nicht im selben Verzeichnis liegen, wie die HTML-Datei, welche
// die Galerie enthaelt.
// var pfad_zu_navbildern = "./nav";
// Bilder zur Galerie hinzufuegen
// 1. Parameter: URL zum Thumbnail
// 2. Parameter: URL zum Detailbild
// 3. Parameter: Kurzbeschreibung, wenn die Maus ueber dem Bild ist
// 4. Parameter: Beschriftung des Detailbildes
addPhoto ("", "images/wohnbau/wohnbau1/1.jpg", "untergeschoss", "");
addPhoto ("", "images/wohnbau/wohnbau1/2.jpg", "untergeschoss", "");
addPhoto ("", "images/wohnbau/wohnbau1/3.jpg", "untergeschoss", "");
addPhoto ("", "images/wohnbau/wohnbau1/4.jpg", "untergeschoss", "");
addPhoto ("", "images/wohnbau/wohnbau1/5.jpg", "untergeschoss", "");
addPhoto ("", "images/wohnbau/wohnbau1/6.jpg", "untergeschoss", "");
addPhoto ("", "images/wohnbau/wohnbau1/7.jpg", "untergeschoss", "");
addPhoto ("", "images/wohnbau/wohnbau1/8.jpg", "untergeschoss", "");
// intern genutzte Variablen (keine Anpassung noetig)
var index_erstes_bild = 0; // erstes Bild in der Liste (zur Initialisierung)
var index_grosses_bild = 0; // Bildindex fuer anzuzeigendes grosses Bild
var anzahl_bilder = Photos.length; // Anzahl der Bilder insgesamt
// Anzahl der Thumbnails darf hoechstens so gross sein, wie die Gesamtzahl der Bilder
if (anzahl_thumbnails > anzahl_bilder)
anzahl_thumbnails = anzahl_bilder;
// Thumbnails erzeugen
erzeuge_thumbnails ();
// den ersten Satz Thumbnails nach der Initialisierung anzeigen
thumbnails_auffrischen ();
// zyklisch Thumbnails positionieren
window.setInterval ("ausrichten ()", 5);
grosses_bild_anzeigen (1);
// -->
</script>
</div>
</body>
</html>