Grünschnabel
Hallo, ich weiß is spät, aber das is ja gott sei dank relativ...
Ich hab n problem, und entweder steh ich voll auf dem schlauch oder ich bin mittlerweile betriebsblind.
Erstmal zu meinem Problem. Ich möchte eine Bildergalerie erstellen, wo beim Bildwechsel ein-bzw. ausgeblendet wird. Soweit die theorie.
Als Interval funktioniert das ganze auch soweit. Aber ich versuche irgendwie schon seit ner ganzen weile die stelle zu finden, wo ich das script anpassen muss, damit es per buttonclick funzt. Aber egal was ich versuche, es klappt einfach nicht. :'
'(
Vielleicht könnte einer von euch mir n tipp geben, wo ich anfangen muss.
Ich poste das Script mal als lauffähigen Interval um das als Grundlage zu nehmen. Meine unzähligen missglückten Versuche möchte ich euch gerne ersparen. Buttons / Bilder sind im script schon mitangelegt, müssten von euch ggf. als kl. Datei erstellt werden.
Wär jedenfalls super, wenn mir einer von euch n denkanreiz geben könnte, weil wie gesagt, bei mir sitzt n Elefant auf der leitung.
Das Script
Danke!!!!!!!
Ich hab n problem, und entweder steh ich voll auf dem schlauch oder ich bin mittlerweile betriebsblind.
Erstmal zu meinem Problem. Ich möchte eine Bildergalerie erstellen, wo beim Bildwechsel ein-bzw. ausgeblendet wird. Soweit die theorie.
Als Interval funktioniert das ganze auch soweit. Aber ich versuche irgendwie schon seit ner ganzen weile die stelle zu finden, wo ich das script anpassen muss, damit es per buttonclick funzt. Aber egal was ich versuche, es klappt einfach nicht. :'
'(Vielleicht könnte einer von euch mir n tipp geben, wo ich anfangen muss.
Ich poste das Script mal als lauffähigen Interval um das als Grundlage zu nehmen. Meine unzähligen missglückten Versuche möchte ich euch gerne ersparen. Buttons / Bilder sind im script schon mitangelegt, müssten von euch ggf. als kl. Datei erstellt werden.
Wär jedenfalls super, wenn mir einer von euch n denkanreiz geben könnte, weil wie gesagt, bei mir sitzt n Elefant auf der leitung.
Das Script
Code:
<html>
<head>
<script type="text/javascript">
function imageLine()
{
var checkInterval = null,
imageLineInterval = null,
currentImage = -1;
images = new Array(
'bild0.jpg', // Alle Bilder die angezeigt werden sollen
'bild1.jpg',
'bild2.jpg',
'bild3.jpg',
'bild4.jpg',
'bild5.jpg'
);
loadingImages = new Array();
// Dieses Array enthält später alle Objekte
this.run = function()
{
checkInterval = window.setInterval('this.checkIfLoaded();', 100);
// Alle 100 Millisekunden prüfen ob alle Bilder geladen sind
for(i = 0;i < images.length;i++)
// Alle Images in dem Array einzeln Durchgehen
{
image = images[i];
loadingImages.push(new Image);
// Array für die Objekte für Bilder vorbereiten
loadingImages[i].src = image;
// neuen Objekt die Url des momentanen Bildes geben
}
}
this.checkIfLoaded = function()
{
allLoaded = true;
for(i = 0;i < loadingImages.length;i++)
// Alle Objekte durchgehen
{
loadingImage = loadingImages[i];
if(!loadingImage.complete)
// Prüfen ob das aktuelle Objekt / Bild geladen ist
allLoaded = false;
// Falls nicht dann die Variable zur Prüfung auf false setzen
}
if(allLoaded)
// Wenn alle Objekte / Bilder geladen sind
{
window.clearInterval(checkInterval);
// Die Interval für das Prüfen löschen
this.startImageLine();
// Das erste Bild anzeigen
window.setInterval('this.startImageLine();', 3000);
// Bilder wechseln alle 3 Sekunden ausführen
}
}
this.startImageLine = function()
{
this.showImage();
// Bild anzeigen
if(currentImage == (loadingImages.length - 1))
// vergleiche Anzahl Bilder
currentImage = 0;
// wenn max. Anzahl erreicht, fange bei 0 an
else
currentImage += 1;
// wenn nicht, dann zähle +1
element = document.getElementById('imageline');
// Element für die Bilderanzeige
element.style.height = loadingImages[currentImage].height + 'px';
element.style.width = loadingImages[currentImage].width + 'px';
// Dem Element die Breite und Höhe des momentanen Bildes geben
element.style.backgroundImage = 'url(' + loadingImages[currentImage].src + ')';
// legt das aktuelle Bild als Hintergrund fest
window.setTimeout('this.hideImage();', 2500);
// Bild in 2,5 Sekunden ausblenden
}
this.hideImage = function()
// Bild verstecken
{
element = document.getElementById('imageline');
// aktuelles Bild aus div beziehen
for(i = 0;i <= 100;i++)
window.setTimeout('element.style.filter = "Alpha(opacity=' + (100 - i) + ')"; element.style.MozOpacity = ' + (1 - i / 100) + '; element.style.opacity = ' + (1 - i / 100) + ';', i * 5);
// Von 0 bis 100 (Prozent)
// Das i * 5 dient dazu, dass das Ausblenden nicht zu schnell geht
}
this.showImage = function()
// Bild anzeigen
{
element = document.getElementById('imageline');
// aktuelles Bild aus div beziehen
for(i = 0;i <= 100;i++)
window.setTimeout('element.style.filter = "Alpha(opacity=' + i + ')"; element.style.MozOpacity = ' + i / 100 + '; element.style.opacity = ' + i / 100 + ';', i * 5);
}
this.run();
}
</script>
<style> img {border:none;} </style>
</head>
<body onLoad="imageLine();">
<div id="imageline"></div>
<a href="javascript:this.startImageLine"><img src="b1.png"></a>
<a href="javascript:this.startImageLine"><img src="b2.png"></a>
</body>
</html>
