DerUnterfranke
Threadersteller
Dabei seit: 19.02.2011
Ort: -
Alter: -
Geschlecht:
|
Verfasst Sa 19.02.2011 20:04
Titel Simple JQuery Image Slide Show with Semi-Transparent Caption |
|
|
Hi Mediengestalter ,
ich hab dieses Skript hier gefunden:
Simple JQuery Image Slide Show with Semi-Transparent Caption
Seite: http://www.queness.com/post/152/simple-jquery-image-slide-show-with-semi-transparent-caption
Demo: http://www.queness.com/resources/html/slideshow/jquery-slideshow.html
leider scheitere ich an der Anpassung fuer meine Zwecke. Vielleicht kann mir hier jemand helfen?
Was das Sktipt macht
- Animation von Bild (Fade) und Text (Animation von unten eingeblendet)
Was es nach Moeglichkeit machen sollte:
- Der Text soll sich genau wie das Bild einfach fest (mit dem gleichen Hintergrund) einblenden
Die Show spielt sich glaube ich hier ab. Ich bekomm auch die Animation raus, leider "flackert" es dann nur kurz auf.
Code: | $(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()',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);
} |
|
|