自動フィルタギャラリーセクションの作成方法は？

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> 

上記は私のHTMLコードです。ここで私は2つのフィルタオプション（すなわち、年ごとにフィルタをかけ、イベントによってフィルタをかけました）を与えました。ユーザがそれぞれの選択ボックスから特定の年またはイベントを選択すると、画像はそれに応じて自動的にフィルタリングされなければならず、最終的な結果はそのフィルタごとに表示されるはずです。親切に私にそれに適したソリューションを提供してください..

Answer 1

これは非常に広い質問です。

基本的に、クライアント側のフィルタとサーバー側のフィルタの2つのオプションがあります。

おそらく、このhtmlは、データベースのデータを使用してサーバー上に構築されています。この場合、サーバー上のリストをフィルタリングする必要があります。選択リストを変更すると、パラメータを選択してサーバーに要求を送信し、新しいアルバムのリストを返送する必要があります。ここには2つのオプションがあります：フル・ページ・リロードまたはAjaxの使用。

クライアントサイドのすべてを実行したい場合は、コードが重要な情報を失います。それをアルバムのコードに追加する必要があります。

これは、どの年がどのようなイベントか、どのようなイベントですか。

<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/392" 
    data-year="2011" data-event="two"> 

これで、JavaScriptまたはjqueryでフィルタリングすることができます。

あなたが見るには、まだまだ道のりがあります。あなたの質問を絞り込んでこの問題に取り組んでください。それが立てば、簡潔な答えを得るには広すぎます。