In this tutorial, You will get the best Portfolio Gallery with filtering. It is created using jQuery, CSS & HTML. Even It is very simple to use in your project. So, read the complete tutorial to easily learn it.
The portfolio is the collection of multiple galleries is called the portfolio gallery. A gallery might contain an image or text. Even you can filter it by clicking its button. Each button has its category. And it will display the content based on the category.
How to Create a Portfolio Gallery with Filtering Using jQuery
In this tutorial, you will learn with an attractive portfolio gallery. I have created it with three categories such as web designing, web development & programming language.
But you can replace these categories with your own. Even you can easily add more categories. for making changes to the portfolio categories & their content, you need not change jQuery code. this code will work for all.
Remember one thing that you must not remove or change the declared class names. but you can redesign the portfolio gallery using CSS based on your project requirement.
When you click gallery images, Its content will display in a model box.
Now, Configure the following folder project structure
myproject |__images/ |__portfolio.html |__custom-script.js |__style.css |
Include the custom-script.js and style.css in the portfolio.html using the following script
<link rel="stylesheet" href="style.css"> <script src="custom.js"></script>
Before writing the script in jquery, You have to include the following jQuery CDN in your file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Now, read the following steps that will help you to learn the portfolio gallery/
1. Write HTML Code to Create Portfolio Gallery
Write the following HTML code to create a static Portfolio Gallery. In this code, you can add more categories & their content.
File Name: portfolio.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="custom.js">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="portfolio-content">
<!--===category1====-->
<div class="all category1" rel-data="1">
<div class="content" title="click to view Details ">
<img src="images/html.jpg">
</div>
</div>
<div class="all category1" rel-data="2">
<div class="content" title="click to view Details ">
<img src="images/css.jpg">
</div>
</div>
<div class="all category1" rel-data="3">
<div class="content" title="click to view Details ">
<img src="images/javascript.png">
</div>
</div>
<div class="all category1" rel-data="4">
<div class="content" title="click to view Details ">
<img src="images/boot.jpg">
</div>
</div>
<!--===category1====-->
<!--===category2====-->
<div class="all category2" rel-data="5">
<div class="content" title="click to view Details ">
<img src="images/php1.jpg">
</div>
</div>
<div class="all category2" rel-data="6">
<div class="content" title="click to view Details ">
<img src="images/node.jpg">
</div>
</div>
<div class="all category2" rel-data="7">
<div class="content" title="click to view Details ">
<img src="images/drupal.png">
</div>
</div>
<div class="all category2" rel-data="8">
<div class="content" title="click to view Details ">
<img src="images/wordpress.png">
</div>
</div>
<div class="all category2" rel-data="9">
<div class="content" title="click to view Details ">
<img src="images/net.png">
</div>
</div>
<div class="all category2" rel-data="10">
<div class="content" title="click to view Details ">
<img src="images/magento.png">
</div>
</div>
<div class="all category2" rel-data="11">
<div class="content" title="click to view Details ">
<img src="images/laravel.jpg">
</div>
</div>
<div class="all category2" rel-data="12">
<div class="content" title="click to view Details ">
<img src="images/cart.jpg">
</div>
</div>
<!--===category2====-->
<!--===category3====-->
<div class="all category3" rel-data="13">
<div class="content" title="click to view Details ">
<img src="images/c.jpg">
</div>
</div>
<div class="all category3" rel-data="14">
<div class="content" title="click to view Details ">
<img src="images/java.jpg">
</div>
</div>
<div class="all category3" rel-data="15">
<div class="content" title="click to view Details ">
<img src="images/python.png">
</div>
</div>
<div class="all category3" rel-data="16">
<div class="content" title="click to view Details ">
<img src="images/cplus.jpg">
</div>
</div>
<!--===category3====-->
<!--portfolio model-->
<!--===model box1===-->
<div class="modal-box">
<div id="1" class="modals">
<div class="close">x</div>
<div class="modal-content">
<h3>HTML Tutorial</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
<div class="more-btn"> <a href="#">View More</a></div>
</div>
</div>
</div>
<!--===model box2===-->
<div class="modal-box">
<div id="2" class="modals">
<div class="close">x</div>
<div class="modal-content">
<h3>CSS Tutorial</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
<div class="more-btn"> <a href="#">View More</a></div>
</div>
</div>
</div>
<!--===model box3===-->
<div class="modal-box">
<div id="3" class="modals">
<div class="close">x</div>
<div class="modal-content">
<h3>JavaScript Tutorial</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
<div class="more-btn"> <a href="#">View More</a></div>
</div>
</div>
</div>
<!--===model box4===-->
<div class="modal-box">
<div id="4" class="modals">
<div class="close">x</div>
<div class="modal-content">
<h3>Bootstrap Tutorial</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
<div class="more-btn"> <a href="#">View More</a></div>
</div>
</div>
</div>
<!--===model box5===-->
<div class="modal-box">
<div id="5" class="modals">
<div class="close">x</div>
<div class="modal-content">
<h3>PHP Tutorial</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
<div class="more-btn"> <a href="#">View More</a></div>
</div>
</div>
</div>
<!--===model box6===-->
<div class="modal-box">
<div id="6" class="modals">
<div class="close">x</div>
<div class="modal-content">
<h3>Node.js Tutorial</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
<div class="more-btn"> <a href="#">View More</a></div>
</div>
</div>
</div>
<!--===model box7===-->
<div class="modal-box">
<div id="7" class="modals">
<div class="close">x</div>
<div class="modal-content">
<h3>Drupal Tutorial</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
<div class="more-btn"> <a href="#">View More</a></div>
</div>
</div>
</div>
<!--===model box8===-->
<div class="modal-box">
<div id="8" class="modals">
<div class="close">x</div>
<div class="modal-content">
<h3>Wordpress Tutorial</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
<div class="more-btn"> <a href="#">View More</a></div>
</div>
</div>
</div>
<!--===model box9===-->
<div class="modal-box">
<div id="9" class="modals">
<div class="close">x</div>
<div class="modal-content">
<h3>.Net Tutorial</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
<div class="more-btn"> <a href="#">View More</a></div>
</div>
</div>
</div>
<!--===model box10===-->
<div class="modal-box">
<div id="10" class="modals">
<div class="close">x</div>
<div class="modal-content">
<h3>Magento Tutorial</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
<div class="more-btn"> <a href="#">View More</a></div>
</div>
</div>
</div>
<!--===model box11===-->
<div class="modal-box">
<div id="11" class="modals">
<div class="close">x</div>
<div class="modal-content">
<h3>Laravel Tutorial</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
<div class="more-btn"> <a href="#">View More</a></div>
</div>
</div>
</div>
<!--===model box12===-->
<div class="modal-box">
<div id="12" class="modals">
<div class="close">x</div>
<div class="modal-content">
<h3>Opencart Tutorial</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
<div class="more-btn"> <a href="#">View More</a></div>
</div>
</div>
</div>
<!--===model box13===-->
<div class="modal-box">
<div id="13" class="modals">
<div class="close">x</div>
<div class="modal-content">
<h3>C Language</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
<div class="more-btn"> <a href="#">View More</a></div>
</div>
</div>
</div>
<!--===model box14===-->
<div class="modal-box">
<div id="14" class="modals">
<div class="close">x</div>
<div class="modal-content">
<h3>Core Java</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
<div class="more-btn"> <a href="#">View More</a></div>
</div>
</div>
</div>
<!--===model box15===-->
<div class="modal-box">
<div id="15" class="modals">
<div class="close">x</div>
<div class="modal-content">
<h3>Python Tutorial</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
<div class="more-btn"> <a href="#">View More</a></div>
</div>
</div>
</div>
<!--===model box16===-->
<div class="modal-box">
<div id="16" class="modals">
<div class="close">x</div>
<div class="modal-content">
<h3>C++ Language</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
<div class="more-btn"> <a href="#">View More</a></div>
</div>
</div>
</div>
<!-- portfolio model-->
</div>
</body>
</html>
2. Write CSS Code to Design
Write the following CSS code to design a portfolio gallery. Even you can write more CSS code according to your project requirement.
File Name- style.css
.portfolio-btn .btn{
background-color: #119cd5;
border: none;
padding: 10px 15px;
color: white;
margin: 5px 2px;
cursor: pointer;
font-size: 18px;}
.portfolio-btn .btn:focus{
outline:none;}
.portfolio-content .all{
-ms-flex: 0 0 23%;
flex: 0 0 23%;
max-width: 23%;
position: relative;
width: 100%;
padding: 12px;
cursor: pointer;}
.portfolio-content .all .content:hover{
box-shadow: 0px 0px 15px #00000059;}
.portfolio-btn{
text-align:center}
.portfolio-content{
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;}
.portfolio-content .all .content{
height: 200px;
width: 100%;
border: 1px solid lightgray;
transition: .5s;
background: #f4f4f4;
padding: 10px;
box-sizing: border-box;}
@media only screen and (max-width: 600px){
.portfolio-content .all{
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;}}
/* for portfolio model */
.portfolio-container .modal-box {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
display: none;}
.portfolio-container .modals {
width: 70%;
height: auto;
position: absolute;
margin: auto;
background:#14a3df;
top: 100px;
left: 0;
right: 0;
bottom: auto;
border: 1px solid lightgray;}
.portfolio-container .modal-content{
padding: 10px 20px 30px 20px;}
.portfolio-container .modal-content h3{
text-align: center;
color: white;
font-weight: bolder;
position: relative;
font-size: 32px;}
.portfolio-container .modal-content p{
text-align: justify;
color: white;
font-size: 18px;}
.portfolio-container .modal-content .more-btn{
text-align: center;}
.portfolio-container .modal-content .more-btn a{
text-decoration: none;
border-bottom: 1px solid #eff1f2;
border-top: 1px solid #eff1f2;
padding: 5px 10px;
color: white;
background: #0784b8;}
.portfolio-container .close {
position: absolute;
right: 10px;
top: 0;
font-weight: bolder;
font-size: 30px;
cursor: pointer;
color: white;}
.portfolio-container .close:hover {
color: black;}
.portfolio-content img{
object-fit: fill;
width: 100%;
height: 100%;}
.active{
background: #0270ba !important;}
3. Write jQuery code to filter Portfolio Gallery
Write the jquery code to filter the portfolio gallery based on category.
File Name – custom-script.js
$(document).ready(function(){
$('.portfolio-btn').find('.btn').on('click',function(){
$('.portfolio-btn').find('.btn').removeClass("active");
$(this).addClass("active");
return false;
});
$(function() {
var selectedClass = "";
$('.portfolio-btn').find('.btn').on('click',function(){
selectedClass = $(this).attr("rel");
$(".portfolio-content").find('.all').fadeOut(200);
$(".portfolio-content").find(".all." + selectedClass).delay(200).fadeIn(200);
});
});
// open modal
$(".portfolio-container").find('.all').on('click',function() {
var modalId = Number($(this).attr("rel-data"));
$('.portfolio-container').find('#'+modalId).parents('.modal-box').fadeIn();
});
// close modal
$('.portfolio-container').find(".close").click(function() {
$(this).parents('.modal-box').fadeOut();
});
// close model on scroll
$(document).scroll(function(){
$('.portfolio-container').find('.modal-box').fadeOut();
});
});
Also, Read More Tutorials
Real-time Form Validation Using jQuery
Suggestion
I have provided the best portfolio gallery in jQuery. It is very simple to integrate into your project. Now you can easily create a more complex portfolio gallery. If you have any problem using it, ask me through below comment box.
If you like this tutorial and It is useful then share it with your friends. I will share more jQuery tutorials on this blog site. So, Continue to visit to learn more web coding with me.