GFXler Forum
Herzlich Willkommen in unserem Forum!
Wir freuen uns sehr das du zu uns gefunden hast. Sieh dich ruhig um, aber bitte beachte dass einige der Bereiche erst nach deiner Anmeldung für dich einsehbar sind.
Bei Problemen und Unklarheiten kannst du dich gerne im Gästebuch oder Kontaktformular an uns wenden.
Liebe Grüße,
das Team

Bilder-Fadeshow

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Bilder-Fadeshow

Beitrag von Mirah am Mi Mai 02, 2012 10:21 pm

Wenn man viele Bilder zeigen möchte, sieht das einfache 'Untereinander-Setzen' manchmal langweilig aus.
Eine hübsche Lösung erreicht man zum Beispiel mit JavaScript.
Ich möchte euch hier ein Script zur Verfügung stellen, das aus euren Bildern eine kleine und einfache Bildershow macht.

Ich habe das Script nicht komplett selbst geschrieben, sondern die meisten Teile, die mir am besten gefallen haben, aus bereits vorhandenen, frei nutzbaren Scripts genommen und zu einem neuen zusammen gestückelt.
Ich erhebe also kein Copyright-Anspruch darauf!

die Bildershow:



das Script dazu:
Code:
<script type="text/javascript" language="JavaScript">
   <!--
   pic_num    = 6; //Anzahl Bilder im Ordner +1
   imageArray    = new Array();
   var intCount = 0;
   var hTimer = null;
   
   function init() {
   
      for (i=0; i<pic_num; i++) {
         imageArray[i] = new Image();
         imageArray[i].src = 'img/pic' + i + '.jpg';
      }
   
      document.getElementById("fade").appendChild(imageArray[intCount]);
      
      fadeIn(imageArray[intCount], 0);
   }
   
   function fadeIn(element, opac) {
      if (opac < 1) {
         opac += 0.05;
         element.style.opacity = opac;
         hTimer = window.setTimeout(function() {fadeIn(element, opac);}, 50); //Geschwindigkeit für's 'einfaden'
      }
      
      else {
         element.style.opacity = 1;
         //hTimer = window.setTimeout(function(){fadeOut(element, 1);}, 50);
         fadeOut(element, 3); //Zeit in Sekunden, wie lange das Bild stehen bleiben soll
      }
   }
   
   function fadeOut(element, opac) {
      if (opac > 0) {
         opac -= 0.05;
         element.style.opacity = opac;
         hTimer = window.setTimeout(function() {fadeOut(element, opac);}, 50); //Geschwindigkeit für's 'ausfaden'
      }
      else {
         if (intCount < imageArray.length - 1) {
            intCount++;
         }
         else {
            intCount = 0;
         }
         document.getElementById("fade").replaceChild(imageArray[intCount], element);
         fadeIn(imageArray[intCount], 0);
      }
   }
   
   window.onload = function(){
     init();
   }
   
   //-->
</script>

Der HTML-Teil:
Code:
<div id="fade"></div>

bildershow.zip zum Download
avatar
Mirah
Moderator
Moderator

Anzahl der Beiträge : 41
Anmeldedatum : 01.04.12

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben

- Ähnliche Themen

 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten