Überbelnd effect in javascript gallerie

Fragen und Antworten zur clientseitigen Programmiersprache JavaScript

Überbelnd effect in javascript gallerie

Beitragvon faebe am Fr 20. Jan 2012, 20:19

ich habe hier einie gallerie die funktioniert problem los aber hat noch kein über belnd effect jedoch würde ich diesen gerne einfügen

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">&nbsp;urs p. eigenmann + peter hefti &nbsp;&nbsp;&nbsp;&nbsp;dipl. architekten eth sia</div>
  <div id="wohnbau"><a href="eh-wohnbau.html">wohnbau</a></div>
  <div id="wohnbau1">1998 - 2000 &nbsp;&nbsp;&nbsp;drei einfamilienhäuser &nbsp;&nbsp;&nbsp;glärnischstrasse &nbsp;&nbsp;&nbsp;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">&nbsp;</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>


faebe
 
Beiträge: 2
Registriert: Fr 20. Jan 2012, 20:11

Zurück zu JavaScript

cron