Antworten auf deine Fragen:
Neues Thema erstellen

Slideshow (javascript) Tutorial funktioniert nicht mit CSS, was tun?

Lanariel

Nicht mehr ganz neu hier

Hallo erstmal :)

Mal wieder habe ich leider ein Problem was den Code einer Homepage betrifft. Ich wollte mal etwas Neues ausprobieren und im Head das Bild durch mehrere Bilder in einer Slideshow darstellen. Nun habe ich alles mögliche ausprobiert und es funktioniert einfach nicht. Ich würde mich freuen, wenn vielleicht jemand, der sich damit auskennt mal kurz über den Code schauen würde. Im Voraus schonmal vielen Dank dafür.

Im Grunde hat der Code von diesem Tutorial:

auch einwandfrei funktioniert, sofern ich ihn nicht mit CSS kombiniere.

Jetzt ist aber meine Homepage mit CSS aufgebaut und ich bekomme diese Slideshow einfach nicht in den Head. Habe versucht die Class mit der ID zu kombinieren und auch einen Teil des Codes direkt in den head Container reinzuschreiben aber nichts funktioniert. Zur Zeit sieht mein Code so aus:

Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Räumliches Inszenieren mit Medien // Dokumentation</title> 

<style type="text/css">
     .slideshow img { padding: 0px; border: 0px solid #000; background-color: #fff; }    <!--  padding und border (Rahmen) eurer Bilder  --> 
</style>


<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
 
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>
 
<!--  initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {
     $('.slideshow').cycle({
 
          fx: 'fade' // Wählt hier einen Übergang, zB: fade, shuffle, zoom, turnDown, curtainX, etc.
 
     });
});
</script>
<style type="text/css" media="screen">
    body
    {
        margin: 0;
        padding: 0;
        font: 85% arial, hevetica, sans-serif;
        text-align: center;
        color: #4b4b4d;
        background-color: #4b4b4d;
        background-image:url(images/background.jpg);
        background-position: center top;
        background-repeat:no-repeat;
        
        font-family: Verdana, Helvetica, sans-serif;
        color: white;
        font-size: 12px;
        line-height: 1.8;

    }
    
    #container
    {
        margin: 0em auto;
        width: 800px;
        text-align: left;
        background-color: #363636;
        background-image:url(images/back-big.jpg);
        background-repeat:no-repeat;



    }
    
    #header
    {
        height: 312px;
        background-color: #4b4b4d;
    }
    
    #mainnav
    {
        height: 35px;
        background-color: #4b4b4d;

    }
    
    #contents    
    {
        margin-right: 24px;
        margin-left: 24px;
        margin-top: 31px;
        background-color: #363636;
        background-image:url(images/back-content-mitte.jpg);
        background-repeat:repeat-x;


    }
    
    #footer    
    {
        clear: both;
        height: 100px;
        background-color: #363636;
    }
    
a:link {
    color: #FF99CC;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #B32B69;
}
a:hover {
    text-decoration: none;
    color: #FFCCFF;
}
a:active {
    text-decoration: none;
    color: #FF99CC;
}

.Stil1 {color: #e35d92}

</style>

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head><body onLoad="MM_preloadImages('images/projekte-h.gif','images/videos-h.gif','images/fotos-h.gif','images/impressum-h.gif')">


<div id="container">
<div id="header" class=".slideshow">
     <img src="images/header1.jpg" width="800" height="312"/>
     <img src="images/header2.jpg" width="800" height="312"/>
     <img src="images/header3.jpg" width="800" height="312"/>
     <img src="images/header4.jpg" width="800" height="312"/>
</div> 
    <div id="mainnav">
    <a href="projekte.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Projekte','','images/projekte-h.gif',1)"><img src="images/projekte.gif" alt="projekte" name="Projekte" width="126" height="35" border="0"></a><a href="videos.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Videos','','images/videos-h.gif',1)"><img src="images/videos.gif" alt="videos" name="Videos" width="98" height="35" border="0"></a><a href="fotos.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Fotos','','images/fotos-h.gif',1)"><img src="images/fotos.gif" alt="fotos" name="Fotos" width="90" height="35" border="0"></a><a href="impressum.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Impressum','','images/impressum-h.gif',1)"><img src="images/impressum.gif" alt="impressum" name="Impressum" width="132" height="35" border="0"></a><img src="images/leiste.gif" height="35"></div>

Was mache ich denn falsch?
 

cebito

undefined

AW: Slideshow (javascript) Tutorial funktioniert nicht mit CSS, was tun?

Bist du sicher, das es am CSS liegt? Ich glaube eher, das es an der Verwendung von jQuery UND prototype in einem Dokument liegt... http://docs.jquery.com/Using_jQuery_with_Other_Libraries
Und, es wäre besser, wenn du dein Problem irgendwo online stellst und den Link hier postest, das würde die Fehlersuche um einiges vereinfachen.
 

Lanariel

Nicht mehr ganz neu hier

AW: Slideshow (javascript) Tutorial funktioniert nicht mit CSS, was tun?

Hier ist der Link der Seite:

(statt abzuwechseln erscheinen die 4 Bilder nun untereinander)

OK, natürlich kann es sein, dass das Problem auch woanders liegt. Ich bin auf dem Gebiet leider nicht so gut bewandert um genau sagen zu können wo der Fehler ist (leider).

Wenn es eine bessere Lösung gibt, wäre ich für die natürlich genauso dankbar. Ist es denn generell überhaupt möglich nach diesem Tutorial die Slidebar in den Head zu bekommen?
 

cebito

undefined

AW: Slideshow (javascript) Tutorial funktioniert nicht mit CSS, was tun?

Du solltest unbedingt mal validieren, als erstes auch mal einen Doctype vergeben... Zum Problem, du vergibst die Klasse falsch
HTML:
<div id="header" class=".slideshow">
sollte eher so aussehen
HTML:
<div id="header" class="slideshow">
(OHNE Punkt), deshalb sagt die FF-Fehlerkonsole auch
Fehler: $(".slideshow") is null
Quelldatei:
Zeile: 20
 
Zuletzt bearbeitet:

Lanariel

Nicht mehr ganz neu hier

AW: Slideshow (javascript) Tutorial funktioniert nicht mit CSS, was tun?

Habe den Punkt entfernt. Die Slideshow funktioniert leider immer noch nicht :(
 

Lanariel

Nicht mehr ganz neu hier

AW: Slideshow (javascript) Tutorial funktioniert nicht mit CSS, was tun?

Um ehrlich zu sein verstehe ich bei dem Link gar nicht genau was ich an welche Stelle einbauen soll, damit das nun funktioniert. Ich hab zwar den Code kopiert und nochmal eingefügt, aber es geht leider immer noch nicht :(

Leider kann ich nicht skripten. Es wäre trotzdem toll, wenn mir vielleicht jemand sagen könnte was ich genau an welcher Stelle im Code einfügen kann, damit es funktioniert.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.636
Beiträge
1.538.484
Mitglieder
67.559
Neuestes Mitglied
hanuta
Oben