Antworten zum Thema „Problem mit eigenem Jquery Caption“

[DirtyWorld]

Hallo,
ich hab mir mit jQuery eine Captionfunktion für eine kleine Gallerie gebaut. Leider hab ich da nun ein Problem welches ich nciht gefixt bekomme.
Und zwar wird als Caption ein P beim Hover eingeblendet und beim verlassen wieder ausgeblendet. Das funktioniert soweit auch ganz gut, zumindest beim ersten Bild. Das Problem ist nun dass bei allen anderen Bildern das Caption schon eingeblendet ist wenn ich in der Gallerie mir diese anzeigen lasse. erst wenn ich nun erneut über das Umschließende Div gehe verschwindet das Caption regulär wieder.

Ich denke mal das der Fehler jetzt nicht ganz so schwer zu finden sein wird. ich bekomms nur nicht hin. Wäre nett wenn sich das jemand anschauen könnte.

JS Bin - Collaborative JavaScript Debugging

Viele Grüße

 

[sokie]

AW: Problem mit eigenem Jquery Caption

wenn du das p element innerhalb des <a class="grouped_elements"> eingangs ausblenden willst, kannst du den selektor

$(".grouped_elements p").hide();

allerdings ist ein p(block-element) innerhalb eines inline-elements(<a>) nicht valide. Vielleicht besser auf das p verzichten. dann müsste der selektor

$(".grouped_elements span").hide();

lauten.

 

[DirtyWorld]

AW: Problem mit eigenem Jquery Caption

Hi,
okay an die Geschichte mit dem Inline hab ich garnicht gedacht. Hab das p jetzt mal rausgenommen.
Wenn ich dich jetzt weiter richtig versteh ist hier

$(".grouped_elements p",this).hide();

unnötig.
Das Problem das in der Slideshow aber das Caption sich nicht ausblendet wenn ich vom ersten zum zweiten Bild slide besteht mit der Änderung noch immer. Und das ist für mich jetzt das größte Problem.

Viele Grüße

JS Bin - Collaborative JavaScript Debugging

 

[saila]

AW: Problem mit eigenem Jquery Caption

Hi,

anstelle von p kannst du innherhalb eines a-tag ein span verwenden.

Zur Thematik jQuery: Du kannst an den click-event zum nächsten Bild ein bind-click hängen, und in diesem das ausblenden erneut setzen. Also

$('#click_next_image_selector').bind('click', function() {
 $('a span/p').hide();
});

Teste mal - wenn das dein Zeil wäre - sofern ich den etwas verwirrenden Text von dir verstanden habe.

 

[DirtyWorld]

AW: Problem mit eigenem Jquery Caption

Hallo,

sofern ich den etwas verwirrenden Text von dir verstanden habe

Ja ich weiß, der Sachverhalt ist echt etwas schwierig zu beschreiben. Sorry.

Hier nochmal ein Erklärversuch:
Mein Problem ist dass das Caption nur beim ersten Bild regulär ein und ausblendet. Bei den nächsten ist es dann schon eingeblendet, es blendet zwar auch aus wenn ich mit der Maus aus dem Bereich #slideshow rausgehe.

Nun zu deinem Tipp. Was ist den mit

 #click_next_image_selector

gemeint?
Muß ich dann hier jedem Bild einen eigenen Selektor mitgeben?

Viele Grüße

 

[saila]

AW: Problem mit eigenem Jquery Caption

Ok - jetzt versteh auch ich was du meinst

Es geht aussschl. um das "Caption", welches standardmässig ausgeblendet ist und beim überfahren mit der Maus des p-tag wird es eingeblendet, was allerdings nur bei dem ersten Bild funktioniert - richtig?

Beim nächsten Bild ist diese Funktionalität nicht mehr gegeben? Also dann bleibt es bei dem von mir genannten Vorschlag:

    $(function() {
        $('selector_für_nächstes_bild').bind('click', function() {
            $('.grouped_elements p').hide();
        });
    });

Der Selector "selector_für_nächstes_bild" ist jener, welcher dein Button/Icon oder was auch immer darstellt, um das nächste Bild zu laden. Das meinste ich auch mit "#click_next_image_selector".

Was passiert mit dem obigen Code-Schnippsel: Der Klick auf den Button um das nächste Bild zu laden, wird gebunden und führt dazu, dass der geladene Bereich unter "grouped_elements" direkt ausgeblendet wird. Dabei ist die vorhandene Funktion (sofern diese dann noch aktiv ist, beim Mousover-Event nach wie vor aktiv und funktional.

 

[sokie]

AW: Problem mit eigenem Jquery Caption

du musst einfach nur die p elemente Eingangs sauber ausblenden, und beim Hover sicherstellen, dass nur das p des 'gehoverten' Elements ($(this)) ein und ausgeblendet wird.
zB so:

...
  //alle p-elemente innerhalb von #slideshow ausblenden:
  $("#slideshow p").hide();
  $(".grouped_elements").hover(
    function(){
      $(this).children("p").fadeIn("slow");
    },
    function(){
      $(this).children("p").fadeOut("slow");
    }
  );
});