[FRAGE] Navigationsmenü mit Javascript (Sortierung)

[harro23]

Hallo zusammen,

ich habe folgendes Problem beim Aufbau meiner Seite:
Ich lasse die Inhalte

<ul>
         <li class="list active" data-filter="blog"><a href="#">Blog</a></li>
          <li class="list" data-filter="portrait"><a href="#">Portrait</a></li>
         
 </ul>

<div class="gal_img blog">
                 <a href="bilder/1920/bild1.jpg" data-lightbox="fancy" data-title=""><img src="bilder/1920/bild1.jpg" /></a>
</div>
<div class="gal_img portrait">
                <a href="bilder/1920/bild2.jpg" data-lightbox="fancy" data-title=""><img src="bilder/1920/bild2.jpg" /></a>
</div>

(ist eine Bilder-Galerie)

durch folgendes Script anzeigen (bei Click auf den Link in der Navi):

<script type="text/javascript">
      $(document).ready(function(){
        $('.list').click(function(){
          const value = $(this).attr('data-filter');
          if (value == 'all'){
            $('.gal_img').show('1000');
          }
          else{
          $('.gal_img').not('.'+value).hide('1000');
          $('.gal_img').filter('.'+value).show('1000');
          }
       })

Das funktioniert auch, bei Klick auf "Blog" oder "Portrait" werden die entsprechenden Bilder angezeigt.

ABER

Beim aufrufen der Seite erscheinen ALLE Bilder im Content, d.h erst alle mit "blog", dann alle mit "portrait".
Ich möchte gern, dass beim aufrufen der Seite NUR die Bilder mit dem Tag "blog" angezeigt werden.
Ich kann es soweit überblicken, dass die Sortierung im Script erst nach dem .click event anfängt, aber leider bin ich außerstande, dass selbst zu lösen und hoffe auf Ideen oder Unterstützung.
Vielen Dank im Vorraus.

 

[mikdoe]

Moin!
Ergänze in <div class="gal_img portrait"> noch ein style="display:none;"

 

[harro23]

Jau, vielen Dank. Ich habe den style der class .portrait in der css zugefügt und es funktioniert!

 

[mikdoe]

Ja das geht auch. Damit steuerst du es aus dem CSS, welches i. d. R. statisch ist. Das HTML wird hingegen i. d. R. dynamisch (PHP, Perl, Python etc.) erzeugt und erlaubt an dieser Stelle mehr Flexibilität, wenn man z. B. in Einzelfällen die Seite mit einer anderen Galerie öffnen will (z. B. die zuletzt angezeigte etc.).
Aber das ist nur die Begründung aus meiner Sicht und keine Vorschrift oder so.

 

[kkapsner]

Du scheinst mit dem class="list active" steuern zu wollen, welche Liste angezeigt wird.
Wenn das der Fall ist, könntest du in deinem JS einfach ein $('.list.active').click(); am Ende in deinen ready-Block packen.

PS: die <a href="#"> sind unnötig und machen manchmal Probleme. Entferne die besser und mach deine Cursor-Änderung per CSS.