Today's article is aimed at creating a gallery where we can put our photos and or videos. It will function as gallery app or google photos.
The gallery will contain buttons where you will be selecting whether to move forward or backward by pressing the buttons.
The HTML codes.
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="gallery.css">
<h2 style="text-align:center">My Gallery</h2>
<video width="600" controls autoplay loop>
<source src="https://www.theedublogger.com/google-photos-guide/" type="video/mp4">
</video>
<div class="container">
<div class="mySlides">
<div class="numbertext">1 / 9</div>
<img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fwww.cnet.
com%2Fa%2Fimg%2FpLwWAw3f1OdjhUWe1-u0jcqhIcI%3D%2F
1200x630%2F2019%2F09%2F10%2Fd3dc3047-4c7f-499e-8b8c-240b3e27c6d2%2Fgoogle-
logo-6.jpg&imgrefurl=https%3A%2F%2Fwww.cnet.com%2Ftech%2Fservices-and-software
%2Fgoogle-one-storage-starts-offering-some-features-for-free%2F&tbnid=EHjUDy1Y
NjPeHM&vet=12ahUKEwiimYTh1fHyAhUDGRoKHeksDPsQMygcegUIARCGAg..i&docid=iTrW3iE24
PKfIM&w=1200&h=630&q=google%20photos&ved=2ahUKEwiimYTh1fHyAhUDGRoKHeksDPsQMyg
cegUIARCGAg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 9</div>
<img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fimages.indianexpress.
com%2F2021%2F05%2FGoogle_Reuters_F.jpg&imgrefurl=https%3A%2F%2Findianexpress.
com%2Farticle%2Ftechnology%2Ftechook%2Fgoogle-photos-free-storage-policy-june-
1-ends-check-plans-storage-pixel-users-7337569%2F&tbnid=Sx3ERkzPGnTY4M&vet=
12ahUKEwiimYTh1fHyAhUDGRoKHeksDPsQMygfegUIARCMAg..i&docid=wVPDJT3nWFtmyM&w=
1200&h=667&q=google%20photos&ved=
2ahUKEwiimYTh1fHyAhUDGRoKHeksDPsQMygfegUIARCMAg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 9</div>
<img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fcdn-res.
keymedia.com%2Fcms%2Fimages%2Fus%2F039%2F0132_637309597704291234.
jpg&imgrefurl=https%3A%2F%2Fwww.hcamag.com%2Fasia%2Fspecialisation%2Flearning-
development%2Fgoogle-to-support-3000-jobseekers-in-singapore%2F228475&tbnid=
I6tgnIsHZoivuM&vet=10CIoBEDMonwFqFwoTCMjv0cTW8fICFQAAAAAdAAAAABAC..i&docid=
cRnRmoII5sHFSM&w=1000&h=600&q=google%20photos&ved=
0CIoBEDMonwFqFwoTCMjv0cTW8fICFQAAAAAdAAAAABAC" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 9</div>
<img src="tech.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">5 / 9</div>
<img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fimages.ctfassets.
net%2Fwcfotm6rrl7u%2F24PvUvHxz3ZwBFFtufgRQe%2F14f808748369bba7d34493023b6fa4dc%
2FGoogle_One-og_image.jpg&imgrefurl=https%3A%2F%2Fwww.nokia.com%2Fphones%2Fen_
int%2Fgoogle-one&tbnid=a3voUblV2VLiLM&vet=12ahUKEwiimYTh1fHyAhUDGRoKHeksDPsQMy
hOegUIARCSAQ..i&docid=FRCdA0hBH27ePM&w=1200&h=630&q=google%20photos&ved=2ahUKEw
iimYTh1fHyAhUDGRoKHeksDPsQMyhOegUIARCSAQ" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">6 / 9</div>
<img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fcdn57.androidauthority.
net%2Fwp-content%2Fuploads%2F2020%2F11%2Fgoogle-photos-app-icon-logo-google-
pixel-5-2.jpg&imgrefurl=https%3A%2F%2Fwww.androidauthority.com%2Fgoogle-photos
-937968%2F&tbnid=Q6JFAzN64gbW3M&vet=12ahUKEwiimYTh1fHyAhUDGRoKHeksDPsQMyhSegU
IARCaAQ..i&docid=Bjph8NoD5mBaqM&w=1920&h=1080&q=google%20photos&ved=2ahUKEwi
imYTh1fHyAhUDGRoKHeksDPsQMyhSegUIARCaAQ" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">7 / 9</div>
<img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fwww.cnet.com%2Fa%2Fimg%2
FvyXvPd3VpbvIftGIu2uu6M7Yk7o%3D%2F1200x630%2F2021%2F06%2F03%2F094be1de-9cce
-4762-b8e5-6f69cfafed81%2Fgoogle-one-plan-upgrade-google-photos-unlimited-
ending-cnet-2021-008.jpg&imgrefurl=https%3A%2F%2Fwww.cnet.com%2Ftech%2Fservices
-and-software%2Fgoogle-photos-unlimited-free-storage-has-ended-heres-what-to
-do-now%2F&tbnid=9JDDOlww9ESe3M&vet=12ahUKEwiimYTh1fHyAhUDGRoKHeksDPsQMyhQegU
IARCWAQ..i&docid=99qLieN9Jb67kM&w=1200&h=630&q=google%20photos&ved=2ahUKEwiimY
Th1fHyAhUDGRoKHeksDPsQMyhQegUIARCWAQ" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">8 / 9</div>
<img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fstatic01.nyt.
com%2Fimages%2F2020%2F10%2F21%2Fbusiness%2F21Googleworld-illo%2F30Googleworld-
illo-videoSixteenByNineJumbo1600.jpg&imgrefurl=https%3A%2F%2Fwww.nytimes.
com%2F2020%2F10%2F20%2Ftechnology%2Fdoj-google.html&tbnid=6VkDOKNz2jqSKM&vet=
10CBYQMyhuahcKEwjI79HE1vHyAhUAAAAAHQAAAAAQAg..i&docid=3tHeBj2gDZ0x6M&w=1600&h=
900&q=google%20photos&ved=0CBYQMyhuahcKEwjI79HE1vHyAhUAAAAAHQAAAAAQAg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">9 / 9</div>
<img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fcdn.pocket-lint.
com%2Fr%2Fs%2F1200x%2Fassets%2Fimages%2F141075-apps-feature-what-is-
google-lens-and-how-do-you-use-it-image1-fvo5qgkrqn.jpg&imgrefurl=
https%3A%2F%2Fwww.pocket-lint.com%2Fapps%2Fnews%2Fgoogle%2F141075-what-is-
google-lens-and-how-does-it-work-and-which-devices-have-it&tbnid=
OTxzNM7uMS20yM&vet=10CFcQMyiKAWoXChMIyO_RxNbx8gIVAAAAAB0AAAAAEAI..
i&docid=_c-UEac8WF-XvM&w=1200&h=800&q=google%20photos&ved=0CFcQMyiKAWoXChMIyO_
RxNbx8gIVAAAAAB0AAAAAEAI" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="row">
<div class="column">
<img class="demo cursor" src="moon.jpg" style="width:100%"
onclick="currentSlide(1)" alt="The horizon">
</div>
<div class="column">
<img class="demo cursor" src="web.jpeg" style="width:100%"
onclick="currentSlide(2)" alt="third-world">
</div>
<div class="column">
<img class="demo cursor" src="we.jpg" style="width:100%"
onclick="currentSlide(3)" alt="$ is the future">
</div>
<div class="column">
<img class="demo cursor" src="tech.jpg" style="width:100%"
onclick="currentSlide(4)" alt="skypers">
</div>
<div class="column">
<img class="demo cursor" src="images (39).jpeg" style="width:100%"
onclick="currentSlide(5)" alt="life is $ ">
</div>
<div class="column">
<img class="demo cursor" src="website.jpeg" style="width:100%"
onclick="currentSlide(6)" alt="guru and net">
</div>
<div class="column">
<img class="demo cursor" src="saf.jpg" style="width:100%"
onclick="currentSlide(7)" alt="get new ideas">
</div>
<div class="column">
<img class="demo cursor" src="dev.jpg" style="width:100%"
onclick="currentSlide(8)" alt="socialise">
</div>
<div class="column">
<img class="demo cursor" src="blog.jpg" style="width:100%"
onclick="currentSlide(9)" alt="develop yourself">
</div>
</div>
</div>
</body>
</html>
The CSS codes.
body {
font-family: Arial;
margin: 0;
}
* {
box-sizing: border-box;
}
img {
vertical-align: middle;
}
/* Position the image container (needed to position the left and right arrows) */
.container {
position: relative;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Add a pointer when hovering over the thumbnail images */
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Container for image text */
.caption-container {
text-align: center;
background-color: #222;
padding: 2px 16px;
color: white;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* Six columns side by side */
.column {
float: left;
width: 16.66%;
}
/* Add a transparency effect for thumnbail images */
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
JavaScript codes.
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
captionText.innerHTML = dots[slideIndex - 1].alt;
}
</script>
You can create,change or modify the codes at your wish.
