Jump to content

Filtering Photo Gallery


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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...