Ich bin am umbauen!

HTML

hey wie gehts?

CSS

hey wie gehts?
hey wie gehts?

Bildslider mit jQuery

→ Bildslidervorschau

 

1. Als erstes müsst ihr den HEAD Teil einfügen (das ist de Teil, wo die CSS und Javascript Codes reinkommen, also das, was man später nicht sieht aber dafür da ist, dass alles funktioniert)

 

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://sienc.square7.ch/jQuery/js/slider.js"></script>

<style type="text/css">
/** Layout by sienc **/

/** Programming and Coding by Jacob Cube (http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/)**/

/******************Slideshowcontainer******************/

#slideshow {
margin:0 auto;
width:920px;   /**Breite der Bilder um 170px addieren**/
height:498px;
background:none;
position:relative;
}

/**Height und Width müssen gleichgroß wie die Bilder sein**/

#slideshow #slidesContainer {
margin:0 auto;
width:750px;    /**Breite der Bilder**/
height:498px;    /**Höhe der Bilder**/
background:url(http://sienc.square7.ch/schwarz15.png) repeat;
-moz-box-shadow:black 0px 0px 15px;
position:relative;
}

#slideshow #slidesContainer:hover {
cursor:pointer;
}

/******************Arrows******************/

.control {
display:block;
width:58px;
height:71px;
text-indent:-10000px;
position:absolute;
cursor: pointer;
}

#leftControl {
top:100px;
left:0;
background:transparent url(http://sienc.square7.ch/jQuery/Slider/images/control_left.png) no-repeat 0 0;
width:58px;
height:71px;

}
#leftControl:hover{
top:100px;
left:0;
background:transparent url(http://sienc.square7.ch/jQuery/Slider/images/control_left.png) no-repeat 0 0;
background-position: 0 -71px;
width:58px;
height:71px;

}

#rightControl {
top:100px;
right:0;
background:transparent url(http://sienc.square7.ch/jQuery/Slider/images/control_right.png) no-repeat 0 0;
width:58px;
height:71px;

}
#rightControl:hover{
top:100px;
right:0;
background:transparent url(http://sienc.square7.ch/jQuery/Slider/images/control_right.png) no-repeat 0 0;
background-position: 0 -71px;
width:58px;
height:71px;
}

/******************Linkstyle******************/

:focus { outline: 0; }

/******************Background******************/

body{background:url(http://sienc.square7.ch/rauschenhintergrund.png) repeat;}
</style>
</head>

die rot gekennzeichneten Höhen und Breiten könnt ihr verändern

wichtig dabei!: Width und Height müssen gleich groß wie die Bilder sein die ihr später einfügt

 

2. Sucht euch eine gemeinsame Größe all eure Bilder aus, die ihr einfügen wollt (bei mir width:750px; height:498px;)

 

3. schreibt eure Größe (Höhe und Breite) bei #slideshow #slidesContainer hinein

 

4. eure Breite (height) müsst ihr bei #slideshow um 120px addieren

5. Jetzt fügt ihr den HTML Teil in eure Homepage ein (auch BODY genannt)

 

<body>
<!-- Slideshow HTML -->
  <div id="slideshow">
    <div id="slidesContainer"><div class="slide"><img src="BILD1"></div>
      <div class="slide" id="content"><img src="BILD2"></div>
      <div class="slide" id="content"><img src="BILD3"></div>
      <div class="slide" id="content"><img src="BILD4"></div>
    </div>
  </div>
  <!-- Slideshow HTML -->
</body>

6. als letztes müsst ihr nur noch eure Bilder auf die gleiche Größe bringen, die ihr im CSS Teil (oben) angegeben habt und hochladen! (und dann natürlich die Grafikadresse eintragen)