Nivoslider: show caption bei hover

[nimius]

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.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!

[Webograph]

Kannst du der Bilderunterschrift nicht per CSS Transparenz zuweisen und beim Hover eine Farbe.

[nimius]

Hi,

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

Viele Grüße

[nimius]

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


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.animSpeed, 0);
            }
            
            // Caption fadein/out when hovering
            $('#header').hover(
                function(){
                    nivoCaption.fadeTo(settings.animSpeed/3, settings.captionOpacity);
                },
                function(){ 
                    nivoCaption.fadeTo(settings.animSpeed/3, 0);
                }
            );
            
            
        } 


Viele Grüße,

[wolfgang]

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.

[michsch]

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!
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:

• 10 Things I Learned from the jQuery Source
  
• 11 More Things I Learned from the jQuery Source
  

[jesterofcrows]

TL;DR jQuery HoverIntent:
http://cherne.net/brian/resources/jquery...ntent.html