Hello everyone, in this post, we will learn how to create a Photo gallery with HTML, CSS, and javascript. In the last post, we created an Image hover effects Html and CSS. Today our topic is to create a picture gallery using HTML, CSS, and javascript.
Photo Gallery HTML, CSS, and javascript:
The image gallery is used in websites if websites want to show their work or their items. It helps the company to show their stuff in a beautiful gallery. A lot of websites are using this feature for their companies.
As you can see in the image we have a gallery of images and in this gallery, we have different images aligned beautifully. So, These images are aligned with the help of CSS. Then it has a scroll bar below the images. So, you can see other images by scrolling right or left for more images.
Therefore, all these things are created with the help of HTML, CSS, and javascript Let us see how to create this gallery for your website as well using HTML, CSS, and javascript languages.
You might like it:
How to create a photo gallery HTML, CSS, and javascript?
We will create an image gallery using four steps. You have to follow all these steps if you want to create this type of gallery for your website.
Download an IDE:
An IDE is an environment for writing the code. You can say that a code editor for writing the code of Html, CSS, and javascript. VS Code and brackets are the most used code editors.
Download source code Photo gallery HTML:
Html is known as a markup language and we have used it to import the images for our gallery and it is used to create the skeleton of the website pages. Code of Html is given below and it is free to use.
|
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 |
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title> Image hover effects | FantacyDesigns</title> <link rel="stylesheet" href="style.css"> </head> <body> <link rel='stylesheet' href='https://unpkg.com/locomotive-scroll@4.0.6/dist/locomotive-scroll.min.css' /> <script src='https://unpkg.com/locomotive-scroll@4.0.6/dist/locomotive-scroll.min.js'></script> <div class='scroll-animations-example' data-scroll-container> <div class='scrollsection' data-scroll-section> <div class='item -normal' data-scroll data-scroll-speed="2"> <img class='image' src='https://picsum.photos/id/1005/300/400'> </div> <div class='item -big' data-scroll data-scroll-speed="1"> <img class='image' src='https://picsum.photos/id/1019/600/800'> </div> <div class='item -small -horizontal' data-scroll data-scroll-speed="4"> <img class='image' src='https://picsum.photos/id/1027/400/300'> </div> <div class='item -normal' data-scroll data-scroll-speed="3"> <img class='image' src='https://picsum.photos/id/1028/300/400'> </div> <div class='item -normal -horizontal' data-scroll data-scroll-speed="2"> <img class='image' src='https://picsum.photos/id/1041/400/300'> </div> <div class='item -big -horizontal' data-scroll data-scroll-speed="4"> <img class='image' src='https://picsum.photos/id/1042/800/600'> </div> <div class='item -small' data-scroll data-scroll-speed="2"> <img class='image' src='https://picsum.photos/id/1049/300/400'> </div> <div class='item -normal -horizontal' data-scroll data-scroll-speed="1"> <img class='image' src='https://picsum.photos/id/1056/300/400'> </div> <div class='item -small -horizontal' data-scroll data-scroll-speed="3"> <img class='image' src='https://picsum.photos/id/1062/400/300'> </div> <div class='item -big' data-scroll data-scroll-speed="1"> <img class='image' src='https://picsum.photos/id/1068/600/800'> </div> <div class='item -normal -horizontal' data-scroll data-scroll-speed="2"> <img class='image' src='https://picsum.photos/id/1069/400/300'> </div> <div class='item -normal -horizontal' data-scroll data-scroll-speed="1"> <img class='image' src='https://picsum.photos/id/1072/300/400'> </div> <div class='item -small -horizontal' data-scroll data-scroll-speed="4"> <img class='image' src='https://picsum.photos/id/1075/400/300'> </div> <div class='item -big' data-scroll data-scroll-speed="3"> <img class='image' src='https://picsum.photos/id/1081/600/800'> </div> <div class='item -normal -horizontal' data-scroll data-scroll-speed="2"> <img class='image' src='https://picsum.photos/id/111/400/300'> </div> <div class='item -small -horizontal' data-scroll data-scroll-speed="4"> <img class='image' src='https://picsum.photos/id/129/400/300'> </div> <div class='item -big' data-scroll data-scroll-speed="2"> <img class='image' src='https://picsum.photos/id/137/600/800'> </div> <div class='item -normal -horizontal' data-scroll data-scroll-speed="1"> <img class='image' src='https://picsum.photos/id/141/300/400'> </div> <div class='item -small -horizontal' data-scroll data-scroll-speed="3"> <img class='image' src='https://picsum.photos/id/145/400/300'> </div> <div class='item -normal' data-scroll data-scroll-speed="1"> <img class='image' src='https://picsum.photos/id/147/300/400'> </div> </div> </div> <div class='fake-ui'> <div class='logo'></div> <div class='nav'> <span class='item'></span> <span class='item'></span> <span class='item'></span> </div> <div class='footer'></div> </div> </body> </html> |
Download source of CSS:
It is also known as a markup language and we have used it to align our images in the gallery according to our design. Therefore, Gallery has been designed using CSS properties.
|
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 |
html, body { height: 100%; background: #eee; } body { overflow: hidden; } .scroll-animations-example > .scrollsection { padding: 10vh 10vh 10vh 10vmax; min-width: 550vh; } .scroll-animations-example > .scrollsection > .item { display: inline-block; position: relative; margin: 0 -30vh 0 3vh; } .scroll-animations-example > .scrollsection > .item::before { content: ''; display: inline-block; vertical-align: middle; height: 100%; } .scroll-animations-example > .scrollsection > .item.-big { height: 80vh; width: 60vh; } .scroll-animations-example > .scrollsection > .item.-big.-horizontal { height: 60vh; width: 80vh; } .scroll-animations-example > .scrollsection > .item.-normal { height: 60vh; width: 45vh; z-index: 1; } .scroll-animations-example > .scrollsection > .item.-normal.-horizontal { height: 45vh; width: 60vh; } .scroll-animations-example > .scrollsection > .item.-normal:nth-of-type(3n) { bottom: 5vh; } .scroll-animations-example > .scrollsection > .item.-normal:nth-of-type(4n) { bottom: -5vh; } .scroll-animations-example > .scrollsection > .item.-small { height: 40vh; width: 30vh; z-index: 2; } .scroll-animations-example > .scrollsection > .item.-small.-horizontal { height: 30vh; width: 40vh; } .scroll-animations-example > .scrollsection > .item.-small:nth-of-type(3n) { bottom: 13vh; } .scroll-animations-example > .scrollsection > .item.-small:nth-of-type(4n) { bottom: -13vh; } .scroll-animations-example > .scrollsection > .item > .image { height: 100%; width: 100%; position: absolute; top: 0; left: 0; filter: grayscale(1); opacity: 0; pointer-events: none; transform: translateX(0) translateY(0) scale(1); transition: filter 0.3s ease, opacity 1s ease, transform 1s ease; } .scroll-animations-example > .scrollsection > .item:nth-of-type(4n) > .image { transform: translateX(-30vh) translateY(-30vh) scale(0.8); transition-delay: 0; } .scroll-animations-example > .scrollsection > .item:nth-of-type(4n - 1) > .image { transform: translateX(30vh) translateY(30vh) scale(0.8); transition-delay: 0.05s; } .scroll-animations-example > .scrollsection > .item:nth-of-type(4n - 2) > .image { transform: translateX(-30vh) translateY(30vh) scale(0.8); transition-delay: 0.1s; } .scroll-animations-example > .scrollsection > .item:nth-of-type(4n - 3) > .image { transform: translateX(-30vh) translateY(-30vh) scale(0.8); transition-delay: 0.15s; } .scroll-animations-example > .scrollsection > .item > .image.-active { transform: translateX(0) translateY(0) scale(1); opacity: 0.8; pointer-events: auto; transition: filter 0.3s ease, opacity 1s ease, transform 1s ease; } .scroll-animations-example > .scrollsection > .item > .image.-clicked { transform: translateX(0) translateY(0) scale(5); opacity: 0; pointer-events: auto; transition: filter 0.3s ease, opacity 1s ease, transform 1s ease; } .scroll-animations-example > .scrollsection > .item > .image.-active:hover { height: 100%; width: 100%; position: absolute; top: 0; left: 0; filter: grayscale(0); opacity: 1; cursor: pointer; } .fake-ui { font-size: 0; } .fake-ui > .logo { position: fixed; top: 2vh; left: 2vh; height: 3vh; width: 2.5vh; border: solid 1vh #999; } .fake-ui > .nav { position: fixed; top: 2vh; right: 2vh; } .fake-ui > .nav > .item { background: #999; display: inline-block; height: 2vh; width: 10vh; margin-left: 2vh; } .fake-ui > .footer { position: fixed; bottom: 3vh; left: 50%; transform: translateX(-50%); height: 2vh; width: 40vh; background: #999; } |
Source code of javascript:
It is known as a dynamic programming language and it is used to add functionality to website pages.
|
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 |
<script type="text/javascript"> class Example { constructor(options) { this.root = options.root; this.init(); setTimeout(this.showImages.bind(this), 1000); } init() { this.scroll = new LocomotiveScroll({ el: this.root, direction: 'horizontal', smooth: true, lerp: 0.05, tablet: { smooth: true }, smartphone: { smooth: true } }); this.images = this.root.querySelectorAll('.image'); [].forEach.call(this.images, image => { image.addEventListener('click', () => { image.classList.add('-clicked'); this.hideImages(); }); }); } showImages() { [].forEach.call(this.images, image => { image.classList.remove('-clicked'); image.classList.add('-active'); }); } hideImages() { [].forEach.call(this.images, image => { image.classList.remove('-active'); }); setTimeout(this.showImages.bind(this), 2000); }} window.addEventListener('DOMContentLoaded', event => { const example = new Example({ root: document.querySelector('.scroll-animations-example') }); }); </script> |
Download source code:
If you don’t know how to connect HTML, CSS, and javascript files with each other then we have created a file for you. All the necessary code files are present in this file along with the gallery images. So, you have to download it from the below button and your gallery will be there in front of you.
Task:
You have got the idea and code of the photo gallery in Html and CSS. Now you have to modify this photo gallery. The images are showing a clear hover effect otherwise they look blurry. You have to reverse the process. Images have to appear blurry on hover and add 5 more images in this gallery. It’s your task for now related to this gallery.
So, if you like this post then like and share it because sharing is caring. And if you have any type of question then you can ask them in the comment section. We will try to answer your every question asap.
Thanks for reading this article.
Download Source CodeClick to Download
