[erledigt] Slideshow vermitteln

<style type="text/css">
body{
    font-family:arial
}
 
.clear {
    clear:both
}
 
#gallery {
    position:relative;
    height:185px
}
    #gallery a {
        float:left;
        position:absolute;
    }
     
    #gallery a img {
        border:none;
    }
     
    #gallery a.show {
        z-index:700
    }
 
    #gallery .caption {
        z-index:600;
        background-color:#000;
        color:#ffffff;
        height:100px;
        width:100%;
        position:absolute;
        bottom:0;
    }
 
    #gallery .caption .content {
        margin:5px
    }
     
    #gallery .caption .content h3 {
        margin:300;
        padding:0;
        color:#ffff00;
    }

</style>
<script src="http://omba.pf-control.de/js/jquery.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);
     
    //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
    setInterval('gallery()',7000);
     
}
 
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>
<style type="text/css">
<!--
td.edit_button_bg {
background-color: #990000;
background-image:url(http://img.webme.com/pic/i/ikarus-288/button201x29red01.png); }
td.edit_button_bg:hover {
background-color: #990000;
background-image:url(http://img.webme.com/pic/i/ikarus-288/201x29buttonms08.png); }
body {
background-image: url(http://img.webme.com/pic/i/ikarus-288/175x175hintergrund07.png);
background-repeat: repeat;
background-attachment: fixed; }
-->
</style>
<style type="text/css">
#LeererButton1{
position:relative;
left:-12%;
width:111%;
height:27px;
background-image:url(http://img.webme.com/pic/i/ikarus-288/button333.png);
background-repeat:no-repeat;
}
</style>
</style>
<style type="text/css">
#LeererButton2{
position:relative;
left:-12%;
width:111%;
height:27px;
background-image:url(http://img.webme.com/pic/i/ikarus-288/button333.png);
background-repeat:no-repeat;
}
</style>
</style>
<style type="text/css">
#LeererButton3{
position:relative;
left:-12%;
width:111%;
height:27px;
background-image:url(http://img.webme.com/pic/i/ikarus-288/button333.png);
background-repeat:no-repeat;
}
</style>
</style>
<style type="text/css">
#CVAGLOGO01{
position:relative;
left:-12%;
width:111%;
height:27px;
background-image:url(http://img.webme.com/pic/i/ikarus-288/button444cvag.png);
background-repeat:no-repeat;
}
</style>

<div id="gallery">
<div style="text-align: left;"><a target="_blank" href="http://ikarus-288.de.tl/Stadtbusse.htm" class="show"> <img width="440" height="79" src="http://img.webme.com/pic/i/ikarus-288/willkommen01.png" alt="Flowing Rock" rel="&lt;h3&gt;IKARUS - 288.de&lt;/h3&gt;Busse und Bahnen aus Deutschland und anderen L&auml;ndern" /></a>   <a href="http://www.ikarus-288.de/"> <img width="440" height="79" src="http://img.webme.com/pic/i/ikarus-288/ikarus-288de.png" alt="Grass Blades" rel="&lt;h3&gt;IKARUS - 288.de&lt;/h3&gt;Reiseberichte aus Europa" /> </a>  <a target="_blank" href="http://ikarus-288.de.tl/Lenk_-und-Ruhezeiten.htm"> <img width="440" height="79" src="http://img.webme.com/pic/i/ikarus-288/willkommen02.png" alt="Grass Blades" rel="&lt;h3&gt;IKARUS - 288.de&lt;/h3&gt;Hinweise zu Lenk- und Ruhezeiten" /> </a>  <a target="_blank" href="http://phototrans.de/" class="show"> <img width="440" height="79" src="http://img.webme.com/pic/i/ikarus-288/phototransde.png" alt="Flowing Rock" rel="&lt;h3&gt;www.phototrans.de&lt;/h3&gt;Hervorragende Datenbank zu Bussen und Bahnen" /></a>   <a target="_blank" href="http://www.busforum.org/" class="show"> <img width="440" height="79" src="http://img.webme.com/pic/i/ikarus-288/busforumorg.png" alt="Flowing Rock" rel="&lt;h3&gt;www.busforum.org&lt;/h3&gt;Gro&szlig;er Berlin-Teil - Alles rund um den &Ouml;PNV" /></a>   <a target="_blank" href="http://www.homepage-baukasten.de/" class="show"> <img width="440" height="79" src="http://img.webme.com/pic/i/ikarus-288/hpbkde.png" alt="Flowing Rock" rel="&lt;h3&gt;www.homepage-baukasten.de&lt;/h3&gt;Erstelle deine eigene HP" /></a>   <a target="_blank" href="http://www.busfahrertreff.eu/forum1/index.php" class="show"> <img width="440" height="79" src="http://img.webme.com/pic/i/ikarus-288/busfahrertreffde.png" alt="Flowing Rock" rel="&lt;h3&gt;www.busfahrertreff.de&lt;/h3&gt;Informationen und Forum f&uuml;r Busfahrer/innen" /></a></div>
<div class="caption">
</div>

<center><div id="gallery">
<div style="text-align: left;"><a target="_blank" href="http://ikarus-288.de.tl/Stadtbusse.htm" class="show"> <img width="440" height="79" src="http://img.webme.com/pic/i/ikarus-288/willkommen01.png" alt="Flowing Rock" rel="&lt;h3&gt;IKARUS - 288.de&lt;/h3&gt;Busse und Bahnen aus Deutschland und anderen L&auml;ndern" /></a>   <a href="http://www.ikarus-288.de/"> <img width="440" height="79" src="http://img.webme.com/pic/i/ikarus-288/ikarus-288de.png" alt="Grass Blades" rel="&lt;h3&gt;IKARUS - 288.de&lt;/h3&gt;Reiseberichte aus Europa" /> </a>  <a target="_blank" href="http://ikarus-288.de.tl/Lenk_-und-Ruhezeiten.htm"> <img width="440" height="79" src="http://img.webme.com/pic/i/ikarus-288/willkommen02.png" alt="Grass Blades" rel="&lt;h3&gt;IKARUS - 288.de&lt;/h3&gt;Hinweise zu Lenk- und Ruhezeiten" /> </a>  <a target="_blank" href="http://phototrans.de/" class="show"> <img width="440" height="79" src="http://img.webme.com/pic/i/ikarus-288/phototransde.png" alt="Flowing Rock" rel="&lt;h3&gt;www.phototrans.de&lt;/h3&gt;Hervorragende Datenbank zu Bussen und Bahnen" /></a>   <a target="_blank" href="http://www.busforum.org/" class="show"> <img width="440" height="79" src="http://img.webme.com/pic/i/ikarus-288/busforumorg.png" alt="Flowing Rock" rel="&lt;h3&gt;www.busforum.org&lt;/h3&gt;Gro&szlig;er Berlin-Teil - Alles rund um den &Ouml;PNV" /></a>   <a target="_blank" href="http://www.homepage-baukasten.de/" class="show"> <img width="440" height="79" src="http://img.webme.com/pic/i/ikarus-288/hpbkde.png" alt="Flowing Rock" rel="&lt;h3&gt;www.homepage-baukasten.de&lt;/h3&gt;Erstelle deine eigene HP" /></a>   <a target="_blank" href="http://www.busfahrertreff.eu/forum1/index.php" class="show"> <img width="440" height="79" src="http://img.webme.com/pic/i/ikarus-288/busfahrertreffde.png" alt="Flowing Rock" rel="&lt;h3&gt;www.busfahrertreff.de&lt;/h3&gt;Informationen und Forum f&uuml;r Busfahrer/innen" /></a></div>
<div class="caption">
</div></center>