02.01.2012, 14:34
Hallo zusammen,
ich benutze den Nivoslider für typo3. Man hat dort die Möglichkeit Bildunterschriften anzugeben, die dann unter dem Bild erscheinen.
Ich möchte jetzt aber, dass diese Bildunterschriften nur dann erscheinen, wenn man über das Bild hovert.
Ich habe die Code-Stelle schon herausgesucht:
Ich hab es bis dorthin geschafft:
Da meine jquery-Kenntnisse bislang noch recht begrenzt sind, bin ich nicht weiter gekommen.
Vielleicht weiß einer von euch Rat.
Viele Grüße und vielen Dank!
ich benutze den Nivoslider für typo3. Man hat dort die Möglichkeit Bildunterschriften anzugeben, die dann unter dem Bild erscheinen.
Ich möchte jetzt aber, dass diese Bildunterschriften nur dann erscheinen, wenn man über das Bild hovert.
Ich habe die Code-Stelle schon herausgesucht:
PHP-Code:
//Create caption
slider.append(
$('<div class="nivo-caption"><p></p></div>').css({ display:'none', opacity:settings.captionOpacity })
);
// Cross browser default caption opacity
$('.nivo-caption', slider).css('opacity', 0);
// Process caption function
var processCaption = function(settings){
var nivoCaption = $('.nivo-caption', slider);
if(vars.currentImage.attr('title') != '' && vars.currentImage.attr('title') != undefined){
var title = vars.currentImage.attr('title');
if(title.substr(0,1) == '#') title = $(title).html();
if(nivoCaption.css('opacity') != 0){
nivoCaption.find('p').stop().fadeTo(settings.animSpeed, 0, function(){
$(this).html(title);
$(this).stop().fadeTo(settings.animSpeed, 1);
});
} else {
nivoCaption.find('p').html(title);
}
nivoCaption.stop().fadeTo(settings.animSpeed, settings.captionOpacity);
} else {
nivoCaption.stop().fadeTo(settings.animSpeed, 0);
}
}
Ich hab es bis dorthin geschafft:
PHP-Code:
// Process caption function
var processCaption = function(settings){
var nivoCaption = $('.nivo-caption', slider);
if(vars.currentImage.attr('title') != '' && vars.currentImage.attr('title') != undefined){
var title = vars.currentImage.attr('title');
if(title.substr(0,1) == '#') title = $(title).html();
if(nivoCaption.css('opacity') != 1){
nivoCaption.find('p').stop().fadeTo(settings.animSpeed, 1, function(){
$('#header').hover(
function () {
//show caption bei hover
$('.nivo-caption', this).slideDown(500);
},
function () {
//hide wieder
$('.nivo-caption', this).slideUp(500);
}
);
$(this).html(title);
$(this).stop().fadeTo(settings.animSpeed, 1);
});
} else {
nivoCaption.find('p').html(title);
}
nivoCaption.stop().fadeTo(settings.animSpeed, settings.captionOpacity);
} else {
nivoCaption.stop().fadeTo(settings.animSpeed, 0);
}
}
Da meine jquery-Kenntnisse bislang noch recht begrenzt sind, bin ich nicht weiter gekommen.
Vielleicht weiß einer von euch Rat.
Viele Grüße und vielen Dank!
Grüßle, Nicki
NIMIUS | Agentur für Kommunikation
Webdesign und Webentwicklung aus Staufen im Breisgau
Website | Twitter
TYPO3 Education Committee Member
Neu in TYPO3? Kein Problem! Hier geht's zum TYPO3 Mentoren Programm
NIMIUS | Agentur für Kommunikation
Webdesign und Webentwicklung aus Staufen im Breisgau
Website | Twitter
TYPO3 Education Committee Member
Neu in TYPO3? Kein Problem! Hier geht's zum TYPO3 Mentoren Programm