Jump to content

Filtering Photo Gallery


John B

Recommended Posts

I am using an HTML and JavaScript code titled 'Portfolio with Filtering'. For some reason, when clicking the filter buttons, the page keeps reloading to show all images and not the filtered ones. I think it has something to do with the page refreshing every time a button is clicked and the refresh defaults back to the 'show all' filter instead of what to show when the button is clicked. Any assistance would be greatly appreciated. 

Link to comment
Share on other sites

  • 4 months later...

 

Hello,  @John B

Please try this code,To filter photo gallery:

HTML Code:

<div class="container">
  <div class="row">
    <div class="col-lg-12">
    <div class="portfolioFilter clearfix">
      <a href="#" data-filter="*" class="current">All Categories</a>
      <a href="#" data-filter=".webTemplates">Web Templates</a>
      <a href="#" data-filter=".logos">Logos</a>
      <a href="#" data-filter=".drawings">Drawings</a>
      <a href="#" data-filter=".ui">UI Elements</a>
    </div>
      </div>
    <div class="portfolioContainer">

      <div class="webTemplates objects">
        <img src="https://mir-s3-cdn-cf.behance.net/projects/202/cc99b535336825.Y3JvcCwxMzk1LDEwOTEsMCw3ODA.png" alt="image">
      </div>

      <div class="drawings places">
        <img src="https://mir-s3-cdn-cf.behance.net/projects/202/d4cfa934191261.Y3JvcCw2MTMsNDc5LDQsMjA0.jpg" alt="image">
      </div>

      <div class="webTemplates food">
        <img src="https://mir-s3-cdn-cf.behance.net/projects/202/11893193.5482088f6f391.png" alt="image">
      </div>

      <div class="logos drawings">
        <img src="https://mir-s3-cdn-cf.behance.net/projects/202/be4b9728308865.55b92edb950fc.jpg" alt="image">
      </div>

      <div class="webTemplates">
        <img src="https://mir-s3-cdn-cf.behance.net/projects/202/12963199.548365055868a.png" alt="image">
      </div>

      <div class="ui">
        <img src="https://mir-s3-cdn-cf.behance.net/projects/202/20342607.5434c04b49254.png" alt="image">
      </div>

      <div class="drawings">
        <img src="https://mir-s3-cdn-cf.behance.net/projects/202/b11bbb26474383.555f91fd42584.jpg" alt="image">
      </div>

      <div class="webTemplates">
        <img src="https://mir-s3-cdn-cf.behance.net/projects/202/14385875.548573dae7a09.jpg" alt="image">
      </div>

      <div class="drawings">
        <img src="https://mir-s3-cdn-cf.behance.net/projects/202/14569777.5485b3876a1b9.png" alt="image">
      </div>
      <div class="logos">
        <img src=" https://mir-s3-cdn-cf.behance.net/projects/202/1d854a24500155.5505cccd057a4.jpg" alt="image">
      </div>
      <div class="ui">
        <img src="https://mir-s3-cdn-cf.behance.net/projects/202/f9b95b26406487.555cc1fded76f.jpg" alt="image">
      </div>
      
      <div class="logos">
        <img src="https://mir-s3-cdn-cf.behance.net/projects/202/181a7b35469661.Y3JvcCw3NjUsNTk5LDY3LDA.png" alt="image">
      </div>
    </div>
  </div>
</div>

CSS Code:

body {
  font-family: Arial;
}

a:focus {
  outline: none;
}

.portfolioFilter {
  padding: 15px 0;
}

.portfolioFilter a {
  margin-right: 6px;
  color: #666;
  text-decoration: none;
  border: 1px solid #ccc;
  padding: 4px 15px;
  border-radius: 50px;
  display: inline-block;
}

.portfolioFilter a.current {
  background: #1e1e1e;
  border: 1px solid #1e1e1e;
  color: #f9f9f9;
}
.portfolioContainer{
  border: 1px solid #eee;
  border-radius: 3px;
}
img {
  margin: 5px;
  max-width:100%;
}

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  transition-property: transform, opacity;
}

JQuery Code

$(window).load(function(){
    var $container = $('.portfolioContainer');
    $container.isotope({
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        }
    });
 
    $('.portfolioFilter a').click(function(){
        $('.portfolioFilter .current').removeClass('current');
        $(this).addClass('current');
 
        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
         });
         return false;
    }); 
});
I hope above code will be useful for you.

Thank you.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...