Bilder-Slider im Baukasten

• auf "Eigene Seiten editieren"
• Seite wählen, wo Slider hinein soll
• im Editor auf "Quellcode" klicken
• füge ein: Schritt 1 (den CSS Code)
• danach: Schritt 2 (den Javascript Code)
• darunter: Schritt 3 (den HTML-Code mit Bildern)

Schritt 1: Der CSS Code

<style type="text/css">
<!--
.clear {clear:both;}
#gallery {width:500px; position:relative; height: 374px; }
#gallery a {float:left; position:absolute; }
#gallery a img {border:none;}
#gallery a.show {z-index:500;}
#gallery .caption {
z-index:600; background-color:#000; color:#fff; height:100px; width:100%; position:absolute; bottom: 0; }
#gallery .caption .content {margin:10px;}
#gallery .caption .content h3 {margin:0; padding:0; color:#1DCCEF; }
-->
</style>

Schritt 2: Javascript Code

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

//Execute the slideShow
slideShow();

});

function slideShow() {

//Set the opacity of all images to 0
$('#gallery a').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$('#gallery a:first').css({opacity: 1.0});

//Set the caption background to semi-transparent
$('#gallery .caption').css({opacity: 0.7});

//Resize the width of the caption according to the image width
$('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});

//Get the caption of the first image from REL attribute and display it
$('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
.animate({opacity: 0.7}, 400);

//Bilderwechsel Zeit 4000 = 4 sekunden
setInterval('gallery()',4000);

}

function gallery() {

//if no IMGs have the show class, grab the first image
var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));

//Get next image caption
var caption = next.find('img').attr('rel');

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);

//Hide the current image
current.animate({opacity: 0.0}, 1000)
.removeClass('show');

//Set the opacity to 0 and height to 1px
$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });

//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
$('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );

//Display the content
$('#gallery .content').html(caption);

}
</script> 

Schritt 3: Der HTML-Code

<div id="gallery">

<a href="Link 1" class="show">
<img src="Grafik 1" alt="Bild" width="500" height="374" rel="<h3>Titel 1</h3>Kurzbeschreibung 1" />
</a>

<a href="Link 2" class="show">
<img src="Grafik 2" alt="Bild" width="500" height="374" rel="<h3>Titel 2</h3>Kurzbeschreibung 2" />
</a>

<a href="Link 3" class="show">
<img src="Grafik 3" alt="Bild" width="500" height="374" rel="<h3>Titel 3</h3>Kurzbeschreibung 3" />
</a>

<a href="Link 4" class="show">
<img src="Grafik 4" alt="Bild" width="500" height="374" rel="<h3>Titel 4</h3>Kurzbeschreibung 4" />
</a>

<div class="caption">
<div class="content"> </div>
</div>
</div>
<div class="clear"></div> 

• bei Link gewünschte Seitenadresse einfügen
• bei Grafik die Grafikadresse einfügen vom Bild
• Bildgröße hier 500 x 374 Pixel
• Zeit für Bilderwechsel im Javascript-Code einstellen

Bilderwechsel Zeit einstellen:
Suche im Javascript diese Codezeile:

//Bilderwechsel Zeit 4000 = 4 sekunden
setInterval('gallery()',4000);

Die ,4000) stehen für 4 Sekunden. Den Wert könnt Ihr ändern