Forum

[Tymo]

Ich habe folgenden Quelltext:

Code: Alles auswählen

<div class="show-hide-images">
   <span class="show"><a href="#gallery">Bilder zeigen</a></span>
   <span class="hide" style="display:none;"><a href="#gallery">Bilder verstecken</a></span>
</div>
<div id="gallery" class="content" style="display:none;">
   <ul>
      <li>
         <a href="bild1.jpg"><img src="bild1_thumb.jpg" alt="Bild" width="100" /></a>
      </li>
      <li>
         <a href="bild2.jpg"><img src="bild2.thumb.jpg" alt="Bild" width="100" /></a>
      </li>
   </ul>
</div>


Ich möchte gerne mit jQuery beim Klick auf "Bilder zeigen" die Klasse "content" einblenden, die Klasse "show" verstecken und die Klasse "hide" einblenden.
Das funktioniert auch so weit ganz gut. Leider habe ich in meinem Quelltext nicht nur eine Galerie, sondern mehrere. Klickt man jetzt auch "Bilder zeigen", blenden sich immer alle Galerien ein.

Der jQuery-Code dazu:

Code: Alles auswählen

$(document).ready(function() {

   $('.show a').click(function(event){
      $('.content').slideToggle('slow');
      $('.show-hide-images a').addClass('active');
      $('.hide').show('slow');
      $('.show').hide('slow');
   });
   $('.hide a').click(function(){
      $('.content').slideToggle('slow');
      $('.show-hide-images a').removeClass('active');
      $('.hide').hide('slow');
      $('.show').show('slow');
   });
   
});


Kann mir jemand helfen?

[jeandeluxe]

Ich habe folgenden Quelltext:Leider habe ich in meinem Quelltext nicht nur eine Galerie, sondern mehrere. Klickt man jetzt auch "Bilder zeigen", blenden sich immer alle Galerien ein.

Da du (identische) Klassen als Selektoren verwendest, ist das auch logisch.. du mußt die einzelnen Galerien für dein script unterscheidbar machen.

lg,
Jan

[Tymo]

du mußt die einzelnen Galerien für dein script unterscheidbar machen

Och nö. Ich dachte das geht einfacher und mit weniger jQuery Code.

[jeandeluxe]

Och nö. Ich dachte das geht einfacher und mit weniger jQuery Code.

Das ist weder sonderlich kompliziert noch mit viel Code verbunden.. ;)

lg,
Jan

[Oliver.Kreischer]

Hi,

bin leider nicht am Rechner. .next ist dein Freund

Einfach mal nach jquery und .next googlen.

LG
Oliver

[Ingo]

Code: Alles auswählen

<div id="gallery" class="content">
   <ul>
      <li>
         <a href="bild1.jpg"><img src="0001.jpg" alt="" /></a>
      </li>
      <li>
         <a href="bild2.jpg"><img src="0002.thumb.jpg" alt="" /></a>
      </li>
   </ul>
</div>
<script>
    $('body').delegate('.show-hide-images a', 'click', function (e) {
        e.preventDefault();
        $($(this).attr('href')).slideToggle('slow');
        $(this)
            .parent()
            .toggleClass('active')
            .end()
            .siblings()
            .show('slow')
            .end()
            .hide('slow');
    });
    $(function () {
        $('.content').each(function () {
            var $nav = $('<div class="show-hide-images"><a href="#' + $(this).attr('id') + '" class="show">Bilder zeigen</a><a href="#' + $(this).attr('id') + '" class="hide" style="display:none;">Bilder verstecken</a></div>');
            $(this).hide().before($nav);
        });
    });
</script>



"Bild" als Alternativtext - YMMD