Slideshow auf Webseite funktioniert nicht.?

stormraider

Hallo zusammen,

habe anhand einer Anleitung versucht mir eine Slideshow per Javascript einzubauen aber aus irgendeinem Grund werden die Bilder nicht angezeigt.
Ist der Pfad zu den Bildern (Ich teste offline) falsch oder hab ich was beim programmieren falsch gemacht.?

Index.html -> [Ordner-images],[Ordner-js],[Ordner-css]

01.) Javalink im Head-Bereich eingefügt
02.) div class container_show mit img class eingefügt im Bodybereich...

HTML

<!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 name="title" content="Dornröschen Wohnen" />
        <meta name="author" content="Michael Meyer - Dornröschen Wohnen" />
        <meta name="publisher" content="Manuel Meyer - Dornröschen Wohnen" />
        <meta name="copyright" content="Dornröschen Wohnen, 2010" />
        <meta name="robots" content="index, follow" />
        <meta name="language" content="de" />
        <meta name="revisit-after" content="3 days" />
        <title>Dornröschen Wohnen - kreativ, sauber, flexibel</title>

        <link rel="Shortcut Icon" href="images/favicon.ico" />


        <meta name="description" content="Dornröschen Wohnen - kreativ, sauber, flexibel. Möbelt ihr Zuhause auf. Wir verschönern ihr Zuhause, mit behutsamen Veränderungen, Akzenten und Einrichtugnsgegenständen. Kleine Veränderungen durch kreative Hände erzielen eine große Wirkung" />


        <meta name="keywords" content="Dornröschen, Wohnen, Dornröschen Wohnen, Leidenschaft, Hobby, Möbel, Dekor, Dekoration, Veränderung, Akzent, Akzente, Wohlgefühl, Einrichtung, Gegenstände, Accessoires, Stoff, Farben, Farbgebung, Materialien, Holz, Blumen, Kerzen, Raumelemente, Kreativ, Sauber, Flexibel, Gestalten, Verschönerung, Aufarbeitung, Umbau, Stimmig, Gemütlich, Gestaltungsideen, Ausführung, Neustrukturierung, Auffrischung, Frisch, Reperaturen, Kleinreperaturen, Bearbeitung, Reinigung, Raum, Kamin, Komode, Regal, Tisch, Wohnzimmer, Esszimmer, Küche, Schlafzimmer, Bad," />


<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen"/>
<script type="text/javascript" src="../js/slideshow.js"></script>
</head>


<body>


<div id="container">


<div class="main">
<div class="line_top">
<div class="line_bottom">
<div class="line_lr">


<div id="header">
<div class="header_background">
</div>
</div>


<div id="navigation">
    <ul class="nav_buttons">
        <li class="link_home"><a title="Startseite" href="index.html">Startseite</a></li>
        <li class="link_about"><a title="Wir über uns" href="about.html">Wir über uns</a></li>
        <li class="link_contact"><a title="So erreichen Sie uns" href="contact.html">So erreichen Sie uns</a></li>
        <li class="link_joblist"><a title="Dienstleistungsliste" href="joblist.html">Dienstleistungsliste</a></li>
        <li class="link_projectlist"><a title="Projektliste" href="projectlist.html">Projektliste</a></li>
    </ul><!--Nav_buttons schließen-->  
</div><!--Navigation schließen-->


<div id="main_content">
<div class="container_news">
<div class="news">
<h1>09.03.2010</h1>
<p>Unsere Webseite ist nun auch On-line gegangen.</p>
<p>Sie können sich nun vorab online ein Bild von uns machen.</p>
<p>Bei Fragen können sie uns gerne anschreiben.</p>
</div><!--NEWS ENDS-->
</div><!--CONTAINER_NEWS END-->


<div class="container_show">
<img class="start" src="../images/inlay_bottom_h01.jpg" />
</div><!--CONTAINER_SHOW END-->
</div><!--MAIN_CONTENT END-->


<div id="footer_top">
    <ul class="ftr_links">
        <li>
            <a title="Startseite" href="index.html">Startseite</a>
    |
        </li>
        <li>
            <a title="wir über uns" href="about.html">Wir über uns</a>
    |
        </li>
        <li class="ftr_contact">
            <a title="So erreichen Sie uns" href="contact.html">So erreichen Sie uns</a>
    |
        </li>
        <li>
            <a title="Dienstleistungsliste" href="joblist.html">Dienstleistungsliste</a>
    |
        </li>
        <li>
            <a title="Projektliste" href="projectlist.html">Projektliste</a>
        </li>
    </ul>
</div><!--Footer_Top END-->


<div class="ftr_btm">
<div id="footer_bottom">
<p id="information">Copyright © 2010 by Manuel Meyer - Alle Rechte vorbehalten</p>
<div class="btt">
<a title="Dornröschen Wohnen" href="#header">Dornröschen Wohnen</a>
</div>
</div>
</div><!--Footer_Bottom END-->


<!--Counter-->
<script type="text/javascript" src="https://ssl4stats.de/de/counter?id=60492&amp;cntr=hide"></script>
<noscript><a href="http://www.4stats.de/" target="_blank"><img src="https://ssl4stats.de/de/stats?id=60492&amp;cntr=hide" border="0" alt="Counter" /></a></noscript>
<!--Counter END-->


<div style="clear: both;"></div>


<!-- Schatten schliessen -->
</div>
</div>
</div>
</div>
<!-- Container schliessen -->


</div>


</body>
</html>

Alles anzeigen

Code

html, body, div, span, applet, object, iframe;
h1, h2, h3, h4, h5, h6, p, blockquote, pre;
a, abbr, acronym, address, big, cite, code;
del, dfn, em, font, img, ins, kbd, q, s, samp;
small, strike, strong, sub, sup, tt, var;
dl, dt, dd, ol, ul, li;
fieldset, form, label, legend;
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}


:focus {
    outline: 0;
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}


*{
    padding:0;
    margin:0;
}


img {
border:0 none;
}


#container_show {
    height: 503px;
    position: relative;
}
#container_show img {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}
#container_show img.start {
    display: block;
}


#lightbox {    position: absolute;    left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }


#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }


#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}


#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%    ; }


#imageData{    padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }    
#imageData #caption{ font-weight: bold;    }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;    }            
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}         


#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }


body {
    font-family: times new roman, tahoma, arial, helvetica, sans-serif;
    font-size: 14px;
    color:#000000;
    margin: 0px;
    padding: 0px;
    background-color: #676767;
    background: url(../images/dwbg.jpg) fixed;
    background-position: center;
    background-repeat: repeat;
}


div#container {
    width: 820px;
    margin: 15px auto;
    text-align: left;
}


.main {
    clear: both;
    width: 820px;
}


.line_top {
    background: url(http://i47.tinypic.com/168u45f.png) no-repeat scroll left top transparent;
    padding-top: 15px;
}


.line_bottom {
    background: url(http://i47.tinypic.com/6z6dr5.png) no-repeat scroll left bottom transparent;
    padding-bottom: 20px;
}


.line_lr {
    background: url(http://i45.tinypic.com/23kc7qh.png) repeat-y transparent;
    padding: 0 0 0 10px;
}


div#header {
    position: relative;
}


div#header .header_background {
    background: url(http://i46.tinypic.com/182kqh.jpg) no-repeat scroll 0 0;
    height: 259px;
    width: 800px;
    margin: 0px;
    padding: 0px;
}


.border {
    border:0 none;
}


div#navigation {
    background-image: url(http://i48.tinypic.com/9st9pv.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
    height: 82px;
    width: 800px;
    float: left;
}


.nav_buttons li {
    font-family: times new roman, tahoma, arial, helvetica, sans-serif;
    font-weight: normal;
    font-size: 16px;
    line-height: 110px;
    float: left;
    margin-top: 1px;
}


.nav_buttons li a {
    padding-left: 55px;
    color: #eeeeee;
    height: 81px;
    text-decoration: none;
    display: block;
}


.nav_buttons li a:hover {
    color: #fff;
    height: 81px;
    text-decoration: none;
}


.nav_buttons li:hover {
    color: #fff;
    text-decoration: none;
    background-position: center -81px;
    background-repeat: no-repeat;
}


li.link_home {
    background-image: url(http://i45.tinypic.com/2powac4.jpg);
    background-repeat: no-repeat;
    height: 81px;
    width: 122px;
    margin-right: 1px;
}


li.link_about {
    background-image: url(http://i50.tinypic.com/2mq92ys.jpg);
    background-repeat: no-repeat;
    height: 81px;
    width: 152px;
    margin-right: 1px;
}


li.link_contact {
    background-image: url(http://i46.tinypic.com/2db2hau.jpg);
    background-repeat: no-repeat;
    height: 81px;
    width: 198px;
    margin-right: 1px;
}


li.link_joblist {
    background-image: url(http://i49.tinypic.com/6gimaw.jpg);
    background-repeat: no-repeat;
    height: 81px;
    width: 191px;
    margin-right: 1px;
}


li.link_projectlist {
    background-image: url(http://i46.tinypic.com/2ewpipx.jpg);
    background-repeat: no-repeat;
    height: 81px;
    width: 133px;
}


div#main_content {
    background: url(http://i45.tinypic.com/14vhb3m.jpg) repeat-x;
    background-color: #fff;
    height: 820px;
    width: 800px;
    float: left;
}


.container_news {
    background: url(http://i45.tinypic.com/2ldcc2h.jpg) no-repeat scroll 0 0;
    width: 672px;
    height: 240px;
    overflow: hidden;
    margin-top: 18px;
    margin-left: 74px;
}


.news {
    padding: 70px 75px 10px 75px;
}


.news h1 {
    font-size: 14px;
    text-align: left;
    margin-bottom: 10px;
}


.news p {
    margin-bottom: 2px;
}


.container_show {
    background: url(http://i48.tinypic.com/2gt10zb.jpg) no-repeat;
    width: 647px;
    height: 503px;
    overflow: hidden;
    margin-left: 74px;
    margin-top: 25px;
}


.container_about {
    background: url(http://i41.tinypic.com/15hlp20.jpg) no-repeat scroll 0 0;
    width: 663px;
    height: 688px;
    overflow: hidden;
    margin-top: 19px;
    margin-left: 74px;
}


.about {
    padding: 80px 80px 10px 70px;
}


.about h1 {
    font-size: 16px;
    text-align: left;
    margin-bottom: 10px;
}


.about p {
    text-align: justify;
    font-style: italic;
    margin-bottom: 5px;
}


#short {
    padding-top: 25px;
    font-weight: bold;
}


.container_contact_top {
    background: url(http://i42.tinypic.com/2j2gweq.jpg) no-repeat scroll 0 0;
    width: 648px;
    height: 225px;
    overflow: hidden;
    margin-top: 28px;
    margin-left: 74px;
}


.contact_top {
    padding: 70px 75px 10px 75px;
}


.contact_top h1 {
    font-size: 14px;
    text-align: left;
    margin-bottom: 10px;
}


.contact_top p {
    margin-bottom: 2px;
}


.container_contact {
    background: url(http://i41.tinypic.com/2naiszp.jpg) no-repeat;
    width: 650px;
    height: 501px;
    overflow: hidden;
    margin-left: 74px;
    margin-top: 25px;
}


.contact {
    padding: 70px 75px 10px 75px;
    }


.contact h1 {
    font-size: 14px;
    text-align: left;
    margin-bottom: 5px;
}


.contact p {
    margin-bottom: 5px;
}


div#footer_top {
    background: url(http://i48.tinypic.com/67kqic.jpg) no-repeat scroll left top;
    height: 110px;
    width: 800px;
    float: left;
}


ul.ftr_links {
    font-size: 13px;
    font-family: times new roman, tahoma, arial, helvetica, sans-serif;
    font-weight: normal;
    padding-top: 80px;
    text-align: center;
}




.ftr_links li {
    display: inline;
}


.ftr_links li a{
    color: #6b6b6b;
    text-decoration: none;
}


.ftr_links a:hover {
    color: #000;
    text-decoration: none;
}


div#footer_bottom {
    background: url(http://i45.tinypic.com/71tnag.jpg) no-repeat scroll left top;
    height: 64px;
    width: 800px;
    float: left;
    text-align: center;
    color: #d3d3d3;
    font-size: 9px;
    display: inline;
}


p#information {
    padding-top: 15px;
}


.btt {
    padding-top: 5px;
}


.btt a {
    font-size: 12px;
    font-weight: bold;
    color: #dc272e;
    text-decoration: none;
}


.btt a:hover {
    color: #f84d53;
    text-decoration: none;
}

Alles anzeigen

Hier noch die Javadatei für die Slideshow slideshow.js:

Code

/*****
Image Cross Fade Redux
Version 1.0
Last revision: 02.15.2006
steve@slayeroffice.com


Please leave this notice intact. 


Rewrite of old code found here: http://slayeroffice.com/code/imageCrossFade/index.html
*****/


window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);


var d=document, bilder = new Array(), zInterval = null, aktuell=0, pause=false;
bilderAnzahl=7;
bilderPfad="../images";
geschwindigkeit=1000;


function so_init() {
    if(!d.getElementById || !d.createElement)return;    

    // erstes Bild wird eingelesen
    bild = d.getElementById("slideshow").getElementsByTagName("img");
    bilder[0] = bild[0];
    bilder[0].style.display = "block";
    bilder[0].xOpacity = .99;


    bilder[1] = new Image();
    bilder[1].src = bilderPfad + "inlay_bottom_h01.jpg";
    bilder[1].xOpacity = 0;
    d.getElementById("slideshow").appendChild(bilder[1]);

    setTimeout(so_xfade,geschwindigkeit);
    neuesBild();
}


function so_xfade() {
    cOpacity = bilder[aktuell].xOpacity;
    nIndex = bilder[aktuell+1]?aktuell+1:0;
    nOpacity = bilder[nIndex].xOpacity;

    cOpacity-=.05; 
    nOpacity+=.05;

    bilder[nIndex].style.display = "block";
    bilder[aktuell].xOpacity = cOpacity;
    bilder[nIndex].xOpacity = nOpacity;

    setOpacity(bilder[aktuell]); 
    setOpacity(bilder[nIndex]);

    if(cOpacity<=0) {
        bilder[aktuell].style.display = "none";
        aktuell = nIndex;
        setTimeout(so_xfade,geschwindigkeit);
        neuesBild();
    } else {
        setTimeout(so_xfade,50);
    }

    function setOpacity(obj) {
        if(obj.xOpacity>.99) {
            obj.xOpacity = .99;
            return;
        }
        obj.style.opacity = obj.xOpacity;
        obj.style.MozOpacity = obj.xOpacity;
        obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
    }    
}


function neuesBild() {
    // immer ein Bild vorausladen
    if ( (aktuell < (bilderAnzahl-2)) && (bilder.length < bilderAnzahl) ) {
        bilder[aktuell+2] = new Image();
        bilder[aktuell+2].src =  bilderPfad + (aktuell+3) + ".jpg";
        bilder[aktuell+2].xOpacity = 0;
        d.getElementById("slideshow").appendChild(bilder[aktuell+2]);
    }
}

Alles anzeigen

Wäre für jeden Tipp und Hilfe dankbar,

Gruß Manuel

synaptic

also erstens ist java definitiv kein javascript...
und zweitens nen link zur seite wärehilfreich
und drittens, stimmt der bildpfad? stimmen die dateiendungen? (gross und kleinschreibung beachten)

stormraider

Hi,

ja sry vertippt.

Einen Link kann ich momentan nicht liefern da die Webseite noch nicht online ist-. Hoffe es geht im moment auch offline
Aber wenn die Seite online sein muss werd ich es versuchen

Bildpfad habe ich überprüft, ebenso die Endungen.

ich vermute es liegt iwie am javascript, als ob da iwas noch falsch angegeben ist oder fehlt... ist schon mein 3 Anlauf aber nie hats funktioniert.

synaptic

bild = d.getElementById("slideshow")

hier wird auf ein element zugegriffen, welches bei dir nicht existiert...!

stormraider

So, habe nun auch nochmal alles nachgeschaut...

Und voila nun funktioniert alles bestens, hab alles nochmal erneuert und umgeädnert.
So siehts nun aus und alles perfekt...

HTML

<div id="container_slideshow">
  <img alt="slide show" src="images/inlay_bottom_h01.jpg" width="647" height="503" id="slidepics">
</div>
<script type="text/javascript">
var FadeDurationMS=1000;
function SetOpacity(object,opacityPct)
{
  // IE.
  object.style.filter = 'alpha(opacity=' + opacityPct + ')';
  // Old mozilla and firefox
  object.style.MozOpacity = opacityPct/100;
  // Everything else.
  object.style.opacity = opacityPct/100;
}
function ChangeOpacity(id,msDuration,msStart,fromO,toO)
{
  var element=document.getElementById(id);
  var msNow = (new Date()).getTime();
  var opacity = fromO + (toO - fromO) * (msNow - msStart) / msDuration;
  if (opacity>=100)
  {
    SetOpacity(element,100);
    element.timer = undefined;
  }
  else if (opacity<=0)
  {
    SetOpacity(element,0);
    element.timer = undefined;
  }
  else 
  {
    SetOpacity(element,opacity);
    element.timer = window.setTimeout("ChangeOpacity('" + id + "'," + msDuration + "," + msStart + "," + fromO + "," + toO + ")",10);
  }
}
function FadeInImage(foregroundID,newImage,backgroundID)
{
  var foreground=document.getElementById(foregroundID);
  if (foreground.timer) window.clearTimeout(foreground.timer);
  if (backgroundID)
  {
    var background=document.getElementById(backgroundID);
    if (background)
    {
      if (background.src)
      {
        foreground.src = background.src; 
        SetOpacity(foreground,100);
      }
      background.src = newImage;
      background.style.backgroundImage = 'url(' + newImage + ')';
      background.style.backgroundRepeat = 'no-repeat';
      var startMS = (new Date()).getTime();
      foreground.timer = window.setTimeout("ChangeOpacity('" + foregroundID + "'," + FadeDurationMS + "," + startMS + ",100,0)",10);
    }
  } else {
    foreground.src = newImage;
  }
}
var slideCache = new Array();
function RunSlideShow(pictureID,backgroundID,imageFiles,displaySecs)
{
  var imageSeparator = imageFiles.indexOf(";");
  var nextImage = imageFiles.substring(0,imageSeparator);
  if (slideCache[nextImage] && slideCache[nextImage].loaded)
  {
    FadeInImage(pictureID,nextImage,backgroundID);
    var futureImages = imageFiles.substring(imageSeparator+1,imageFiles.length)
      + ';' + nextImage;
    setTimeout("RunSlideShow('"+pictureID+"','"+backgroundID+"','"+futureImages+"',"+displaySecs+")",
      displaySecs*1000);
    // Identify the next image to cache.
    imageSeparator = futureImages.indexOf(";");
    nextImage = futureImages.substring(0,imageSeparator);
  } else {
    setTimeout("RunSlideShow('"+pictureID+"','"+backgroundID+"','"+imageFiles+"',"+displaySecs+")",
      250);
  }
  // Cache the next image to improve performance.
  if (slideCache[nextImage] == null)
  {
    slideCache[nextImage] = new Image;
    slideCache[nextImage].loaded = false;
    slideCache[nextImage].onload = function(){this.loaded=true};
    slideCache[nextImage].src = nextImage;
  }
}
</script>
<script type="text/javascript">
RunSlideShow("slidepics","container_slideshow",
    "images/inlay_bottom_h01.jpg;images/inlay_bottom_h02.jpg;images/inlay_bottom_h03.jpg;images/inlay_bottom_h04.jpg;images/inlay_bottom_h05.jpg;images/inlay_bottom_h06.jpg;" + "images/inlay_bottom_h07.jpg",4);
</script>

Alles anzeigen

Danke für die schnellen Antworten..

Tags