How to make auto filter gallery section?

<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>

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..

Answers 1

  • This is a very broad question.

    Basically, you have two options : filter on the client side or filter on the server side.

    Probably this html is built on the server using data from a database. In this case, you have to to filter the list on the server. Changing the select list must send a request to the server with the parameters selected, and send back a new list of albums. You still have two options here :a full page reload or using Ajax.

    If you want to do everything client side, your code misses the important information. You have to add it to the album's code.

    How do you know which year this is, or what event?

     <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>
    

    You have to include the data somewhere. Again there are many ways to do it. For instance, you could use data attributes, like this :

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

    This will allow you then to filter with Javascript or jquery.

    You see, there is still a long way to go. So work on this problem an narrow down your question. As it stands it is way too broad to get a concise answer.


Related Articles