Auf Thema antworten 2026

Beitrag

<blockquote data-quote="silence12121" data-source="post: 1458193" data-attributes="member: 303574">Hallo, ich weiß is spät, aber das is ja gott sei dank relativ...<img src="/styles/default/xenforo/smilies/rolleyes.gif"&nbsp; class="smilie" loading="lazy" alt=":rolleyes:" title="Roll Eyes&nbsp; &nbsp; :rolleyes:" data-shortname=":rolleyes:" />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. :&#039;<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite1" alt="(:" title="Smile&nbsp; &nbsp; (:" loading="lazy" data-shortname="(:" />&#039;(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]&lt;html&gt;&lt;head&gt;&nbsp; &nbsp; &lt;script type=&quot;text/javascript&quot;&gt;function imageLine()&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; var checkInterval = null,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; imageLineInterval = null,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; currentImage = -1;&nbsp; &nbsp; &nbsp; &nbsp; images = new Array(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#039;bild0.jpg&#039;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Alle Bilder die angezeigt werden sollen&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#039;bild1.jpg&#039;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#039;bild2.jpg&#039;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#039;bild3.jpg&#039;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#039;bild4.jpg&#039;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#039;bild5.jpg&#039;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; loadingImages = new Array();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;// Dieses Array enthält später alle Objekte&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.run = function()&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; checkInterval = window.setInterval(&#039;this.checkIfLoaded();&#039;, 100);&nbsp; &nbsp; // Alle 100 Millisekunden prüfen ob alle Bilder geladen sind&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for(i = 0;i &lt; images.length;i++)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;// Alle Images in dem Array einzeln Durchgehen&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; image = images[i];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; loadingImages.push(new Image);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;// Array für die Objekte für Bilder vorbereiten&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; loadingImages[i].src = image;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // neuen Objekt die Url des momentanen Bildes geben&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.checkIfLoaded = function()&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; allLoaded = true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for(i = 0;i &lt; loadingImages.length;i++)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Alle Objekte durchgehen&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; loadingImage = loadingImages[i];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(!loadingImage.complete)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Prüfen ob das aktuelle Objekt / Bild geladen ist&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; allLoaded = false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Falls nicht dann die Variable zur Prüfung auf false setzen&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; if(allLoaded)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; // Wenn alle Objekte / Bilder geladen sind&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; window.clearInterval(checkInterval);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Die Interval für das Prüfen löschen&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.startImageLine();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Das erste Bild anzeigen&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; window.setInterval(&#039;this.startImageLine();&#039;, 3000);&nbsp; &nbsp; // Bilder wechseln alle 3 Sekunden ausführen&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.startImageLine = function()&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.showImage();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Bild anzeigen&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(currentImage == (loadingImages.length - 1))&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;// vergleiche Anzahl Bilder&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; currentImage = 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // wenn max. Anzahl erreicht, fange bei 0 an&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; currentImage += 1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // wenn nicht, dann zähle +1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element = document.getElementById(&#039;imageline&#039;);&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;// Element für die Bilderanzeige&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element.style.height = loadingImages[currentImage].height + &#039;px&#039;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element.style.width = loadingImages[currentImage].width + &#039;px&#039;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;// Dem Element die Breite und Höhe des momentanen Bildes geben&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element.style.backgroundImage = &#039;url(&#039; + loadingImages[currentImage].src + &#039;)&#039;;&nbsp; &nbsp; &nbsp;&nbsp; // legt das aktuelle Bild als Hintergrund fest&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; window.setTimeout(&#039;this.hideImage();&#039;, 2500);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;// Bild in 2,5 Sekunden ausblenden&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.hideImage = function()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Bild verstecken&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element = document.getElementById(&#039;imageline&#039;);&nbsp; &nbsp; &nbsp; &nbsp; // aktuelles Bild aus div beziehen&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for(i = 0;i &lt;= 100;i++)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; window.setTimeout(&#039;element.style.filter = &quot;Alpha(opacity=&#039; + (100 - i) + &#039;)&quot;; element.style.MozOpacity = &#039; + (1 - i / 100) + &#039;; element.style.opacity = &#039; + (1 - i / 100) + &#039;;&#039;, i * 5);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Von 0 bis 100 (Prozent)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Das i * 5 dient dazu, dass das Ausblenden nicht zu schnell geht&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.showImage = function()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;// Bild anzeigen&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element = document.getElementById(&#039;imageline&#039;);&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;// aktuelles Bild aus div beziehen&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for(i = 0;i &lt;= 100;i++)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; window.setTimeout(&#039;element.style.filter = &quot;Alpha(opacity=&#039; + i + &#039;)&quot;; element.style.MozOpacity = &#039; + i / 100 + &#039;; element.style.opacity = &#039; +&nbsp; i / 100 + &#039;;&#039;, i * 5);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.run();&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/script&gt;&nbsp; &nbsp; &lt;style&gt;&nbsp; &nbsp;&nbsp; img {border:none;}&nbsp; &nbsp; &lt;/style&gt;&lt;/head&gt;&lt;body onLoad=&quot;imageLine();&quot;&gt;&lt;div id=&quot;imageline&quot;&gt;&lt;/div&gt;&lt;a href=&quot;javascript:this.startImageLine&quot;&gt;&lt;img src=&quot;b1.png&quot;&gt;&lt;/a&gt;&lt;a href=&quot;javascript:this.startImageLine&quot;&gt;&lt;img src=&quot;b2.png&quot;&gt;&lt;/a&gt;&nbsp; &nbsp; &lt;/body&gt;&lt;/html&gt;[/code]Danke!!!!!!!</blockquote>

[QUOTE="silence12121, post: 1458193, member: 303574"] Hallo, ich weiß is spät, aber das is ja gott sei dank relativ...:rolleyes: 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> [/code]Danke!!!!!!! [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 5, ▼ = 2 und ■ = 7, was ist ▲ × ▼ + ■?