Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Nivoslider: show caption bei hover
#1
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:
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.animSpeed0, function(){
                        $(
this).html(title);
                        $(
this).stop().fadeTo(settings.animSpeed1);
                    });
                } else {
                    
nivoCaption.find('p').html(title);
                }                    
                
nivoCaption.stop().fadeTo(settings.animSpeedsettings.captionOpacity);
            } else {
                
nivoCaption.stop().fadeTo(settings.animSpeed0);
            }
        } 

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.animSpeed1, 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.animSpeed1);
                    });
                } else {
                    
nivoCaption.find('p').html(title);
                }                    
                
nivoCaption.stop().fadeTo(settings.animSpeedsettings.captionOpacity);
            } else {
                
nivoCaption.stop().fadeTo(settings.animSpeed0);
            }
        } 

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
Zitieren
#2
Kannst du der Bilderunterschrift nicht per CSS Transparenz zuweisen und beim Hover eine Farbe.
Zitieren
#3
Hi,

das Problem ist, dass durch das css der schöne slide-up-Effekt verloren geht.

Viele Grüße
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
Zitieren
#4
Hallo zusammen,

also, das Problem ist jetzt einigermaßen gelöst. Wiederholt sich die Slideshow einige Male, so ist der Effekt leider nicht mehr 100%ig zuverlässig, aber ED FUNKTIONIERT Big Grin


Für alle, die es interessiert:

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') != 0){ 
                
                } else {
                    
nivoCaption.find('p').html(title);
                }

                } else {
                
nivoCaption.stop().fadeTo(settings.animSpeed0);
            }
            
            
// Caption fadein/out when hovering
            
$('#header').hover(
                function(){
                    
nivoCaption.fadeTo(settings.animSpeed/3settings.captionOpacity);
                },
                function(){ 
                    
nivoCaption.fadeTo(settings.animSpeed/30);
                }
            );
            
            
        } 


Viele Grüße,
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
Zitieren
#5
Danke für den Code! #gemerkt

Das hatte ich schon bei einigen Slidern gesehen, dass nach ein paar Durchläufen die Effekte nicht mehr richtig funktionieren. Aber keine Ahnung, woran das liegt.
Zitieren
#6
wolfgang schrieb:Das hatte ich schon bei einigen Slidern gesehen, dass nach ein paar Durchläufen die Effekte nicht mehr richtig funktionieren. Aber keine Ahnung, woran das liegt.

Das muss jetzt zwar nicht für genau dieses Plugin gelten, aber meine Erfahrung ist, dass es oft an der verwendeten JavaScript-Funktion interval liegt.
Interval wird gerne verwendet, weil der Inhalt dieser Funktion halt immer nach einer bestimmten Zeit im Interval ausgeführt wird.
Der Nachteil: Eine Interval-Funktion, welche auf 5000 Millisekunden (5 Sekunden) festgelegt ist, ruft die in ihr befindliche Slider-Funktion alle 5 Sekunden auf.
Das Problem dabei: Der Interval wartet nicht, bis die Slider-Funktion fertig ist. 1. Benötigt der Browser Zeit um eine Funktion auszuführen. Bei normalem JavaScript sind das nur Bruchteile und wenige Millisekunden. Ein "Slide" dauert aber meist 300 Millisekunden für einen schönen Fade- oder Slide-Effekt.
Gehen wir von 300 Millisekunden aus, die für die Slide-Funktion benötigt werden, dann ist der Slide fertig und wird das nächste Mal dann nach 4700 Millisekunden ausgeführt. Der nächste Interval ist dann nur noch 4300 Millisekunden lang usw.. Ist die Seite lange genug geöffnet, werden sich die Aufrufe der Slide-Funktionen also zwangsläufig irgendwann überlagern, was Probleme verursacht.

Die einfache Lösung: Statt setInterval sollte man setTimeout verwenden:
Code:
var meineIntervalFunktion;
(meineIntervalFunktion = function () {
  // slide-Funktion aufrufen, die 300 Millisekunden benötigt
  doSlide()

  // nachdem doSlide fertig ist wird erst dann die 5 Sekunden gewartet, bis die eigene Funktion erneut aufgerufen wird.
  setTimeout(meineIntervalFunktion, 5000);
})()

Also merken: setInterval ist fast immer böse! Wink
Ob das hier zutrifft kann ich allerdings nicht genau sagen, weil ich diesen Slider nicht wirklich kenne.

Durch
Code:
(meineIntervalFunktion = function() {
})()
wird die Funktion direkt ausgeführt und muss nicht über meineIntervalFunktion() erstmalig ausgeführt werden.

Für weitere gute JavaScript-Tipps empfehle ich die folgenden 2 Videos von Paul Irish:
Michael Schulze
Webentwickler & Designer

http://michsch.de
http://michs.ch/twitter
Zitieren
#7
TL;DR jQuery HoverIntent:
http://cherne.net/brian/resources/jquery...ntent.html
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste