Einen wunderschönen,
im Moment habe ich das gleiche Problem, dass ich diese Slideshow gerne als header hätte.
Wenn ich den Code unter das Design setze funktioniert es wunderbar, sobald ich es aber über das Design setze gibt es nur noch Chaos.
Wenn Ihr es geschafft habt, dann wäre es schön wenn Ihr mir den Trick verraten würdet.
Vielen Dank schon einmal vorab.
<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 6000 = 6 sekunden
setInterval('gallery()',6000);
}
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">
<!--
.clear {clear:both;}
#gallery {position:relative; height: 300px; }
#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:5px;}
#gallery .caption .content h3 {margin:0; padding:0; color:#1DCCEF; }
-->
</style>
<div id="gallery">
<a href="#" class="show">
<img src="http://img.webme.com/pic/a/amg-autohandel/Header1.jpg" alt="Flowing Rock" alt="" title="" width="1050" height="300" rel="<h3>Deine Überschrift</h3>Hier deine Bildbeschreibung."/>
</a>
<a href="#">
<img src="http://img.webme.com/pic/a/amg-autohandel/Header2.jpg" alt="Grass Blades" alt="" title="" width="1050" height="300" rel="<h3>Deine Überschrift</h3>Hier deine Bildbeschreibung."/>
</a>
<a href="#">
<img src="http://img.webme.com/pic/a/amg-autohandel/Header3.jpg" alt="Grass Blades" alt="" title="" width="1050" height="300" rel="<h3>Deine Überschrift</h3>Hier deine Bildbeschreibung."/>
</a>
<a href="#" class="show">
<img src="http://img.webme.com/pic/a/amg-autohandel/Header4.jpg" alt="Flowing Rock" alt="" title="" width="1050" height="300" rel="<h3>Deine Überschrift</h3>Hier deine Bildbeschreibung."/></a>
.
