2017-02-25 47 views
2
<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个过滤器选项(即)按年过滤和按事件过滤。当用户从相应的选择框中选择特定年份或事件时,图像必须相应地自动进行过滤,并且最终结果应该按照该过滤器显示。为此,我应该怎么做才能得到它?请给我一个正确的解决方案..如何制作自动过滤画廊部分?

回答

1

这是一个非常广泛的问题。

基本上,您有两种选择:在客户端进行筛选或在服务器端进行筛选。

也许这个html是建立在使用来自数据库的数据的服务器上的。在这种情况下,您必须过滤服务器上的列表。更改选择列表必须向选定参数的服务器发送请求,并发回新的相册列表。您在这里仍然有两个选项:整页重载或使用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进行过滤。

你看,还有很长的路要走。因此,在这个问题上缩小你的问题。按照现状来看,它太宽泛了,无法得到一个简洁的答案。