Image Gallery – CodingNepal

Responsive Personal Portfolio Website in HTML CSS and Bootstrap

CodingNepal — Sun, 28 May 2023 06:57:51 +0000

Building a personal portfolio website is a valuable skill for web developers. With HTML, CSS, and Bootstrap, you can create an attractive, responsive, and functional website to showcase your talent or services.

In this blog post, we will guide you through the process of building a responsive portfolio website that includes key sections such as Home, Skills, Portfolio, About Us, Curriculum Vitae (CV), Contact Us Form, and Footer.

The Home section will feature a navigation bar, a background image, descriptive text, and a call-to-action button. In the skills section, visually appealing cards will display your skills and expertise. The Portfolio section will showcase your accomplished projects using captivating image cards.

The About Us section will present your achievements in a vertical timeline format, highlighting your professional journey. The Curriculum Vitae (CV) section will showcase essential personal and professional details in a resume format.

The Contact Us section will feature a contact form with fields for email, username, phone number, and message, and finally, the Footer section will feature a copyright message and some social media buttons.

https://www.codingnepalweb.com/wp-content/uploads/2023/05/Responsive-Personal-Portfolio-Website-in-HTML-CSS-and-Bootstrap-only.mp4

Steps For Creating Responsive Portfolio Website in Bootstrap

To create a responsive personal portfolio website using HTML, CSS, and Bootstrap follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Download the images folder and put this folder inside the project folder. This folder has all the images that will be used for this portfolio website. But, if you want, you can use your own images.

To start, add the following HTML codes to your index.html file: These codes include all the necessary CDN links, website layout, and different sections. Since we’ve used Bootstrap for the portfolio website, it’s nearly complete here without the need for extensive custom CSS.

Remember, adding your own personal touch by customizing the website with your unique details and requirements can greatly enhance its overall appeal.



  
    
    
    Portfolio Website | CodingNepal
    
    
    
    
    
    
  
  
    
    
      
        
          James Anderson
          
          
            
              
                SKILLS
              
              
                PORTFOLIO
              
              
                ABOUT
              
              
                CURRICULUM VITAE
              
              
                CONTACT
              
          
        
      
    

    
    
      
        James Anderson
        Information & Computer Systems 
 student
        TELL ME MORE
      
    
    
    
    
      
        
          SKILLS
          Continuously improving my skills and knowledge in the field.
        
      
      
        
          
          Front-end Development
          Proficient in HTML, CSS, and JavaScript. Experienced in responsive web design, building user-friendly interfaces, and using modern frameworks like ReactJS.
        
        
          
          Back-end Development
          Skilled in server-side programming using technologies like Node.js and Express. Experience working with databases such as MongoDB and MySQL.
        
        
          
          Mobile App Development
          Proficient in developing mobile apps for iOS and Android using frameworks like React Native. Experienced in building engaging and intuitive mobile user interfaces.
        
      
    

    
    
      
        
          PORTFOLIO
          A collection of projects I've worked on.
        
        
          
            
              
              
                E-commerce Website
                HTML/CSS/JavaScript
              
            
          
          
            
              
              
                Responsive Landing Page
                HTML/CSS/Bootstrap
              
            
          
          
            
              
              
                Calculator App
                HTML/CSS/JavaScript
              
            
          
          
            
              
              
                Blog Website
                HTML/CSS/PHP
              
            
          
          
            
              
              
                Task Management App
                ReactJS
              
            
          
          
            
              
              
                Data Visualization
                Python/Plotly
              
            
          
        
            
    

    
    
      
        
          ABOUT
          Learn more about me, my background, and what motivates me.
        
      
      
        
          1995-2008
          Early Passion for Technology
          From an early age, I became fascinated with computers and programming. Starting with basic HTML and CSS, I gradually expanded my skills to include JavaScript and various frameworks.
        
        
          
        
      
      
        
          
        
        
          2008-2014
          Higher Education and Career Growth
          During my university years, I studied computer science and gained hands-on experience through internships and freelance projects. This period fueled my passion for creating innovative solutions and solving complex problems.
        
      
      
        
          2014-Present
          Professional Excellence and Continuous Learning
          Throughout my career, I have consistently sought opportunities to refine my skills and stay updated with the latest technologies. I strive for excellence in every project I undertake and aim to deliver valuable and impactful results.
        
        
          
        
      
      
        
          
        
        
          Future
          Continuing to Make a Difference
          I am committed to leveraging my skills and expertise to contribute to meaningful projects that have a positive impact on society. I am eager to take on new challenges and collaborate with talented individuals to create innovative solutions.
        
      
      
        
          Your
Next
Hire
        
            
    

    
    
      
        
          CURRICULUM VITAE
          A small sampling of some of the projects I've worked on as a student of the ICS program.
        
      
      
        
          
          James Anderson
          
             your.email@example.com
             (123) 456-7890
             Your Address
          
          
            
            
            
          
          Technical Skills
          
            HTML
            CSS
            JavaScript
            
          
          Personal Interests
          
            Interest 1
            Interest 2
            Interest 3
            
          
        
        
          Profile
          
          Write a brief description of yourself, your background, and your goals. Highlight your key strengths and experiences.
          Highlights of Qualifications
          
          
            Qualification 1
            Qualification 2
            Qualification 3
            
          
          Education
          
          
            Year - Year
            University/Institution
            Degree/Program
          
          Additional Courses & Training
          
          
            Year
            Course/Training
            Institution/Organization
          
          Work Experience
          
          
            Year - Year
            Job Position
            Company/Organization
            
          
          Extracurricular Activities
          
          
            Organization Name
            Role/Position
            Details of your involvement and contributions
          
        
            
    

     
     
      
        
          CONTACT ME
          Interested if I'd be the right fit for your team? Fill in this form and I will respond within 24-48 hours.
        
        
          
            
              
                
                  
                    
                    Enter Name*
                  
                  
                    
                    Enter Email*
                  
                  
                    
                    Enter Phone*
                  
                
                
                  
                  Enter Message*
                
                
                  
                
              
  
            
          
        
       
     

     
     
      
        Copyright © 2023 James Anderson

Next, add the following few custom CSS codes to your style.css file to style some elements, add background images, and do other things on the website. You can customize this code to your liking by adjusting the color, font, size, and other CSS properties.

/* Color variables */
:root {
  --white-color: #fff;
  --bg-color: #fff;
  --gray-color: #ccc;
}

/* Changing background color */
body {
  background: var(--bg-color) !important;
}

/* Changing link color */
.nav-item .nav-link {
  color: var(--white-color);
}

/* Hero section background image */
.hero {
  height: 100vh;
  background-image: url("../images/home-bg.jpg");
  background-repeat: no-repeat;
  background-position: 60% 0%;
  background-size: cover;
  background-attachment: fixed;
}

#skills i {
  height: 100px;
  width: 100px;
}

#portfolio img {
  height: 300px;
  object-fit: cover;
}

#about .img,
#about img,
.hire-text h2 {
  position: relative;
}

/* Timeline background line */
#about .img::before {
  content: "";
  left: 50%;
  width: 4px;
  position: absolute;
  height: calc(100% + 140px);
  background: var(--gray-color);
}

#about img,
#about .hire-text h2 {
  width: 140px;
}

#about .hire-text h2 {
  height: 140px;
}

.social-icons a {
  width: 40px;
  height: 40px;
}

footer .social-icons a {
  width: 30px;
  height: 30px;
}

#cv img {
  width: 230px;
}

/* Contact section background image */
#contact {
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-image: url("../images/contact-bg.jpeg");
}

@media screen and (max-width: 990px) {
  #skills .card {
    width: calc(100% / 2 - 10px) !important;
  }
}

@media screen and (max-width: 668px) {
  #skills .card,
  #portfolio .card-wrapper {
    width: 100% !important;
  }
 #about .hire-text h2 {
   height: 70px;
   width: 70px;
 }
}

Conclusion and Final Words

In conclusion, building a responsive portfolio website using HTML, CSS, and Bootstrap is a valuable skill that boosts your online presence and showcases your talents. By following the provided instructions, you’ve successfully created an attractive and functional personal portfolio website.

Additionally, you can explore a wide range of website design templates available on this platform, all built with HTML, CSS, and JavaScript. These templates not only serve as valuable learning resources for aspiring web developers but also provide practical solutions for various purposes.

If you encounter any difficulties while creating your own portfolio website or your code is not working as expected, you can download the source code files for this portfolio website for free by clicking the Download button. You can also view a live demo of it by clicking the View Live button.

Responsive Filterable Image Gallery in HTML Bootstrap & JavaScript

CodingNepal — Fri, 05 May 2023 10:09:50 +0000

A filterable image gallery is a type of image gallery that allows users to filter or sort the displayed images based on certain categories or tags. This is one of the essential elements on today’s website, as it allows users to easily find the images they are interested in without having to scroll through a long list of images.

Creating a filterable image gallery using HTML, Bootstrap, and JavaScript can greatly enhance your web development skills. With Bootstrap, a popular front-end framework, you can easily create responsive website elements that adapt to different screen sizes and devices.

The purpose of this blog post is to provide you with a comprehensive guide on how to create a filterable image gallery using these three essential technologies: HTML, Bootstrap, and JavaScript. The step-by-step instructions and clear explanations in this post will help you to develop a practical understanding of the process involved in building a filterable image gallery.

Steps for a Filterable Image Gallery in Bootstrap and JavaScript

To create a responsive, filterable image gallery in HTML, Bootstrap and JavaScript, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js
Download the images folder from Google Drive and put this folder inside the project folder.

To start, add the following HTML codes to your index.html file to create a basic layout for the image gallery and filter tabs.




  
    
    Filterable Image Gallery Bootstrap | CodingNepal
    
    
    
    
  
  
    
      
      
        
          
          
          
          
        
      

      
      
        
          
          
            Mountains
            Lorem ipsum dolor..
          
        
        
          
          
            Lights
            Lorem ipsum dolor..
          
        
        
          
          
            Nature
            Lorem ipsum dolor..
          
        
        
          
          
            Retro
            Lorem ipsum dolor..
          
        
        
          
          
            Fast
            Lorem ipsum dolor..
          
        
        
          
          
            Classic
            Lorem ipsum dolor..
          
        
        
          
          
            Men
            Lorem ipsum dolor..
          
        
        
          
          
            Girl
            Lorem ipsum dolor..

Next, add the following CSS codes to your style.css file to style the image gallery and make it interactive and beautiful. Since we’ve used Bootstrap, we don’t need to write more CSS.

/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

* {
  font-family: "Poppins", sans-serif;
}

body {
  background: #f1f1f1 !important;
}

body .container {
  max-width: 1100px;
}

#filter-buttons button {
  border-radius: 3px;
  background: #fff;
  border-color: transparent;
}

#filter-buttons button:hover {
  background: #ddd;
}

#filter-buttons button.active {
  color: #fff;
  background: #6c757d;
}

#filterable-cards .card {
  width: 15rem;
  border: 2px solid transparent;
}

#filterable-cards .card.hide {
  display: none;
}

@media (max-width: 600px) {
  #filterable-cards {
    justify-content: center;
  }

  #filterable-cards .card {
    width: calc(100% / 2 - 10px);
  }
}

Finally, add the following JavaScript code to your script.js file to make the image gallery filterable when the user clicks on a specific filter tab.

// Select relevant HTML elements
const filterButtons = document.querySelectorAll("#filter-buttons button");
const filterableCards = document.querySelectorAll("#filterable-cards .card");

// Function to filter cards based on filter buttons
const filterCards = (e) => {
    document.querySelector("#filter-buttons .active").classList.remove("active");
    e.target.classList.add("active");

    filterableCards.forEach(card => {
        // show the card if it matches the clicked filter or show all cards if "all" filter is clicked
        if(card.dataset.name === e.target.dataset.filter || e.target.dataset.filter === "all") {
            return card.classList.replace("hide", "show");
        }
        card.classList.add("hide");
    });
}

filterButtons.forEach(button => button.addEventListener("click", filterCards));

Conclusion and Final Words

I hope this blog post has provided you with the necessary knowledge to build your own filterable image gallery using HTML, Bootstrap, and JavaScript. The coding process was designed to be both intuitive and easy to understand, allowing you to tailor your gallery to your specific needs.

However, if you’re interested in exploring a pure CSS, HTML, and JavaScript approach, I recommend checking out my blog on creating a Responsive Filterable Image Gallery using these technologies. This will provide you with an alternative approach to achieving the same goal, and allow you to expand your web development skillset even further.

In case you face any issues or your code is not performing as intended, you can access the source code files for this filterable image gallery at no cost. Simply click on the download button to get the zip file that contains the project folder with all the necessary source code files and images.

Responsive Masonry Image Gallery with Lightbox in HTML CSS & JavaScript

CodingNepal — Sun, 23 Apr 2023 09:15:40 +0000

Masonry image galleries are an excellent choice for displaying images on websites because they offer a unique and visually appealing layout. However, adding a lightbox effect to the images makes them even better, as it allows users to view the images in more detail.

In this blog post, I will guide you through creating a Responsive Masonry Image Gallery with a Lightbox Effect. The process is straightforward, and even beginners can follow along with ease. We will use HTML, CSS, and JavaScript to create the gallery and style it, ensuring that it is responsive and works well on various devices.

The gallery’s standout feature is its responsive design, meaning it will look great on any device, from desktops to mobile phones. As you create this image gallery, you will gain valuable knowledge about web development, such as building layouts using HTML, styling elements with CSS and making them responsive, and other essential JavaScript concepts.

Steps For Creating Image Gallery with Lightbox in HTML & CSS

To create a responsive masonry image gallery with lightbox effect using HTML, CSS, and vanilla JavaScript, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js
Download the images folder from Google Drive and put this folder inside the project folder. This static image is only used as a search section background.

To start, add the following HTML codes to your index.html file to create a basic layout for the masonry image gallery with image lightbox.




  
    
    Masonry Image Gallery with Lightbox | CodingNepal
    
    
    
    
  
  
    Masonry Image Gallery with Lightbox
    
      
        
          
            
            Image Preview

Next, add the following CSS codes to your style.css file to give a masonry layout for the image gallery and make an image lightbox. Keep in mind that the lightbox is now hidden because I’ve added some CSS properties to hide it. We’ll show it on image click using JavaScript.

/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
h1 {
  text-align: center;
  margin-top: 50px;
}
/* Masonry image gallery styling */
.gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gallery .images {
  gap: 15px;
  max-width: 85%;
  margin: 40px 0;
  columns: 5 310px;
  list-style: none;
}
.gallery .images .img {
  display: flex;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  margin-bottom: 14px;
  border-radius: 4px;
}
.gallery .images img {
  width: 100%;
  transition: transform 0.2s ease;
}

.gallery .images .img:hover img {
  transform: scale(1.1);
}

/* Image lightbox styling */
.lightbox {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  position: fixed;
  visibility: hidden;
  background: rgba(0,0,0,0.65);
}
.lightbox.show {
  visibility: visible;
}
.lightbox .wrapper {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 100%;
  padding: 20px;
  max-width: 850px;
  background: #fff;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.9);
  transition: transform 0.1s ease;
}
.lightbox.show .wrapper {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.wrapper :where(header, .details) {
  display: flex;
  align-items: center;
}
.wrapper header {
  justify-content: space-between;
}
header .details i {
  font-size: 1.7rem;
}
header .details span {
  font-size: 1.2rem;
  margin-left: 10px;
}
header .buttons i {
  height: 40px;
  width: 40px;
  cursor: pointer;
  display: inline-block;
  color: #fff;
  margin-left: 10px;
  background: #6C757D;
  font-size: 1.25rem;
  line-height: 40px;
  text-align: center;
  border-radius: 4px;
  transition: 0.2s ease;
}
header .buttons i:hover {
  background: #5f666d;
}
.wrapper .preview-img {
  display: flex;
  justify-content: center;
  margin-top: 25px;
}
.preview-img .img {
  max-height: 65vh;
}
.preview-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Responsive media query code */
@media screen and (max-width: 688px) {
  .lightbox .wrapper {
    padding: 12px;
    max-width: calc(100% - 26px);
  }
  .wrapper .preview-img {
    margin-top: 15px;
  }
  .gallery .images {
    max-width: 100%;
    padding: 0 13px;
    margin-top: 20px;
  }
}

Finally, add the following JavaScript code to your script.js file to show a lightbox when the user clicks on the specific image and then hide the lightbox when they click on the close icon.

const allImages = document.querySelectorAll(".images .img");
const lightbox = document.querySelector(".lightbox");
const closeImgBtn = lightbox.querySelector(".close-icon");

allImages.forEach(img => {
    // Calling showLightBox function with passing clicked img src as argument
    img.addEventListener("click", () => showLightbox(img.querySelector("img").src));
});

const showLightbox = (img) => {
    // Showing lightbox and updating img source
    lightbox.querySelector("img").src = img;
    lightbox.classList.add("show");
    document.body.style.overflow = "hidden";
}

closeImgBtn.addEventListener("click", () => {
    // Hiding lightbox on close icon click
    lightbox.classList.remove("show");
    document.body.style.overflow = "auto";
});

In short, we started by creating a simple unordered list structure of images, styling it using CSS to create a masonry layout, and adding a div with the class “lightbox” to contain the image preview and close button. Finally, we added JavaScript code to show and hide the lightbox as needed.

Conclusion and Final Words

By following the steps in this blog post, I hope you were able to create a masonry image gallery with a lightbox effect using HTML, CSS, and JavaScript. The code and logic behind creating this image gallery were quite simple and easy to follow.

If you’re eager to enhance your web development skills further, why not explore our blog on Creating a Functional Image Gallery in HTML, CSS, and JavaScript? This informative post guides you through the process of creating an image gallery that lets users search for, view, and download images.

If you encounter any problems or your code is not working as expected, you can download the source code files for this masonry image gallery for free. Click on the download button to get the zip file containing the project folder with source code files and images.

Create Functional Image Gallery in HTML CSS & JavaScript

CodingNepal — Tue, 04 Apr 2023 17:42:09 +0000

If you’re a web designer or developer, you must have searched for copyright-free images for your projects on various websites. Pexels is one of the most popular sites for such images. But as a web developer, have you ever wanted to create a functional image gallery similar to Pexels?

In this blog post, I’ll show the steps for creating a fully-functional image gallery using HTML, CSS, and JavaScript. Not only will you learn the basics of DOM manipulation, event handling, and CSS styling, but you’ll also gain valuable experience working with APIs.

With this Pexels clone coding project, you can effortlessly search, view, and download any image you desire, all within seconds. The images are displayed in a stylish masonry layout which looks great on any device, from desktops to mobile phones.

If you’re excited to see a live demo of this image gallery, click here to check it out. For a full video tutorial on creating a functional image gallery using HTML, CSS, and JavaScript, you can watch the given YouTube video.

Video Tutorial of Functional Image Gallery in JavaScript

If you prefer visual learning, then the above video tutorial is a great resource for you. I highly recommend watching it because I go through each line of code in detail and provide comments to help you understand what’s happening at each step.

But if you prefer reading blog posts or want a quick summary of the steps involved in creating an image gallery, you can continue reading this post. By the end of this post, you will have a clear understanding of how to create your very own Pexels clone image gallery with HTML, CSS, and JavaScript.

Steps For Creating Image Gallery in JavaScript

To create a functional image gallery using HTML, CSS, and vanilla JavaScript, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js
Download the images folder from Google Drive and put this folder inside the project folder. This static image is only used as a search section background.

To start, add the following HTML codes to your index.html file to create a basic layout for an image gallery. Note that the “ul” container is currently empty, but it will be filled with “li” elements (representing image cards) later using JavaScript code.




  
    
    Image Gallery with JavaScript | CodingNepal
    
    
    
    
  
  
    
      
        
          
            
            
          
          
            
            
          
        
        
          
        
      
    
    
      
      
        Image Gallery with JavaScript
        Search and download any images within a second

Next, add the following CSS codes to your style.css file to give a basic look and feel to the image gallery. If you wish, you can customize it to your liking by changing the color, font, size, and other CSS properties in the file.

/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
.search {
  height: 40vh;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
}
.search::before, .search img, .lightbox {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}
.search::before {
  content: "";
  z-index: 1;
  background: rgba(0,0,0,0.25);
}
.search img {
  object-fit: cover;
}
.search .content {
  z-index: 2;
  color: #fff;
  padding: 0 13px;
  text-align: center;
  position: relative;
}
.search h1 {
  font-size: 2.65rem;
  font-weight: 600;
}
.search p {
  margin-top: 8px;
  font-size: 1.5rem;
}
.search .search-box {
  height: 55px;
  margin: 45px 0;
  position: relative;
}
.search-box i {
  position: absolute;
  left: 20px;
  top: 50%;
  cursor: default;
  color: #8D8D8D;
  font-size: 1.4rem;
  transform: translateY(-50%);
}
.search-box input {
  width: 100%;
  height: 100%;
  outline: none;
  border: none;
  font-size: 1.1rem;
  padding-left: 55px;
  background: #fff;
  border-radius: 5px;
}
.search-box input::placeholder {
  color: #929292;
}
.search-box input:focus::placeholder {
  color: #bfbfbf;
}
.gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gallery .images {
  gap: 15px;
  max-width: 95%;
  margin-top: 40px;
  columns: 5 340px;
  list-style: none;
}
.gallery .images .card {
  display: flex;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  margin-bottom: 14px;
  border-radius: 4px;
}
.gallery .images img {
  width: 100%;
  z-index: 2;
  position: relative;
}
.images .details {
  position: absolute;
  z-index: 4;
  width: 100%;
  bottom: -100px;
  display: flex;
  align-items: center;
  padding: 15px 20px;
  justify-content: space-between;
  transition: bottom 0.1s ease;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}
.images li:hover .details {
  bottom: 0;
}
.photographer {
  color: #fff;
  display: flex;
  align-items: center;
}
.photographer i {
  font-size: 1.4rem;
  margin-right: 10px;
}
.photographer span {
  font-size: 1.05rem;
}
button, i {
  outline: none;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  transition: 0.2s ease;
}
.details button {
  background: #fff;
  font-size: 1.1rem;
  padding: 3px 8px;
}
.details .download-btn:hover {
  background: #f2f2f2;
}
.gallery .load-more {
  color: #fff;
  background: #8A6CFF;
  margin: 50px 0;
  font-size: 1.2rem;
  padding: 12px 27px;
}
.gallery .load-more.disabled {
  opacity: 0.6;
  pointer-events: none;
}
.gallery .load-more:hover {
  background: #704dff;
}

.lightbox {
  z-index: 5;
  position: fixed;
  visibility: hidden;
  background: rgba(0,0,0,0.65);
}
.lightbox.show {
  visibility: visible;
}
.lightbox .wrapper {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 100%;
  padding: 20px;
  max-width: 850px;
  background: #fff;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.9);
  transition: transform 0.1s ease;
}
.lightbox.show .wrapper {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.wrapper header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header .photographer {
  color: #333;
}
header .photographer i {
  font-size: 1.7rem;
  cursor: auto;
}
header .photographer span {
  font-size: 1.2rem;
}
header .buttons i {
  height: 40px;
  width: 40px;
  display: inline-block;
  color: #fff;
  font-size: 1.2rem;
  line-height: 40px;
  text-align: center;
  background: #8A6CFF;
  border-radius: 4px;
  transition: 0.2s ease;
}
header .buttons i:first-child:hover {
  background: #704dff;
}
header .buttons i:last-child {
  margin-left: 10px;
  font-size: 1.25rem;
  background: #6C757D;
}
header .buttons i:last-child:hover {
  background: #5f666d;
}
.wrapper .preview-img {
  display: flex;
  justify-content: center;
  margin-top: 25px;
}
.preview-img .img {
  max-height: 65vh;
}
.preview-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media screen and (max-width: 688px) {
  .lightbox .wrapper {
    padding: 12px;
    max-width: calc(100% - 26px);
  }
  .wrapper .preview-img {
    margin-top: 15px;
  }
  header .buttons i:last-child {
    margin-left: 7px;
  }
  header .photographer span, .search p {
    font-size: 1.1rem;
  }
  .search h1 {
    font-size: 1.8rem;
  }
  .search .search-box {
    height: 50px;
    margin: 30px 0;
  }
  .gallery .images {
    max-width: 100%;
    padding: 0 13px;
    margin-top: 20px;
  }
  .images .details {
    bottom: 0px;
  }
  .gallery .load-more {
    padding: 10px 25px;
    font-size: 1.05rem;
  }
}

Finally, add the following JavaScript code to your script.js file to add functionality for searching, viewing, and downloading images from this gallery. This code will handle user actions and communicate with the Pexels API to retrieve and display images in the gallery.

const imageWrapper = document.querySelector(".images");
const searchInput = document.querySelector(".search input");
const loadMoreBtn = document.querySelector(".gallery .load-more");
const lightbox = document.querySelector(".lightbox");
const downloadImgBtn = lightbox.querySelector(".uil-import");
const closeImgBtn = lightbox.querySelector(".close-icon");

// API key, paginations, searchTerm variables
const apiKey = "PASTE-YOUR-API-KEY";
const perPage = 15;
let currentPage = 1;
let searchTerm = null;

const downloadImg = (imgUrl) => {
    // Converting received img to blob, creating its download link, & downloading it
    fetch(imgUrl).then(res => res.blob()).then(blob => {
        const a = document.createElement("a");
        a.href = URL.createObjectURL(blob);
        a.download = new Date().getTime();
        a.click();
    }).catch(() => alert("Failed to download image!"));
}

const showLightbox = (name, img) => {
    // Showing lightbox and setting img source, name and button attribute
    lightbox.querySelector("img").src = img;
    lightbox.querySelector("span").innerText = name;
    downloadImgBtn.setAttribute("data-img", img);
    lightbox.classList.add("show");
    document.body.style.overflow = "hidden";
}

const hideLightbox = () => {
    // Hiding lightbox on close icon click
    lightbox.classList.remove("show");
    document.body.style.overflow = "auto";
}

const generateHTML = (images) => {
    // Making li of all fetched images and adding them to the existing image wrapper
    imageWrapper.innerHTML += images.map(img =>
        `
            
            
                
                    
                    ${img.photographer}
                
                
            
        `
    ).join("");
}

const getImages = (apiURL) => {
    // Fetching images by API call with authorization header
    searchInput.blur();
    loadMoreBtn.innerText = "Loading...";
    loadMoreBtn.classList.add("disabled");
    fetch(apiURL, {
        headers: { Authorization: apiKey }
    }).then(res => res.json()).then(data => {
        generateHTML(data.photos);
        loadMoreBtn.innerText = "Load More";
        loadMoreBtn.classList.remove("disabled");
    }).catch(() => alert("Failed to load images!"));
}

const loadMoreImages = () => {
    currentPage++; // Increment currentPage by 1
    // If searchTerm has some value then call API with search term else call default API
    let apiUrl = `https://api.pexels.com/v1/curated?page=${currentPage}&per_page=${perPage}`;
    apiUrl = searchTerm ? `https://api.pexels.com/v1/search?query=${searchTerm}&page=${currentPage}&per_page=${perPage}` : apiUrl;
    getImages(apiUrl);
}

const loadSearchImages = (e) => {
    // If the search input is empty, set the search term to null and return from here
    if (e.target.value === "") return searchTerm = null;
    // If pressed key is Enter, update the current page, search term & call the getImages
    if (e.key === "Enter") {
        currentPage = 1;
        searchTerm = e.target.value;
        imageWrapper.innerHTML = "";
        getImages(`https://api.pexels.com/v1/search?query=${searchTerm}&page=1&per_page=${perPage}`);
    }
}

getImages(`https://api.pexels.com/v1/curated?page=${currentPage}&per_page=${perPage}`);
loadMoreBtn.addEventListener("click", loadMoreImages);
searchInput.addEventListener("keyup", loadSearchImages);
closeImgBtn.addEventListener("click", hideLightbox);
downloadImgBtn.addEventListener("click", (e) => downloadImg(e.target.dataset.img));

In the code, you will notice a variable called apiKey. You need to get your own Pexels API key and insert it into this variable. You can get a free API key by visiting the official Pexels API documentation. Additionally, you will find a variable named perPage, which has a default value of 15. This means that every time the API is called, 15 new images will be fetched.

Conclusion and Final Words

Creating a functional image gallery using HTML, CSS, and JavaScript is an excellent project for beginners to learn about web development concepts such as DOM manipulation, event handling, CSS styling, and API usage in real-world projects.

With the knowledge and skills you’ve gained from this project, now it’s up to you to experiment with the code and take this image gallery to the next level. For more API-related coding projects, check out the blog on Top JavaScript APIs Projects for Beginners.

If you encounter any problems or your code is not working as expected, you can download the source code files for this image gallery for free. Click on the download button to get the zip file containing the project folder with source code files. Remember to paste your API key into the code.

Image Gallery with Search Box in HTML CSS & JavaScript

CodingNepal — Sun, 03 Apr 2022 21:11:19 +0000

Hello friend, I hope you are doing awesome, today in this blog you are going to learn to create a responsive Image Gallery with a Search Box using HTML CSS, and JavaScript. Earlier I created a responsive Image Gallery with Lightbox and also Video Gallery with Lightbox.

An image gallery is the combination of more than two images and the search box is the field where users can search for the thing they want to watch in a faster way.

Let’s have a quick look at the given image or our Image gallery with a search box. On the Image, we can see a search box on the top and different types of images with different names underneath the search box. Basically, when we search the name of that image, only searched named images will appear on the screen.

I have provided the real demo of this tutorial [Image Gallery with Search Box], and also you can watch the HTML CSS, and JavaScript codes that I have used to create this project.

Image Gallery with Search Box in HTML CSS & JavaScript

I have provided all the HTML CSS and JavaScript code that I have used to create this Image Gallery with Search Box, before jumping into the source code files, I would like to quickly explain the given video tutorial.

As you have seen in the video tutorial, first we have seen a search box and lots of images with the movie names. When I typed one movie name on the search box and pressed enter then only those images were visible, that have those names. And when I removed the name from the search box all images appeared.

To make the image gallery and search box I have used HTML and CSS, and to make a working search box to search the images I have used some JavaScript codes.

Now I believe, you can make this Imaged gallery with Searchbox easily, If you are feeling difficulty building this project, I have provided all the HTML CSS, and JavaScript code below:

Image Gallery with Search Box [Source Code]

To get the following HTML CSS and JavaScript code for the Image Gallery with Search Box, you need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.





    
    
    
    
    
    
    
    
    

    Image Gallery with Search Box


    
        
            
            
        

        
            
                
                spiderman
            
            
                
                joker
            
            
                
                ironman
            
            
                
                passenger
            
            
                
                the space
            
            
                
                spiderman 2
            
            
                
                the universe
            
            
                
                spiderman 3
            
            
                
                holiday
            
            
                
                ironman 2

/* ===== Google Font Import - Poppins ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
.container{
    position: relative;
    min-height: 100vh;
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 20px;
}
.container .search-box{
    position: relative;
    height: 42px;
    max-width: 400px;
    margin: 0 auto;
    margin-bottom: 40px;
}
.search-box input{
    position: absolute;
    height: 100%;
    width: 100%;
    outline: none;
    border: none;
    background-color: #323334;
    padding: 0 15px 0 45px;
    color: #fff;
    border-radius: 6px;
}
.search-box i{
    position: absolute;
    z-index: 2;
    color: #999;
    top: 50%;
    left: 15px;
    font-size: 20px;
    transform: translateY(-50%);
}
.container .images .image-box{
    position: relative;
    height: 300px;
    width: 210px;
    border-radius: 6px;
    overflow: hidden;
}
.images{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.images .image-box{
    margin: 8px;
}
.images .image-box img{
    height: 100%;
    width: 100%;
    border-radius: 6px;
    transition: transform 0.2s linear;
}
.image-box:hover img{
    transform: scale(1.05);
}
.image-box h6{
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    text-transform: capitalize;
}

const search = document.querySelector(".search-box input"),
      images = document.querySelectorAll(".image-box");

search.addEventListener("keyup", e =>{
    if(e.key == "Enter"){
        let searcValue = search.value,
            value = searcValue.toLowerCase();
            images.forEach(image =>{
                if(value === image.dataset.name){ //matching value with getting attribute of images
                    return image.style.display = "block";
                }
                image.style.display = "none";
         });
    }
});

search.addEventListener("keyup", () =>{
    if(search.value != "") return;

    images.forEach(image =>{
        image.style.display = "block";
    })
})

If you face any difficulties while creating your Responsive Image Gallery or your code is not working as expected, you can download the source code files for this Image Gallery for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

Image Gallery with Lightbox using HTML CSS & JavaScript

CodingNepal — Fri, 03 Dec 2021 21:11:19 +0000

Hello there, I hope you are doing well. Today we will create a Responsive Image Gallery with Lightbox using HTML CSS & JavaScript. As you know earlier I have created a Video Gallery with Lightbox features, which was very beautiful and useful.

An image gallery means the collections of two or more two images in a particular section and a lightbox means the preview of an image in a bigger size and shape. This type of feature is in mobile, tablets, or computers.

Let’s have a look at the given image of our program [Responsive Image Gallery with Lightbox], there is an image lightbox we can see and behind that lightbox, there is an image gallery with fully responsive features. I mean this image gallery can fit in any screen sizes device like mobile, tablet, or computer.

Basically, at first, there is an image gallery only, and when we click on the gallery’s image that we wanna see then the image lightbox appears. To close the lightbox we can click on the close button which is available on the left top side of the lightbox.

I highly recommend you to see the virtual demo of this project[Responsive Image Gallery with Lightbox], which is given below. By watching the given video tutorial of this Image gallery with light you will also get an idea of how all HTML CSS and JavaScript codes are working perfectly.

Image Gallery with Lightbox using HTML CSS & JavaScript

You will get all the HTML CSS and JavaScript code that I have used to create this responsive image gallery with lightbox. Before jumping into the source codes, you need to know some basic points for this project.

As you have seen on the given video tutorial of responsive image gallery with lightbox. At first, we have seen only an image gallery with different image sizes when I clicked on the image an image lightbox appeared with the same image that I clicked, Which helps to see a small image in a bigger size. When I clicked on the closed icon, the lightbox disappear. As you have seen this image gallery and image lightbox are fully responsive

To show the user clicked image on the lightbox and close the image lightbox, I have used some JavaScript codes otherwise Image gallery and lightbox are made by HTML and CSS. There are lots of JavaScript Projects like this, that you can see and practice.

I hope now you have learned to create a Responsive Image Gallery with Lightbox using HTML CSS and JavaScript. If you are feeling difficult to create this, you can copy or download all source code from below.

Image Gallery with Lightbox [Source Code]

To get the following HTML CSS and JavaScript code for Image Gallery with Lightbox. You need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.




  
    
     Image Gallery with Lightbox | CodingLab  
    
    
    
    
   

  
    
      
        
        
          
            img class="logoImg" src="images/logo.png" alt="" 
            
              CodingLab
              50k followers
            
          
          
            
            
          
        
        
          
            
          
        
      
    

    
      Masonry Image Gallery
      
        
          
          
            
              
              
                CodingLab
                50k followers
              
            
            
              
              
            
          
        
        
          
          
            
              
              
                CodingLab
                50k followers
              
            
            
              
              
            
          
        
        
          
          
            
              
              
                CodingLab
                50k followers
              
            
            
              
              
            
          
        
        
          
          
            
              
              
                CodingLab
                50k followers
              
            
            
              
              
            
          
        
        
          
          
            
              
              
                CodingLab
                50k followers
              
            
            
              
              
            
          
        
        
          
          
            
              
              
                CodingLab
                50k followers
              
            
            
              
              
            
          
        
        
          
          
            
              
              
                CodingLab
                50k followers
              
            
            
              
              
            
          
        
        
          
          
            
              
              
                CodingLab
                50k followers
              
            
            
              
              
            
          
        
        
          
          
            
              
              
                CodingLab
                50k followers
              
            
            
              
              
            
          
        
        
          
          
            
              
              
                CodingLab
                50k followers
              
            
            
              
              
            
          
        
        
          
          
            
              
              
                CodingLab
                50k followers
              
            
            
              
              
            
          
        
        
          
          
            
              
              
                CodingLab
                50k followers
              
            
            
              
              
            
          
        
        
          
          
            
              
              
                CodingLab
                50k followers
              
            
            
              
              
            
          
        
        
          
          
            
              
              
                CodingLab
                50k followers
              
            
            
              
              
            
          
        
        
          
          
            
              
              
                CodingLab
                50k followers

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
section{
  position: relative;
  min-height: 100vh;
  width: 100%;
  margin: 0 20px;
}
section .lightBox{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 100;
  display: none;
}
.lightBox .lightBox_content{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 950px;
  width: 100%;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  padding: 20px;
}
.lightBox_content .close{
  position: absolute;
  top: 0;
  left: -40px;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
  opacity: 0.8;
}
.lightBox_content .close:hover{
  opacity: 1;
}
section .logo_icons{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
}
section .logo_icons a{
  display: flex;
  align-items: center;
  text-decoration: none;
}
section .logo_icons .logoImg{
  height: 40px;
  width: 40px;
  border-radius: 50%;
}
section .logo_icons .text_content{
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  color: #333;
  font-size: 16px;
  font-weight: 500;
}
.logo_icons .text_content .followers{
  font-size: 13px;
  margin-top: -5px;
}
section .logo_icons .icons i{
  height: 35px;
  width: 35px;
  background: #ccc;
  text-align: center;
  line-height: 35px;
  font-size: 16px;
  color: #fff;
  border-radius: 4px;
  margin: 0 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.lightBox .logo_icons .icons i:hover{
  color: #fff;
  background: #7d2ae8;
}
section .lightBox .showImg{
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.lightBox .showImg .image{
  max-height: 700px;
  max-width: 900px;
}
.showImg .image img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
section .image-gallery{
  max-width: 1300px;
  min-height: 100vh;
  width: 100%;
  background: #fff;
  margin: auto;
}
.image-gallery header{
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  text-align: center;
  background: #24292d;
  padding: 20px 0;
  letter-spacing: 1px;
}
.image-gallery .image-container{
  columns: 3;
  margin-top: 20px;
  gap: 15px;
}
.image-container img{
  width: 100%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.image-container .image-box{
  position: relative;
  cursor: pointer;
  margin: 10px 0;
}
.image-box .logo_icons{
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  padding: 10px 15px;
  background: rgba(0, 0, 0, 0.2);
  box-shadow: 0 -10px 10px rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}
.image-box:hover .logo_icons{
  opacity: 1;
  pointer-events: auto;
}
.image-box .logo_icons .icons i{
  color: #b4b4b4;
  background: #fff;
}
.logo_icons .icons i:hover{
  color: #707070;
}
section .image-gallery .logo_icons .text_content{
  color: #fff;
  font-size: 14px
}
section .image-gallery .text_content .followers{
  font-size: 12px;
  font-weight: 400;
  margin-top: -4px;
}
@media (max-width: 1034px) {
  .lightBox_content .close{
    top: -40px;
    left: 10px;
  }
}
@media (max-width: 1002px) {
  .image-gallery .image-container{
    columns: 2;
  }
}
@media (max-width: 602px) {
  .image-gallery .image-container{
    columns: 1;
  }
@media (max-width: 602px) {
  .image-gallery header{
    font-size: 25px;
  }
}

If you face any difficulties while creating your Image Gallery with Lightbox or your code is not working as expected, you can download the source code files for this Masonry Image Gallery for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

Image Gallery – CodingNepal

Responsive Personal Portfolio Website in HTML CSS and Bootstrap

Steps For Creating Responsive Portfolio Website in Bootstrap

James Anderson

Information & Computer Systems student

SKILLS

Continuously improving my skills and knowledge in the field.

Front-end Development

Back-end Development

Mobile App Development

PORTFOLIO

A collection of projects I've worked on.

E-commerce Website

Responsive Landing Page

Calculator App

Blog Website

Task Management App

Data Visualization

ABOUT

Learn more about me, my background, and what motivates me.

1995-2008

Early Passion for Technology

2008-2014

Higher Education and Career Growth

2014-Present

Professional Excellence and Continuous Learning

Future

Continuing to Make a Difference

YourNextHire

CURRICULUM VITAE

A small sampling of some of the projects I've worked on as a student of the ICS program.

James Anderson

Technical Skills

Personal Interests

Profile

Highlights of Qualifications

Education

Additional Courses & Training

Work Experience

Extracurricular Activities

CONTACT ME

Interested if I'd be the right fit for your team? Fill in this form and I will respond within 24-48 hours.

Conclusion and Final Words

Responsive Filterable Image Gallery in HTML Bootstrap & JavaScript

Steps for a Filterable Image Gallery in Bootstrap and JavaScript

Mountains

Lights

Nature

Retro

Fast

Classic

Men

Girl

Conclusion and Final Words

Responsive Masonry Image Gallery with Lightbox in HTML CSS & JavaScript

Steps For Creating Image Gallery with Lightbox in HTML & CSS

Masonry Image Gallery with Lightbox

Conclusion and Final Words

Create Functional Image Gallery in HTML CSS & JavaScript

Video Tutorial of Functional Image Gallery in JavaScript

Steps For Creating Image Gallery in JavaScript

Image Gallery with JavaScript

Conclusion and Final Words

Image Gallery with Search Box in HTML CSS & JavaScript

Image Gallery with Search Box in HTML CSS & JavaScript

You Might Like This:

Image Gallery with Search Box [Source Code]

spiderman

joker

ironman

passenger

the space

spiderman 2

the universe

spiderman 3

holiday

ironman 2

Image Gallery with Lightbox using HTML CSS & JavaScript

Image Gallery with Lightbox using HTML CSS & JavaScript

You Might Like This:

Information & Computer Systems
student

Your
Next
Hire