John B Posted September 26, 2019 Share Posted September 26, 2019 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 More sharing options...
Funce Posted September 26, 2019 Share Posted September 26, 2019 Perhaps you could include a small snippet of code that is showing the problem? Link to comment Share on other sites More sharing options...
Makwana Prahlad Posted February 25, 2020 Share Posted February 25, 2020 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now