Wie man automatischen Filtergalerieabschnitt macht?

Question

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-2"> 
    </div> 
    <div class="col-sm-4"> 
     <br><p> Year : 
     <select class="form-control"> 
      <option selected="selected" value="0"> -- Choose Your Preferred Year -- </option> 
      <option value="1"> 2010 </option> 
      <option value="2"> 2011 </option> 
      <option value="3"> 2012 </option> 
     </select value="4"></p> 
     </div> 
     <div class="col-sm-4"> 
     <br><p> Events : 
      <select class="form-control"> 
      <option selected="selected" value="zero"> -- Choose Your Preferred Event -- </option> 
      <option value="one"> Annual Alumni Meet of 2012 Batch </option> 
      <option value="two"> Global Conference 2010 </option> 
      <option value="three"> Nostalgia 1980's </option> 
      <option value="four"> Star Campus 2008 </option> 
      </select></p> 
     </div> 
     <div class="col-sm-2"> 
     </div> 
     </div> 
     <div class="page_content"> 
     <div id="photo_gallery_page" class="page"> 
      <div id="photo_gallery_menu_container"> 
      <ul id="photo_gallery_menu"> 
       <li><a href="gallery-1.php"> Photos </a></li> 
       <li class="active"><a href="gallery.php"><span> Videos </span></a></li> 
      </ul> 
      </div> 
      <div id="photo_gallery_content"> 
      <div id="photo_gallery_pictures_container" class="photo_gallery_pictures_container"><a class="album_anchor" href="/gallery/albums/15"> 
       <div class="picture album"> 
       <div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/392/thumbnails/dsc00603_small.JPG);"> 
       </div> 
       <p class="album_title">Nostalgia</p> 
       </div> 
      </a> 
      <a class="album_anchor" href="/gallery/albums/16"> 
       <div class="picture album"> 
       <div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/16/thumbnails/636278805_bc50f96aec_o_small.jpg);"> 
       </div> 
       <p class="album_title">Star alumni global conference 2007</p> 
       </div> 
      </a> 
      <a class="album_anchor" href="/gallery/albums/17"> 
       <div class="picture album"> 
       <div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/18/thumbnails/jn-tata-2015_small.jpg);"> 
       </div> 
       <p class="album_title">Star global conference 2013</p> 
       </div> 
      </a> 
      <a class="album_anchor" href="/gallery/albums/18"> 
       <div class="picture album"> 
       <div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/17/thumbnails/iisc-aana-2013-2_small.jpg);"> 
       </div> 
       <p class="album_title">Star Campus </p> 
       </div> 
      </a> 
      <a class="album_anchor" href="/gallery/albums/143"> 
       <div class="picture album"> 
       <div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/587/thumbnails/dsc02821_small.JPG);"> 
       </div> 
       <p class="album_title">Star Global Alumni Conference 2015</p> 
       </div> 
      </a> 
      <a class="album_anchor" href="/gallery/albums/356"> 
       <div class="picture album"> 
       <div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/16/thumbnails/636278805_bc50f96aec_o_small.jpg);"> 
       </div> 
       <p class="album_title">Nostalgia-1980s</p> 
       </div> 
      </a> 
      <a class="album_anchor" href="/gallery/albums/362"> 
       <div class="picture album"> 
       <div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/362/thumbnails/100-0019_img_small.JPG);"> 
       </div> 
       <p class="album_title">StarAANA Formative Years</p> 
       </div> 
      </a> 
      <a class="album_anchor" href="/gallery/albums/392"> 
       <div class="picture album"> 
       <div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/392/thumbnails/dsc00603_small.JPG);"> 
       </div> 
       <p class="album_title">Celebration @ Star</p> 
       </div> 
      </a> 
      <a class="album_anchor" href="/gallery/albums/406"> 
       <div class="picture album"> 
       <div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/406/thumbnails/felicitation_small.jpg);"> 
       </div> 
       <p class="album_title">Felicitation of Prof. Selvarajan &amp; Mrs. Indira Devi for their generous contribution</p> 
       </div> 
      </a> 
      <a class="album_anchor" href="/gallery/albums/456"> 
       <div class="picture album"> 
       <div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/456/thumbnails/20160122_153021_small.jpg);"> 
       </div> 
       <p class="album_title">StarAANA: Faculty and Student Visits</p> 
       </div> 
      </a> 
      <a class="album_anchor" href="/gallery/albums/587"> 
       <div class="picture album"> 
       <div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/587/thumbnails/dsc02821_small.JPG);"> 
       </div> 
       <p class="album_title">Panel Discussion on: "Entrepreneurship or Employment: What governs the Choice?"</p> 
       </div> 
      </a> 
      <a class="album_anchor" href="/gallery/albums/1859"> 
       <div class="picture album"> 
       <div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/1859/thumbnails/excellence-award-2005_small.jpg);"> 
       </div> 
       <p class="album_title">Star Gifts</p> 
       </div> 
      </a> 
      <a class="album_anchor" href="/gallery/albums/1931"> 
       <div class="picture album"> 
       <div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/1931/thumbnails/509536602_3d28eb1156_o_small.jpg);"> 
       </div> 
       <p class="album_title">Chemeng 2005-2007</p> 
       </div> 
      </a></div> 
      <p class="cB"></p> 
      <div id="loading" style="display: none;"> 
       <img src="/static/img/loading.gif"> 
      </div> 
      <div id="gallery_done"> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 

Das oben angegebene ist mein HTML-Code .. Hier hatte ich 2 Filter-Option (d. H.) Filter nach Jahr und Filter nach Ereignis. Wenn der Benutzer ein bestimmtes Jahr oder Ereignis aus der entsprechenden Auswahlbox auswählt, müssen die Bilder automatisch entsprechend gefiltert werden und das Endergebnis sollte gemäß diesem Filter angezeigt werden. Dafür, was soll ich tun, um es zu bekommen? Bitte geben Sie mir eine richtige Lösung dafür.

Answer 1

Dies ist eine sehr breite Frage.

Grundsätzlich haben Sie zwei Möglichkeiten: Filter auf der Clientseite oder Filter auf der Serverseite.

Wahrscheinlich ist dieser HTML-Code auf dem Server mit Daten aus einer Datenbank erstellt. In diesem Fall müssen Sie die Liste auf dem Server filtern. Das Ändern der Auswahlliste muss eine Anfrage an den Server mit den ausgewählten Parametern senden und eine neue Liste von Alben zurücksenden. Sie haben immer noch zwei Optionen: eine vollständige Seite neu laden oder Ajax verwenden.

Wenn Sie alles auf der Client-Seite tun möchten, verfehlt Ihr Code die wichtigen Informationen. Sie müssen es dem Code des Albums hinzufügen.

Woher wissen Sie, welches Jahr das ist oder welches Ereignis?

<a class="album_anchor" href="/gallery/albums/392"> 
     <div class="picture album"> 
      <div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/392/thumbnails/dsc00603_small.JPG);"> 
      </div> 
      <p class="album_title">Celebration @ Star</p> 
     </div> 
</a> 

Sie müssen die Daten irgendwo einfügen. Auch hier gibt es viele Möglichkeiten. Zum Beispiel könnten Sie Datenattribute wie folgt verwenden:

<a class="album_anchor" href="/gallery/albums/392" 
    data-year="2011" data-event="two"> 

Dies ermöglicht Ihnen dann, mit Javascript oder jquery zu filtern.

Sie sehen, es ist noch ein langer Weg zu gehen. Also arbeite an diesem Problem und beschränke deine Frage. Wie es aussieht, ist es viel zu weit gefasst, um eine knappe Antwort zu bekommen.