
The Responsive Portfolio Gallery is used to display your Portfolio on your websites to your users in front end. But if a customer or users want some specific contents, then we need to add some filters on the Portfolio Gallery.
A Super easy way to create attractive and a Responsive Portfolio Gallery with Filtering for your company websites. The Portfolio image gallery is fully Responsive and its supports with all devices like Desktop PC, Tablets, Mobile and MacBook.
You can easily configure in your website.
In this article, we will create a filterable Portfolio Gallery using HTML, CSS, Bootstrap and JavaScript.
In this Portfolio Gallery, we have added some buttons which we will use to filter the images on the basis of CSS Class.
1 2 3 4 5 6 |
<link rel="stylesheet" href="<a href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" target="_blank" rel="noreferrer noopener">https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css</a>"> <link href="<a href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" target="_blank" rel="noreferrer noopener">https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css</a>" rel="stylesheet" > <link rel="stylesheet" type="text/css" href="css/prettyPhoto.css"> <script src="js/jquery-1.6.1.min.js"></script> <script src="js/jquery.prettyPhoto.js"></script> <link rel="stylesheet" type="text/css" href="css/style.css"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"></gwmw></gwmw><gwmw style="display:none;"></gwmw></gwmw></gwmw><gwmw style="display:none;"></gwmw></gwmw></gwmw></gwmw><gwmw style="display:none;"> |
The following HTML code is used to filter the Images from the Image gallery.
1 2 3 4 5 6 7 |
<div align="center"> <a class="btn btn-default filter-button" data-filter="all">All</a> <a class="btn btn-default filter-button" data-filter="html">HTML</a> <a class="btn btn-default filter-button" data-filter="css">CSS3</a> <a class="btn btn-default filter-button" data-filter="javascript">Javascript</a> <a class="btn btn-default filter-button" data-filter="php">PHP</a> </div> |
The following HTML Code is used to create the Image Gallery.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<div class="row flex-center popular-gallery galleryh clearfix mb-5"> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 mt-4 filter html"> <div class="single-gallery mb-20"> <div class="gallery-img"> <img src="images/thumbnails/html-logo.png" alt="" style=" width: 100%;"/> </div> <div class="gallery-details"> <a href="images/thumbnails/html-logo.png" rel="prettyPhoto[gallery2]" class="gallery-btn"> </a> </div> </div> </div> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 mt-4 filter javascript"> <div class="single-gallery mb-20 "> <div class="gallery-img"> <img src="images/thumbnails/js.jpg" alt="" style=" width: 100%;"/> </div> <div class="gallery-details"> <a href="images/thumbnails/js.jpg" rel="prettyPhoto[gallery2]" class="gallery-btn"> </a> </div> </div> </div> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 mt-4 filter php javascript"> <div class="single-gallery mb-20 "> <div class="gallery-img"> <img src="images/thumbnails/php-java.jpg" alt="" style=" width: 100%;"/> </div> <div class="gallery-details"> <a href="images/thumbnails/php-java.jpg" rel="prettyPhoto[gallery2]" class="gallery-btn"> </a> </div> </div> </div> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 mt-4 filter css"> <div class="single-gallery mb-20 "> <div class="gallery-img"> <img src="images/thumbnails/css.jpg" alt="" style=" width: 100%;"/> </div> <div class="gallery-details"> <a href="images/thumbnails/css.jpg" rel="prettyPhoto[gallery2]" class="gallery-btn"> </a> </div> </div> </div> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 mt-4 filter html css"> <div class="single-gallery mb-20 "> <div class="gallery-img"> <img src="images/thumbnails/html-css.jpg" alt="" style=" width: 100%;"/> </div> <div class="gallery-details"> <a href="images/thumbnails/html-css.jpg" rel="prettyPhoto[gallery2]" class="gallery-btn"> </a> </div> </div> </div> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 mt-4 filter php"> <div class="single-gallery mb-20 "> <div class="gallery-img"> <img src="images/thumbnails/php.jpg" alt="" style=" width: 100%;"/> </div> <div class="gallery-details"> <a href="images/thumbnails/php.jpg" rel="prettyPhoto[gallery2]" class="gallery-btn"> </a> </div> </div> </div> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
$(document).ready(function(){ $(".filter-button").click(function(){ var value = $(this).attr('data-filter'); if(value == "all") { $('.filter').show('1000'); } else { $(".filter").not('.'+value).hide('4000'); $('.filter').filter('.'+value).show('4000'); } }); $(".btn").each(function(){ $(this).click(function(){ $(this).addClass("active"); $(this).siblings().removeClass("active"); }); }); }); $(document).ready(function(){ $("area[rel^='prettyPhoto']").prettyPhoto(); $(".galleryh:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'normal',theme:'light_square',slideshow:3000, autoplay_slideshow: true}); $(".galleryh:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'fast',slideshow:10000, hideflash: true}); }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 |
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"); body { background: #fff; font-family: "Roboto", sans-serif; } body{ overflow-x: hidden; } .flex-center{ align-items: center; } .filterDiv { color: #ffffff; line-height: 100px; text-align: center; margin: 2px; display: none; } .show-f { display: block; } a{ text-decoration: none; } /* Style the buttons */ .filter-button { font-size: 18px; border: 1px solid #3444F1; border-radius: 5px; text-align: center; color: #3444F1; margin-bottom: 30px; } .filter-button:hover { font-size: 18px; border: 1px solid #3444F1; border-radius: 5px; text-align: center; color: #ffffff; background-color: #3444F1; } .active { background-color: #3444F1; color: white; } .popular-gallery .single-gallery { position: relative } .popular-gallery .single-gallery .gallery-img { overflow: hidden; position: relative; z-index: 0 } .popular-gallery .single-gallery .gallery-img::before { position: absolute; /* width: 100%; height: 100%;*/ bottom: 10px; top: 10px; left: 10px; right: 10px; content: ""; z-index: 1; -webkit-transition: all .4s ease-out 0s; -moz-transition: all .4s ease-out 0s; -ms-transition: all .4s ease-out 0s; -o-transition: all .4s ease-out 0s; transition: all .4s ease-out 0s } .popular-gallery .single-gallery .gallery-img img { width: 100%; transform: scale(1); -webkit-transition: all .4s ease-out 0s; -moz-transition: all .4s ease-out 0s; -ms-transition: all .4s ease-out 0s; -o-transition: all .4s ease-out 0s; transition: all .4s ease-out 0s; min-height: 260px; object-fit: cover; } .popular-gallery .single-gallery .gallery-details { position: absolute; left: 0px; right: 0; top: 40%; text-align: center; margin: 0 auto; -webkit-transition: all .4s ease-out 0s; -moz-transition: all .4s ease-out 0s; -ms-transition: all .4s ease-out 0s; -o-transition: all .4s ease-out 0s; transition: all .4s ease-out 0s } .popular-gallery .single-gallery .gallery-details h4{ border: 0px !important; } .popular-gallery .single-gallery .gallery-details h4 a { color: #fff; font-size: 14px; font-weight: 600; display: inline-block; margin-bottom: 2px } @media (max-width: 575px) { .popular-gallery .single-gallery .gallery-details h4 a { font-size: 18px; line-height: 1.1 } .courselist { margin-left: 0px; margin-right: 0px; } } .popular-gallery .single-gallery .gallery-details p { color: #fff; font-size: 16px; font-weight: 300 } .popular-gallery .single-gallery .gallery-details .gallery-btn { -webkit-transition: all .4s ease-out 0s; -moz-transition: all .4s ease-out 0s; -ms-transition: all .4s ease-out 0s; -o-transition: all .4s ease-out 0s; transition: all .4s ease-out 0s; padding: 7px 13px; color: #3f51b5; display: inline-block; font-size: 24px; visibility: hidden; opacity: 0; } .popular-gallery .single-gallery .gallery-details .gallery-btn:after { content: "\f00e"; font-family: 'FontAwesome'; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; padding-left: 0px; font-size: 40px; } .popular-gallery .single-gallery .gallery-details .gallery-btn:hover { color: #EA5252 } .popular-gallery .single-gallery .gallery-details .gallery-btn i { font-size: 10px; padding: 0; margin: 0; position: relative; left: -3px } .single-gallery:hover .gallery-img::before { background:rgb(255 255 255 / 51%); } .single-gallery:hover .gallery-img img { transform: scale(1.05) } .single-gallery:hover .gallery-details { top: 50%; transform: translateY(-50%) } .single-gallery:hover .gallery-details .gallery-btn { visibility: visible; opacity: 1 } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Portfolio Gallery with Filtering | Best Portfolio Plugin | Photo Gallery with Filter</title> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" > <link rel="stylesheet" type="text/css" href="css/prettyPhoto.css"> <script src="js/jquery-1.6.1.min.js"></script> <script src="js/jquery.prettyPhoto.js"></script> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <section class="mt-5"> <div class="container"> <div class="row flex-center"> <div class="col-md-12 text-center "> <h2 class="mb-5">Responsive Portfolio Filter Gallery using HTML CSS & Javascript | Filterable Image Gallery</h2> <div align="center"> <a class="btn btn-default filter-button" data-filter="all">All</a> <a class="btn btn-default filter-button" data-filter="html">HTML</a> <a class="btn btn-default filter-button" data-filter="css">CSS3</a> <a class="btn btn-default filter-button" data-filter="javascript">Javascript</a> <a class="btn btn-default filter-button" data-filter="php">PHP</a> </div> </div> <div class="row flex-center popular-gallery galleryh clearfix mb-5"> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 mt-4 filter html"> <div class="single-gallery mb-20"> <div class="gallery-img"> <img src="images/thumbnails/html-logo.png" alt="" style=" width: 100%;"/> </div> <div class="gallery-details"> <a href="images/thumbnails/html-logo.png" rel="prettyPhoto[gallery2]" class="gallery-btn"> </a> </div> </div> </div> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 mt-4 filter javascript"> <div class="single-gallery mb-20 "> <div class="gallery-img"> <img src="images/thumbnails/js.jpg" alt="" style=" width: 100%;"/> </div> <div class="gallery-details"> <a href="images/thumbnails/js.jpg" rel="prettyPhoto[gallery2]" class="gallery-btn"> </a> </div> </div> </div> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 mt-4 filter php javascript"> <div class="single-gallery mb-20 "> <div class="gallery-img"> <img src="images/thumbnails/php-java.jpg" alt="" style=" width: 100%;"/> </div> <div class="gallery-details"> <a href="images/thumbnails/php-java.jpg" rel="prettyPhoto[gallery2]" class="gallery-btn"> </a> </div> </div> </div> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 mt-4 filter css"> <div class="single-gallery mb-20 "> <div class="gallery-img"> <img src="images/thumbnails/css.jpg" alt="" style=" width: 100%;"/> </div> <div class="gallery-details"> <a href="images/thumbnails/css.jpg" rel="prettyPhoto[gallery2]" class="gallery-btn"> </a> </div> </div> </div> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 mt-4 filter html css"> <div class="single-gallery mb-20 "> <div class="gallery-img"> <img src="images/thumbnails/html-css.jpg" alt="" style=" width: 100%;"/> </div> <div class="gallery-details"> <a href="images/thumbnails/html-css.jpg" rel="prettyPhoto[gallery2]" class="gallery-btn"> </a> </div> </div> </div> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 mt-4 filter php"> <div class="single-gallery mb-20 "> <div class="gallery-img"> <img src="images/thumbnails/php.jpg" alt="" style=" width: 100%;"/> </div> <div class="gallery-details"> <a href="images/thumbnails/php.jpg" rel="prettyPhoto[gallery2]" class="gallery-btn"> </a> </div> </div> </div> </div> </div> </div> </section> <script src="js/scripts.js" ></script> </body> </html> |
Hope this article will help you to create a Portfolio Gallery for your website.