title: How to make auto filter gallery section?
body: <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-sm-2"&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-4"&gt;
        &lt;br&gt;&lt;p&gt; Year :
          &lt;select class="form-control"&gt;
            &lt;option selected="selected" value="0"&gt; -- Choose Your Preferred Year -- &lt;/option&gt;
            &lt;option  value="1"&gt; 2010 &lt;/option&gt;
            &lt;option  value="2"&gt; 2011 &lt;/option&gt;
            &lt;option  value="3"&gt; 2012 &lt;/option&gt;
          &lt;/select value="4"&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="col-sm-4"&gt;
          &lt;br&gt;&lt;p&gt; Events :
            &lt;select class="form-control"&gt;
              &lt;option selected="selected" value="zero"&gt; -- Choose Your Preferred Event -- &lt;/option&gt;
              &lt;option value="one"&gt; Annual Alumni Meet of 2012 Batch &lt;/option&gt;
              &lt;option value="two"&gt; Global Conference 2010 &lt;/option&gt;
              &lt;option value="three"&gt; Nostalgia 1980's &lt;/option&gt;
              &lt;option value="four"&gt; Star Campus 2008 &lt;/option&gt;
            &lt;/select&gt;&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-2"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="page_content"&gt;
          &lt;div id="photo_gallery_page" class="page"&gt;
            &lt;div id="photo_gallery_menu_container"&gt;
              &lt;ul id="photo_gallery_menu"&gt;
                &lt;li&gt;&lt;a href="gallery-1.php"&gt; Photos &lt;/a&gt;&lt;/li&gt;
                &lt;li class="active"&gt;&lt;a href="gallery.php"&gt;&lt;span&gt; Videos &lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
            &lt;div id="photo_gallery_content"&gt;
              &lt;div id="photo_gallery_pictures_container" class="photo_gallery_pictures_container"&gt;&lt;a class="album_anchor" href="/gallery/albums/15"&gt;
                &lt;div class="picture album"&gt;
                  &lt;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);"&gt;
                  &lt;/div&gt;
                  &lt;p class="album_title"&gt;Nostalgia&lt;/p&gt;
                &lt;/div&gt;
              &lt;/a&gt;
              &lt;a class="album_anchor" href="/gallery/albums/16"&gt;
                &lt;div class="picture album"&gt;
                  &lt;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);"&gt;
                  &lt;/div&gt;
                  &lt;p class="album_title"&gt;Star alumni global conference 2007&lt;/p&gt;
                &lt;/div&gt;
              &lt;/a&gt;
              &lt;a class="album_anchor" href="/gallery/albums/17"&gt;
                &lt;div class="picture album"&gt;
                  &lt;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);"&gt;
                  &lt;/div&gt;
                  &lt;p class="album_title"&gt;Star global conference 2013&lt;/p&gt;
                &lt;/div&gt;
              &lt;/a&gt;
              &lt;a class="album_anchor" href="/gallery/albums/18"&gt;
                &lt;div class="picture album"&gt;
                  &lt;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);"&gt;
                  &lt;/div&gt;
                  &lt;p class="album_title"&gt;Star Campus &lt;/p&gt;
                &lt;/div&gt;
              &lt;/a&gt;
              &lt;a class="album_anchor" href="/gallery/albums/143"&gt;
                &lt;div class="picture album"&gt;
                  &lt;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);"&gt;
                  &lt;/div&gt;
                  &lt;p class="album_title"&gt;Star Global Alumni Conference 2015&lt;/p&gt;
                &lt;/div&gt;
              &lt;/a&gt;
              &lt;a class="album_anchor" href="/gallery/albums/356"&gt;
                &lt;div class="picture album"&gt;
                  &lt;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);"&gt;
                  &lt;/div&gt;
                  &lt;p class="album_title"&gt;Nostalgia-1980s&lt;/p&gt;
                &lt;/div&gt;
              &lt;/a&gt;
              &lt;a class="album_anchor" href="/gallery/albums/362"&gt;
                &lt;div class="picture album"&gt;
                  &lt;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);"&gt;
                  &lt;/div&gt;
                  &lt;p class="album_title"&gt;StarAANA Formative Years&lt;/p&gt;
                &lt;/div&gt;
              &lt;/a&gt;
              &lt;a class="album_anchor" href="/gallery/albums/392"&gt;
                &lt;div class="picture album"&gt;
                  &lt;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);"&gt;
                  &lt;/div&gt;
                  &lt;p class="album_title"&gt;Celebration @ Star&lt;/p&gt;
                &lt;/div&gt;
              &lt;/a&gt;
              &lt;a class="album_anchor" href="/gallery/albums/406"&gt;
                &lt;div class="picture album"&gt;
                  &lt;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);"&gt;
                  &lt;/div&gt;
                  &lt;p class="album_title"&gt;Felicitation of Prof. Selvarajan &amp;amp; Mrs. Indira Devi for their generous contribution&lt;/p&gt;
                &lt;/div&gt;
              &lt;/a&gt;
              &lt;a class="album_anchor" href="/gallery/albums/456"&gt;
                &lt;div class="picture album"&gt;
                  &lt;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);"&gt;
                  &lt;/div&gt;
                  &lt;p class="album_title"&gt;StarAANA: Faculty and Student Visits&lt;/p&gt;
                &lt;/div&gt;
              &lt;/a&gt;
              &lt;a class="album_anchor" href="/gallery/albums/587"&gt;
                &lt;div class="picture album"&gt;
                  &lt;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);"&gt;
                  &lt;/div&gt;
                  &lt;p class="album_title"&gt;Panel Discussion on: "Entrepreneurship or Employment: What governs the Choice?"&lt;/p&gt;
                &lt;/div&gt;
              &lt;/a&gt;
              &lt;a class="album_anchor" href="/gallery/albums/1859"&gt;
                &lt;div class="picture album"&gt;
                  &lt;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);"&gt;
                  &lt;/div&gt;
                  &lt;p class="album_title"&gt;Star  Gifts&lt;/p&gt;
                &lt;/div&gt;
              &lt;/a&gt;
              &lt;a class="album_anchor" href="/gallery/albums/1931"&gt;
                &lt;div class="picture album"&gt;
                  &lt;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);"&gt;
                  &lt;/div&gt;
                  &lt;p class="album_title"&gt;Chemeng 2005-2007&lt;/p&gt;
                &lt;/div&gt;
              &lt;/a&gt;&lt;/div&gt;
              &lt;p class="cB"&gt;&lt;/p&gt;
              &lt;div id="loading" style="display: none;"&gt;
                &lt;img src="/static/img/loading.gif"&gt;
              &lt;/div&gt;
              &lt;div id="gallery_done"&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>The above given is my html code.. Here I had given 2 filter option (i.e) filter by year and filter by event. When the user selects a particular year or event from the respective select box, the images have to automatically get filtered accordingly and the final result should display as per that filter.. For that what should I do to get it?? Kindly provide me a right solution for it.. </p>