Ergebnis 1 bis 12 von 12
  1. #1
    Blodyman ist offline Jungspund
    registriert
    16-03-2013
    Beiträge
    24

    Question Problem mit Bildslider

    Hi, ich hab ne kleine Frage. Ich bin totaler Anfänger, also mach das erst seit ein paar Tagen (wieder). Ich hab das vor 2 Jahren mit html und CSS schonmal ein wenig angefangen, dadurch brauchte ich nicht so lange zum einarbeiten.
    Mein Problem: ich hab keine Ahnung vom Scripten und möchte aber gerne eine Fotostrecke auf der Seite haben.
    Im Internet bin ich auf folgendes Script gestoßene (von mir angepasst), nur irgendwie funktioniert es nicht.
    Code:
    <script language="JavaScript" type="text/javascript">
    $("#slider_items").hide();
    function slider()
    {
    for(var i = 1; i <= 27; i++)
    {
                                              document.getElementById("slider_items").innerHTML = "<img src='Bilder/fotostrecke/bild_0"+i+".jpg' style='margin-top:20px;' />";
                                                                    $("#slider_items").fadeIn(2000);
    setTimeout("slider()", 5000);
    }
    }
    </script>
    Nur es werden mir keine Bilder dort angezeigt. Durch die Elementüberprüfung von meinem Browser weiß ich aber das der Container existier und das Javascript auch
    edit:
    Hier der quellcode der html und css datei:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Jeanny ichliebedich! - Startseite</title>
    <meta name="description" content="Startseite">
    <meta name="author" content="Markus">
    <link href="style.css" type="text/css" rel="stylesheet">
    </head>
    <body text="#000000" link="#FF0000" alink="#FF0000" vlink="#FF0000">
    
    <div id="kopfseiten">
    </div>
    
    <div id="kopfcenter">
     <h1 align="center">Jean - Die ist nur für dich *-*</h1>
     <h2 align="center">Ich hoffe es gefällt dir :*</h2>
     <h3 align="right">von Markus an Jean</h3>
    </div>
    
    <div id="kopfseiten">
    </div>
    
    <div id="bildseiten">
    <div class="bildlinks" id="bild1"></div><br /> <br />  <br />
    <div class="bildrechts" id="bild2"></div><br /> <br />  <br />
    <div class="bildlinks" id="bild3"></div><br /> <br />  <br />
    <div class="bildrechts" id="bild4"></div><br /> <br />  <br />
    <div class="bildlinks" id="bild5"></div><br /> <br />  <br />
    <div class="bildrechts" id="bild6"></div><br /> <br />  <br />
    <div class="bildlinks" id="bild7"></div><br /> <br />  <br />
    <div class="bildrechts" id="bild8"></div><br /> <br />  <br />
    <div class="bildlinks" id="bild9"></div><br /> <br />  <br />
    <div class="bildrechts" id="bild10"></div><br /> <br />  <br />
    <div class="bildlinks" id="bild11"></div><br /> <br />  <br />
    </div>
    
    <div id="content">
    <div id="fotostrecke">
    <script language="JavaScript" type="text/javascript">
    $("#slider_items").hide();
    function slider()
    {
    for(var i = 1; i <= 27; i++)
    {
                                              document.getElementById("slider_items").innerHTML = "<img src='Bilder/fotostrecke/bild_0"+i+".jpg' style='margin-top:20px;' />";
                                                                    $("#slider_items").fadeIn(2000);
    setTimeout("slider()", 5000);
    }
    }
    </script>
    </div>
    </div>
    
    <div id="bildseiten">
    <div class="bildrechts" id="bild12"></div><br /> <br />  <br />
    <div class="bildlinks" id="bild13"></div><br /> <br />  <br />
    <div class="bildrechts" id="bild14"></div><br /> <br />  <br />
    <div class="bildlinks" id="bild15"></div><br /> <br />  <br />
    <div class="bildrechts" id="bild16"></div><br /> <br />  <br />
    <div class="bildlinks" id="bild17"></div><br /> <br />  <br />
    <div class="bildrechts" id="bild18"></div><br /> <br />  <br />
    <div class="bildlinks" id="bild19"></div><br /> <br />  <br />
    <div class="bildrechts" id="bild20"></div><br /> <br />  <br />
    <div class="bildlinks" id="bild21"></div><br /> <br />  <br />
    <div class="bildrechts" id="bild22"></div><br /> <br />  <br />
    </div>
    
    <div id="fuß">
    </div>
    </body>
    </html>
    Code:
    html {
     height: 100%;   }
    
    body {
     height: 100%;   }
    
    
    * {
     margin: 0;
     padding: 0;
     html body    }
    
    #kopfseiten {
    
     float: left;
     height: 15%;
     width: 35%;
     background-color: #63C3F0;   }
    
    #kopfcenter {
    
     float: left;
     height: 15%;
     width: 30%;
     background-color: #63C3F0;   }
    
     /* hier beginnen die Bildstyles für links und rechts vom content */
    #bildseiten {
    
     float: left;
     height: 70%;
     width: 10%;
     background-color: #63C3F0;   }
    
    .bildlinks {
    
     display: block;
     height: 10%;
     width: 50%;;
     float: left; }
    
    .bildrechts {
    
     display: block;
     height: 10%;
     width: 50%;
     float: right; }
    
    #bild1 {
    
     background-image:url(Bilder/jean1.jpg);
     background-size: 100% 100%;   }
    
    #bild2 {
    
     background-image:url(Bilder/jean2.jpg);
     background-size: 100% 100%;   }
    
    #bild3 {
    
     background-image:url(Bilder/jean3.jpg);
     background-size: 100% 100%;   }
    
    #bild4 {
    
     background-image:url(Bilder/jean4.jpg);
     background-size: 100% 100%;   }
    
    #bild5 {
    
     background-image:url(Bilder/jean5.jpg);
     background-size: 100% 100%;   }
    
    #bild6 {
    
     background-image:url(Bilder/jean6.jpg);
     background-size: 100% 100%;   }
    
    #bild7 {
    
     background-image:url(Bilder/jean7.jpg);
     background-size: 100% 100%;   }
    
    #bild8 {
    
     background-image:url(Bilder/jean8.jpg);
     background-size: 100% 100%;   }
    
    #bild9 {
    
     background-image:url(Bilder/jean9.jpg);
     background-size: 100% 100%;   }
    
    #bild10 {
    
     background-image:url(Bilder/jean10.jpg);
     background-size: 100% 100%;   }
    
    #bild11 {
    
     background-image:url(Bilder/jean11.jpg);
     background-size: 100% 100%;   }
    
    #bild12 {
    
     background-image:url(Bilder/markus1.jpg);
     background-size: 100% 100%;   }
    
    #bild13 {
    
     background-image:url(Bilder/markus2.jpg);
     background-size: 100% 100%;   }
    
    #bild14 {
    
     background-image:url(Bilder/markus3.jpg);
     background-size: 100% 100%;   }
    
    #bild15 {
    
     background-image:url(Bilder/markus4.jpg);
     background-size: 100% 100%;   }
    
    #bild16 {
    
     background-image:url(Bilder/markus5.jpg);
     background-size: 100% 100%;   }
    
    #bild17 {
    
     background-image:url(Bilder/markus6.jpg);
     background-size: 100% 100%;   }
    
    #bild18 {
    
     background-image:url(Bilder/markus7.jpg);
     background-size: 100% 100%;   }
    
    #bild19 {
    
     background-image:url(Bilder/markus8.jpg);
     background-size: 100% 100%;   }
    
    #bild20 {
    
     background-image:url(Bilder/markus9.jpg);
     background-size: 100% 100%;   }
    
    #bild21 {
    
     background-image:url(Bilder/markus10.jpg);
     background-size: 100% 100%;   }
    
    #bild22 {
    
     background-image:url(Bilder/markus11.jpg);
     background-size: 100% 100%;   }
    
     /* Hier enden die Bildstyles */
    
     /* contentstyle */
    
    
    #content {
    
     float: left;
     height: 70%;
     width: 80%;
     background-color: #63C3F0;   }
    
    #fotostrecke {
    
     margin: 10%;
     margin-left: 25%;
     display: block;
     height: 50%;
     width: 50%;   }
    
      /* fotostrecke-buttons */
    
    #zurück {
     display: block;
     height: 8px;
     width: 15px;
     float: left;   }
    
    #anfang {
     display: block;
     height: 8px;
     width: 15px;
     float: left;   }
    
    #weiter {
     display: block;
     height: 8px;
     width: 15px;
     float: left;   }
    
     /* buttons ende */
    
     /* contentstyle ende */
    
    #fuß {
    
     clear: both;
     height: 15%;
     background-color: #63C3F0;  }
    Danke schonmal im vorraus:
    Geändert von Blodyman (16-03-2013 um 21:15 Uhr)

  2. #2
    s4ty Guest

    AW: Problem mit Bildslider

    Das von dir gefunden Script verwendet das jQuery Framework, welches du dazu herunterladen oder verlinken müsstet.

  3. #3
    Blodyman ist offline Jungspund
    registriert
    16-03-2013
    Beiträge
    24

    AW: Problem mit Bildslider

    Ist das kostenlos und was muss ich genau damit machen? Sorry, bin noch kompletter noob.
    Gibt es auch eine möglichkeit das umzusetzen ohne etwas runterladen zu müssen?

  4. #4
    s4ty Guest

    AW: Problem mit Bildslider

    Ist das kostenlos
    ja
    und was muss ich genau damit machen?
    na ganz normal als script einbinden oO
    HTML-Code:
    <script src="deinPfadZurDatei/jquery-1.9.1.min.js"></script>
    oder
    HTML-Code:
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    Bitte kopiere das nicht einfach sondern analysiere es und probier zu verstehen was ich dort verlinke


    Gibt es auch eine möglichkeit das umzusetzen ohne etwas runterladen zu müssen?
    Natürlich, schließlich ist jQuery auch nur auf normalen JavaScript aufgebaut...


    Aber reines JS, ins besondere bei Animationen, tue ich mir schon lange nicht mehr an, da muss dir jemand anderes helfen.

  5. #5
    Blodyman ist offline Jungspund
    registriert
    16-03-2013
    Beiträge
    24

    AW: Problem mit Bildslider

    Danke für die schnelle Antwort. Ich glaub ich versteh das schon. Der script bindet einfach nur den Script von der jquery Seite bei mir mit ein. Rein theoretisch müsste ich das dann auf alle Seiten schreiben auf den ich Scripts mit JQuery benutze.
    Nur muss ich das jetzt direkt in den Script schreiben oder einfach so wies da steht in den Header?
    Ich hab jetzt beides ausprobiert, aber es funktioniert nicht. Ich weiß nicht ob ich zu doof dafür bin, aber schein fast so

    edit:
    Also jetzt hab ichs so, aber funktioniert nicht, also ich hab aus auprobiert im header den Script von dir und den Script über meinen slide. funktioniert alles nicht.
    Code:
    <script src="JQuery/jquery-1.9.1.min.js" language="JavaScript" type="text/javascript">
    $("#slider_items").hide();
    function slider()
    {
    for(var i = 1; i <= 27; i++)
    {
                                              document.getElementById("slider_items").innerHTML = "<img src='Bilder/fotostrecke/bild_"+i+".jpg' style='margin-top:20px;' />";
                                                                    $("#slider_items").fadeIn(2000);
    setTimeout("slider()", 5000);
    }
    }
    </script>
    Geändert von Blodyman (16-03-2013 um 22:13 Uhr)

  6. #6
    Sempervivum ist offline Banned
    registriert
    11-12-2012
    Beiträge
    555

    AW: Problem mit Bildslider

    Ich bezweifle, dass dieser Slider funktionieren kann. Wo hast du den denn her? Sieh dir lieber mal das jQuery-Cycle-Plugin an:
    JQuery Cycle Plugin

  7. #7
    Blodyman ist offline Jungspund
    registriert
    16-03-2013
    Beiträge
    24

    AW: Problem mit Bildslider

    Weiß ich garnicht mehr, hab einfach nach nem Fotostrecken-Script im internet gegooglet. Dort war der auch. Ich versteh vom Scripten nicht viel, ich will jetzt demnächst mal mit PHP anfangen, hab auch nen schickes buch für einsteiger hier. Aber erstmal wollt ich meine "Kenntnisse" in HTML und CSS nochmal auffrischen.

    Ich werds mir mal angucken. Danke

  8. #8
    s4ty Guest

    AW: Problem mit Bildslider

    So bringt das nichts...du verstehst die Grundlagen nicht, Gott ich weis gar nicht wo ich da anfangen soll.^^


    Die Funktion slider() wird niemals aufgerufen, deswegen passiert auch nichts...selbst wenn gibt es eh kein Element mit der ID #slider_items...verstehst du überhaupt was diese Funktion macht?
    Sie sorgt dafür das ein Bild in das Element mit der ID slider_items geschrieben wird und dann langsam eingeblendet wird, dieser Vorgang wird 26 ausgeführt mit einer Verzögerung von 5 Sekunden.

    Es ist überhaupt das was du suchst? Ein Bild alle paar Sekunden zu wechseln?
    Geändert von s4ty (16-03-2013 um 22:31 Uhr)

  9. #9
    Blodyman ist offline Jungspund
    registriert
    16-03-2013
    Beiträge
    24

    AW: Problem mit Bildslider

    Hmm, naja das mit dem reinschreiben und warum die Funktion slider() nich aufgerufen wird weiß ich nicht
    Aber es ist genau das was ich will
    Ich versuchs gerade mit dem cyrcle plugin, was aber noch nich funktioniert, aber ich glaub da mach ich einfach nur nen fehler in der Reihenfolge :P

    edit:
    Gut ich bekomms nit auf die Reihe xD sorry das ich so nerve, aber ich muss das in 2 wochen alles fertig, also die komplette Seite mit allem drum und dran. Die Seite soll eine Art Überraschung für meine Freundin sein, weil wir am 28. unser Halbjähriges feiern.
    HTML:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Jeanny ichliebedich! - Startseite</title>
    <meta name="description" content="Startseite">
    <meta name="author" content="Markus">
    <link href="style.css" type="text/css" rel="stylesheet">
    <script language="javascript" type="text/javascript" src="JQuary/jquery-1.9.1.min.js"></script>
    <script language="javascript" type="text/javascript" src="JQuary/jquery.cycle.all.js">
    <script language="javascript" type="text/javascript" src="JQuary/fotostrecke.js"></script>
    </head>
    <body text="#000000" link="#FF0000" alink="#FF0000" vlink="#FF0000">
    
    <div id="kopfseiten">
    </div>
    
    <div id="kopfcenter">
     <h1 align="center">Jean - Die ist nur für dich *-*</h1>
     <h2 align="center">Ich hoffe es gefällt dir :*</h2>
     <h3 align="right">von Markus an Jean</h3>
    </div>
    
    <div id="kopfseiten">
    </div>
    
    <div id="bildseiten">
    <div class="bildlinks" id="bild1"></div><br /> <br />  <br />
    <div class="bildrechts" id="bild2"></div><br /> <br />  <br />
    <div class="bildlinks" id="bild3"></div><br /> <br />  <br />
    <div class="bildrechts" id="bild4"></div><br /> <br />  <br />
    <div class="bildlinks" id="bild5"></div><br /> <br />  <br />
    <div class="bildrechts" id="bild6"></div><br /> <br />  <br />
    <div class="bildlinks" id="bild7"></div><br /> <br />  <br />
    <div class="bildrechts" id="bild8"></div><br /> <br />  <br />
    <div class="bildlinks" id="bild9"></div><br /> <br />  <br />
    <div class="bildrechts" id="bild10"></div><br /> <br />  <br />
    <div class="bildlinks" id="bild11"></div><br /> <br />  <br />
    </div>
    
    <div id="content">
    <div id="fotostrecke">
    <ul class="fotostrecke">
    <li><img src="Bilder/fotostrecke/bild_1.JPG" width="100%" height="100%" alt="bild_1" /></li>
    <li><img src="Bilder/fotostrecke/bild_2.JPG" width="100%" height="100%" alt="bild_2" /></li>
    <li><img src="Bilder/fotostrecke/bild_3.JPG" width="100%" height="100%" alt="bild_3" /></li>
    <li><img src="Bilder/fotostrecke/bild_4.JPG" width="100%" height="100%" alt="bild_4" /></li>
    <li><img src="Bilder/fotostrecke/bild_5.JPG" width="100%" height="100%" alt="bild_5" /></li>
    <li><img src="Bilder/fotostrecke/bild_6.JPG" width="100%" height="100%" alt="bild_6" /></li>
    <li><img src="Bilder/fotostrecke/bild_7.JPG" width="100%" height="100%" alt="bild_7" /></li>
    <li><img src="Bilder/fotostrecke/bild_8.JPG" width="100%" height="100%" alt="bild_8" /></li>
    <li><img src="Bilder/fotostrecke/bild_9.JPG" width="100%" height="100%" alt="bild_9" /></li>
    <li><img src="Bilder/fotostrecke/bild_10.JPG" width="100%" height="100%" alt="bild_10" /></li>
    <li><img src="Bilder/fotostrecke/bild_11.JPG" width="100%" height="100%" alt="bild_11" /></li>
    <li><img src="Bilder/fotostrecke/bild_12.JPG" width="100%" height="100%" alt="bild_12" /></li>
    <li><img src="Bilder/fotostrecke/bild_13.JPG" width="100%" height="100%" alt="bild_13" /></li>
    <li><img src="Bilder/fotostrecke/bild_14.JPG" width="100%" height="100%" alt="bild_14" /></li>
    <li><img src="Bilder/fotostrecke/bild_15.JPG" width="100%" height="100%" alt="bild_15" /></li>
    <li><img src="Bilder/fotostrecke/bild_16.JPG" width="100%" height="100%" alt="bild_16" /></li>
    <li><img src="Bilder/fotostrecke/bild_17.JPG" width="100%" height="100%" alt="bild_17" /></li>
    <li><img src="Bilder/fotostrecke/bild_18.JPG" width="100%" height="100%" alt="bild_18" /></li>
    <li><img src="Bilder/fotostrecke/bild_19.JPG" width="100%" height="100%" alt="bild_19" /></li>
    <li><img src="Bilder/fotostrecke/bild_20.JPG" width="100%" height="100%" alt="bild_20" /></li>
    <li><img src="Bilder/fotostrecke/bild_21.JPG" width="100%" height="100%" alt="bild_21" /></li>
    <li><img src="Bilder/fotostrecke/bild_22.JPG" width="100%" height="100%" alt="bild_22" /></li>
    <li><img src="Bilder/fotostrecke/bild_23.JPG" width="100%" height="100%" alt="bild_23" /></li>
    <li><img src="Bilder/fotostrecke/bild_24.JPG" width="100%" height="100%" alt="bild_24" /></li>
    <li><img src="Bilder/fotostrecke/bild_25.JPG" width="100%" height="100%" alt="bild_25" /></li>
    <li><img src="Bilder/fotostrecke/bild_26.JPG" width="100%" height="100%" alt="bild_26" /></li>
    <li><img src="Bilder/fotostrecke/bild_27.JPG" width="100%" height="100%" alt="bild_27" /></li>
    </ul>
    </div>
    </div>
    
    <div id="bildseiten">
    <div class="bildrechts" id="bild12"></div><br /> <br />  <br />
    <div class="bildlinks" id="bild13"></div><br /> <br />  <br />
    <div class="bildrechts" id="bild14"></div><br /> <br />  <br />
    <div class="bildlinks" id="bild15"></div><br /> <br />  <br />
    <div class="bildrechts" id="bild16"></div><br /> <br />  <br />
    <div class="bildlinks" id="bild17"></div><br /> <br />  <br />
    <div class="bildrechts" id="bild18"></div><br /> <br />  <br />
    <div class="bildlinks" id="bild19"></div><br /> <br />  <br />
    <div class="bildrechts" id="bild20"></div><br /> <br />  <br />
    <div class="bildlinks" id="bild21"></div><br /> <br />  <br />
    <div class="bildrechts" id="bild22"></div><br /> <br />  <br />
    </div>
    
    <div id="fuß">
    </div>
    </body>
    </html>
    CSS:
    Code:
    html {
     height: 100%;   }
    
    body {
     height: 100%;   }
    
    
    * {
     margin: 0;
     padding: 0;
     html body    }
    
    #kopfseiten {
    
     float: left;
     height: 15%;
     width: 35%;
     background-color: #63C3F0;   }
    
    #kopfcenter {
    
     float: left;
     height: 15%;
     width: 30%;
     background-color: #63C3F0;   }
    
     /* hier beginnen die Bildstyles für links und rechts vom content */
    #bildseiten {
    
     float: left;
     height: 70%;
     width: 10%;
     background-color: #63C3F0;   }
    
    .bildlinks {
    
     display: block;
     height: 10%;
     width: 50%;;
     float: left; }
    
    .bildrechts {
    
     display: block;
     height: 10%;
     width: 50%;
     float: right; }
    
    #bild1 {
    
     background-image:url(Bilder/jean1.jpg);
     background-size: 100% 100%;   }
    
    #bild2 {
    
     background-image:url(Bilder/jean2.jpg);
     background-size: 100% 100%;   }
    
    #bild3 {
    
     background-image:url(Bilder/jean3.jpg);
     background-size: 100% 100%;   }
    
    #bild4 {
    
     background-image:url(Bilder/jean4.jpg);
     background-size: 100% 100%;   }
    
    #bild5 {
    
     background-image:url(Bilder/jean5.jpg);
     background-size: 100% 100%;   }
    
    #bild6 {
    
     background-image:url(Bilder/jean6.jpg);
     background-size: 100% 100%;   }
    
    #bild7 {
    
     background-image:url(Bilder/jean7.jpg);
     background-size: 100% 100%;   }
    
    #bild8 {
    
     background-image:url(Bilder/jean8.jpg);
     background-size: 100% 100%;   }
    
    #bild9 {
    
     background-image:url(Bilder/jean9.jpg);
     background-size: 100% 100%;   }
    
    #bild10 {
    
     background-image:url(Bilder/jean10.jpg);
     background-size: 100% 100%;   }
    
    #bild11 {
    
     background-image:url(Bilder/jean11.jpg);
     background-size: 100% 100%;   }
    
    #bild12 {
    
     background-image:url(Bilder/markus1.jpg);
     background-size: 100% 100%;   }
    
    #bild13 {
    
     background-image:url(Bilder/markus2.jpg);
     background-size: 100% 100%;   }
    
    #bild14 {
    
     background-image:url(Bilder/markus3.jpg);
     background-size: 100% 100%;   }
    
    #bild15 {
    
     background-image:url(Bilder/markus4.jpg);
     background-size: 100% 100%;   }
    
    #bild16 {
    
     background-image:url(Bilder/markus5.jpg);
     background-size: 100% 100%;   }
    
    #bild17 {
    
     background-image:url(Bilder/markus6.jpg);
     background-size: 100% 100%;   }
    
    #bild18 {
    
     background-image:url(Bilder/markus7.jpg);
     background-size: 100% 100%;   }
    
    #bild19 {
    
     background-image:url(Bilder/markus8.jpg);
     background-size: 100% 100%;   }
    
    #bild20 {
    
     background-image:url(Bilder/markus9.jpg);
     background-size: 100% 100%;   }
    
    #bild21 {
    
     background-image:url(Bilder/markus10.jpg);
     background-size: 100% 100%;   }
    
    #bild22 {
    
     background-image:url(Bilder/markus11.jpg);
     background-size: 100% 100%;   }
    
     /* Hier enden die Bildstyles */
    
     /* contentstyle */
    
    
    #content {
    
     float: left;
     height: 70%;
     width: 80%;
     background-color: #63C3F0;   }
    
    #fotostrecke {
    
     margin: 10%;
     margin-left: 25%;
     display: block;
     height: 50%;
     width: 50%;   }
    
    .fotostrecke {
    
     margin: 0;
     display: block;
     height: 100%;
     width: 100%;   }
    
     /* contentstyle ende */
    
    #fuß {
    
     clear: both;
     height: 15%;
     background-color: #63C3F0;  }
    fotostrecke.js:
    Code:
    // fotostrecke.js
    $(document).ready(init);
    
    function init() {
            $(".fotostrecke").cycle();
    }
    Die Bilder sind im Ordner Bilder/fotostrecke/bild_1 mit fortlaufender Zahl
    Die JQuery scripts im ordner JQuery, dort ist auch die fotostrecke.js
    Die Anleitung hab ich von: http://digitalunion.osu.edu/2011/10/...ttle-tutorial/
    Mein Problem: Die gesamte Aufzählung wird untereinander angezeigt. Is ja klar, weils ne Liste ist. Aber durch das Script sollte es ja nacheinander eingeblendet werden...^^

    Ich verzweifel ein wenig hier ^^ bitte dringends um Hilfe
    Geändert von Blodyman (16-03-2013 um 23:16 Uhr)

  10. #10
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: Problem mit Bildslider

    Stimmen die Bildpfade?
    Du hast den Ordner tatsächlich JQuary genannt?

  11. #11
    Blodyman ist offline Jungspund
    registriert
    16-03-2013
    Beiträge
    24

    AW: Problem mit Bildslider

    Ja, exakt mit Groß- und Kleinschreibung. Hab den Tippfehler jetzt auch bemerkt, und in JQuery geändert, also den Ordnernamen und im Pfad bei den Scripts auch JQuery geschrieben. Aber immer noch das gleiche Problem.
    Geändert von Blodyman (16-03-2013 um 23:41 Uhr)

  12. #12
    Blodyman ist offline Jungspund
    registriert
    16-03-2013
    Beiträge
    24

    AW: Problem mit Bildslider

    OMG XDDDDDDDD Es hat funktioniert ^^ Ich hab den dümmsten Fehler der Menschheitsgeschichte begangen.... ^^ Guckt mal in die Zeile mit den Scripts.... Fällt euch auf das da was Fehlt? ^^ der endtag vom 2. script reingemacht und es hat funktioniert jetzt sieht der code so aus, falls das irgendwer mal nachmachen will: achja und in der Anleitung steht das auch ohne </script> dort.
    HTML:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Jeanny ichliebedich! - Startseite</title>
    <meta name="description" content="Startseite">
    <meta name="author" content="Markus">
    <link href="style.css" type="text/css" rel="stylesheet">
    <script language="javascript" type="text/javascript" src="JQuery/jquery-1.9.1.min.js"></script>
    <script language="javascript" type="text/javascript" src="JQuery/jquery.cycle.all.js"></script>
    <script language="javascript" type="text/javascript" src="JQuery/fotostrecke.js"></script>
    </head>
    <body text="#000000" link="#FF0000" alink="#FF0000" vlink="#FF0000">
    
    <div id="kopfseiten">
    </div>
    
    <div id="kopfcenter">
     <h1 align="center">Jean - Die ist nur für dich *-*</h1>
     <h2 align="center">Ich hoffe es gefällt dir :*</h2>
     <h3 align="right">von Markus an Jean</h3>
    </div>
    
    <div id="kopfseiten">
    </div>
    
    <div id="bildseiten">
    <div class="bildlinks" id="bild1"></div><br /> <br />  <br />
    <div class="bildrechts" id="bild2"></div><br /> <br />  <br />
    <div class="bildlinks" id="bild3"></div><br /> <br />  <br />
    <div class="bildrechts" id="bild4"></div><br /> <br />  <br />
    <div class="bildlinks" id="bild5"></div><br /> <br />  <br />
    <div class="bildrechts" id="bild6"></div><br /> <br />  <br />
    <div class="bildlinks" id="bild7"></div><br /> <br />  <br />
    <div class="bildrechts" id="bild8"></div><br /> <br />  <br />
    <div class="bildlinks" id="bild9"></div><br /> <br />  <br />
    <div class="bildrechts" id="bild10"></div><br /> <br />  <br />
    <div class="bildlinks" id="bild11"></div><br /> <br />  <br />
    </div>
    
    <div id="content">
    <ul class="fotostrecke">
    <li><img src="Bilder/fotostrecke/bild_1.JPG" width="100%" height="100%" alt="bild_1" /></li>
    <li><img src="Bilder/fotostrecke/bild_2.JPG" width="100%" height="100%" alt="bild_2" /></li>
    <li><img src="Bilder/fotostrecke/bild_3.JPG" width="100%" height="100%" alt="bild_3" /></li>
    <li><img src="Bilder/fotostrecke/bild_4.JPG" width="100%" height="100%" alt="bild_4" /></li>
    <li><img src="Bilder/fotostrecke/bild_5.JPG" width="100%" height="100%" alt="bild_5" /></li>
    <li><img src="Bilder/fotostrecke/bild_6.JPG" width="100%" height="100%" alt="bild_6" /></li>
    <li><img src="Bilder/fotostrecke/bild_7.JPG" width="100%" height="100%" alt="bild_7" /></li>
    <li><img src="Bilder/fotostrecke/bild_8.JPG" width="100%" height="100%" alt="bild_8" /></li>
    <li><img src="Bilder/fotostrecke/bild_9.JPG" width="100%" height="100%" alt="bild_9" /></li>
    <li><img src="Bilder/fotostrecke/bild_10.JPG" width="100%" height="100%" alt="bild_10" /></li>
    <li><img src="Bilder/fotostrecke/bild_11.JPG" width="100%" height="100%" alt="bild_11" /></li>
    <li><img src="Bilder/fotostrecke/bild_12.JPG" width="100%" height="100%" alt="bild_12" /></li>
    <li><img src="Bilder/fotostrecke/bild_13.JPG" width="100%" height="100%" alt="bild_13" /></li>
    <li><img src="Bilder/fotostrecke/bild_14.JPG" width="100%" height="100%" alt="bild_14" /></li>
    <li><img src="Bilder/fotostrecke/bild_15.JPG" width="100%" height="100%" alt="bild_15" /></li>
    <li><img src="Bilder/fotostrecke/bild_16.JPG" width="100%" height="100%" alt="bild_16" /></li>
    <li><img src="Bilder/fotostrecke/bild_17.JPG" width="100%" height="100%" alt="bild_17" /></li>
    <li><img src="Bilder/fotostrecke/bild_18.JPG" width="100%" height="100%" alt="bild_18" /></li>
    <li><img src="Bilder/fotostrecke/bild_19.JPG" width="100%" height="100%" alt="bild_19" /></li>
    <li><img src="Bilder/fotostrecke/bild_20.JPG" width="100%" height="100%" alt="bild_20" /></li>
    <li><img src="Bilder/fotostrecke/bild_21.JPG" width="100%" height="100%" alt="bild_21" /></li>
    <li><img src="Bilder/fotostrecke/bild_22.JPG" width="100%" height="100%" alt="bild_22" /></li>
    <li><img src="Bilder/fotostrecke/bild_23.JPG" width="100%" height="100%" alt="bild_23" /></li>
    <li><img src="Bilder/fotostrecke/bild_24.JPG" width="100%" height="100%" alt="bild_24" /></li>
    <li><img src="Bilder/fotostrecke/bild_25.JPG" width="100%" height="100%" alt="bild_25" /></li>
    <li><img src="Bilder/fotostrecke/bild_26.JPG" width="100%" height="100%" alt="bild_26" /></li>
    <li><img src="Bilder/fotostrecke/bild_27.JPG" width="100%" height="100%" alt="bild_27" /></li>
    </ul>
    </div>
    
    <div id="bildseiten">
    <div class="bildrechts" id="bild12"></div><br /> <br />  <br />
    <div class="bildlinks" id="bild13"></div><br /> <br />  <br />
    <div class="bildrechts" id="bild14"></div><br /> <br />  <br />
    <div class="bildlinks" id="bild15"></div><br /> <br />  <br />
    <div class="bildrechts" id="bild16"></div><br /> <br />  <br />
    <div class="bildlinks" id="bild17"></div><br /> <br />  <br />
    <div class="bildrechts" id="bild18"></div><br /> <br />  <br />
    <div class="bildlinks" id="bild19"></div><br /> <br />  <br />
    <div class="bildrechts" id="bild20"></div><br /> <br />  <br />
    <div class="bildlinks" id="bild21"></div><br /> <br />  <br />
    <div class="bildrechts" id="bild22"></div><br /> <br />  <br />
    </div>
    
    <div id="fuß">
    </div>
    </body>
    </html>
    css:
    Code:
    html {
     height: 100%;   }
    
    body {
     height: 100%;   }
    
    
    * {
     margin: 0;
     padding: 0;
     html body    }
    
    #kopfseiten {
    
     float: left;
     height: 15%;
     width: 35%;
     background-color: #63C3F0;   }
    
    #kopfcenter {
    
     float: left;
     height: 15%;
     width: 30%;
     background-color: #63C3F0;   }
    
     /* hier beginnen die Bildstyles für links und rechts vom content */
    #bildseiten {
    
     float: left;
     height: 70%;
     width: 10%;
     background-color: #63C3F0;   }
    
    .bildlinks {
    
     display: block;
     height: 10%;
     width: 50%;;
     float: left; }
    
    .bildrechts {
    
     display: block;
     height: 10%;
     width: 50%;
     float: right; }
    
    #bild1 {
    
     background-image:url(Bilder/jean1.jpg);
     background-size: 100% 100%;   }
    
    #bild2 {
    
     background-image:url(Bilder/jean2.jpg);
     background-size: 100% 100%;   }
    
    #bild3 {
    
     background-image:url(Bilder/jean3.jpg);
     background-size: 100% 100%;   }
    
    #bild4 {
    
     background-image:url(Bilder/jean4.jpg);
     background-size: 100% 100%;   }
    
    #bild5 {
    
     background-image:url(Bilder/jean5.jpg);
     background-size: 100% 100%;   }
    
    #bild6 {
    
     background-image:url(Bilder/jean6.jpg);
     background-size: 100% 100%;   }
    
    #bild7 {
    
     background-image:url(Bilder/jean7.jpg);
     background-size: 100% 100%;   }
    
    #bild8 {
    
     background-image:url(Bilder/jean8.jpg);
     background-size: 100% 100%;   }
    
    #bild9 {
    
     background-image:url(Bilder/jean9.jpg);
     background-size: 100% 100%;   }
    
    #bild10 {
    
     background-image:url(Bilder/jean10.jpg);
     background-size: 100% 100%;   }
    
    #bild11 {
    
     background-image:url(Bilder/jean11.jpg);
     background-size: 100% 100%;   }
    
    #bild12 {
    
     background-image:url(Bilder/markus1.jpg);
     background-size: 100% 100%;   }
    
    #bild13 {
    
     background-image:url(Bilder/markus2.jpg);
     background-size: 100% 100%;   }
    
    #bild14 {
    
     background-image:url(Bilder/markus3.jpg);
     background-size: 100% 100%;   }
    
    #bild15 {
    
     background-image:url(Bilder/markus4.jpg);
     background-size: 100% 100%;   }
    
    #bild16 {
    
     background-image:url(Bilder/markus5.jpg);
     background-size: 100% 100%;   }
    
    #bild17 {
    
     background-image:url(Bilder/markus6.jpg);
     background-size: 100% 100%;   }
    
    #bild18 {
    
     background-image:url(Bilder/markus7.jpg);
     background-size: 100% 100%;   }
    
    #bild19 {
    
     background-image:url(Bilder/markus8.jpg);
     background-size: 100% 100%;   }
    
    #bild20 {
    
     background-image:url(Bilder/markus9.jpg);
     background-size: 100% 100%;   }
    
    #bild21 {
    
     background-image:url(Bilder/markus10.jpg);
     background-size: 100% 100%;   }
    
    #bild22 {
    
     background-image:url(Bilder/markus11.jpg);
     background-size: 100% 100%;   }
    
     /* Hier enden die Bildstyles */
    
     /* contentstyle */
    
    
    #content {
    
     float: left;
     height: 70%;
     width: 80%;
     background-color: #63C3F0;   }
    
    .fotostrecke {
    
     margin: 10%;
     margin-left: 25%;
     display: block;
     height: 50%;
     width: 50%;  }
    
     /* contentstyle ende */
    
    #fuß {
    
     clear: both;
     height: 15%;
     background-color: #63C3F0;  }
    fotostrecke.js
    Code:
    // slideshow.js
    $(document).ready(init);
    
    function init() {
            $(".fotostrecke").cycle();
    }

Ähnliche Themen

  1. Antworten: 5
    Letzter Beitrag: 05-05-2012, 01:36
  2. mootool problem (javascript problem?)
    Von cool-tool im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 14-02-2009, 18:06

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •