tab photo gallery

How to Create a Tab Photo Gallery?

In this tutorial post we will learn how to create tab photo gallery with HTML, CSS and Javascript from scratch.

HTML and CSS are beginner level.

Javascript is advance beginner level.

First let’s look at the mock-up of tab photo gallery so that it’s easier to understand CSS when we are styling it.

And this is the file structure of tab photo gallery.

We have seven images in our image gallery folder.

Now let’s code our HTML.

<divid="container">
  <div id="jumbotron"></div>
  <div id="thumbnail">
    <ahref="#"class="arrow"id="left">&#10094</a>
    <div id="thumb"></div>
    <ahref="#"class="arrow"id="right">&#10095</a>
  </div>
</div>

<div id=”jumbotron”></div> is a placeholder for main images. 

<div id=”thumbnail”></div> is a container for left and right arrow keys and thumbnail images.

<div id=”thumb”></div> is a placeholder for thumbnail images

Refer mock-up in above section if you are not clear.

At the moment, you will only see arrow keys on the browser.

So let’s dynamically add images.

Dynamically Adding Images

We will be dynamically adding images in #jumbotron container and #thumb container.

To simply let’s first add main images in #jumbotron container.

let imagesGallery = ["imageGallery/chef.jpg",

    "imageGallery/doctor.jpg",
    "imageGallery/home.jpg",
    "imageGallery/knife.jpg",
    "imageGallery/spoon.jpg",
    "imageGallery/street.jpg",
    "imageGallery/windy.jpg"
]

let mainImg = document.querySelector("#jumbotron");

let thumbImg = document.getElementById("thumb");

for (let i = 0; i < imagesGallery.length; i++) {

    let elem = document.createElement("img");
    elem.setAttribute("src", imagesGallery[i]);
    elem.setAttribute("data-id", "image" + i);
    elem.setAttribute("height", "350");
    elem.setAttribute("width", "350");
    mainImg.append(elem);
}

Note that I have zoomed in to show all the images. In your browser you may have to scroll down to see all the images.

Now let’s add thumbnail images in #thumb container.

for (let i = 0; i < imagesGallery.length; i++) {

    let elem = document.createElement("img");
    elem.setAttribute("src", imagesGallery[i]);
    elem.setAttribute("data-id", "image" + i);
    elem.setAttribute("height", "350");
    elem.setAttribute("width", "350");
    mainImg.append(elem);

    let elem1 = elem.cloneNode(true)
    let a = document.createElement('a');
    a.setAttribute("href", '#');
    a.setAttribute('class', 'thumb');
    a.setAttribute("data-id", "image" + i);
    a.appendChild(elem1);
    thumbImg.append(a);
}

I have again zoomed in to displaly both #jumbotron images and #thumbnail images.

Upper images are #jumbotron images.

And images between arrow keys are #thumbnail images.

Styling Image Tab Gallery

Now let’s style jumbotron images, thumbnail images and arrow keys.

html{
    box-sizing: border-box;
}

*,
*::before,
*::after{
    box-sizing: inherit;
}

body{
   margin: 0;
   padding: 0;
}

#container {
    width: 450px;
    margin: 25px auto;
    position: relative;
}

/* jumbotron main images */

#jumbotron {
    height: 400px;
}

#jumbotron img {
    width: 100%;
    position: absolute;
}

/* thumbnail images */

#thumbnail {
    overflow: hidden;
}

.thumb img {
    width: 150px;
    height: 120px;
    opacity: .4;
}

#thumb {
    white-space: nowrap;
}

.thumb img:hover {
    opacity: 1;
}

/* arrow keys */

a {
    text-decoration: none;
}

.arrow {
    position: absolute;
    bottom: 55px;
}

.arrow.disabled {
    display: none;
}

#left {
    left: -60px;
}

#right {
    right: -60px;
}

Functionality of Image Tab Gallery

We need two functionalities for our tab photo gallery.

1. Co-ordinate Thumbnail and Jumbotron Image

First functionality we are going to code is: when we click on thumbnail image, we want that image to display on #jumbotron (as main image).

let thumbClass = document.querySelectorAll('.thumb');

thumbClass.forEach(function (ele) {
    ele.addEventListener('click', function (e) {
        e.preventDefault();
        let thumbId = this.getAttribute("data-id");
        [...mainImg.children].forEach(function (ele) {
            if (thumbId === ele.getAttribute("data-id")) {
                ele.style.zIndex = "1"
            } else {
                ele.style.zIndex = "-1"
            }
        })
    })
})

2. Slide Thumbnail Images with Arrow keys

Now another funtionality we are going to add is:

  • ability to move thumbnail images to left when left arrow is clicked.
  • ability to move thumbnail images to right when right arrow is clicked.
let count = 0;

let initial = 0;

let leftArrow = document.getElementById("left");

let rightArrow = document.getElementById("right");

leftArrow.classList.add("disabled")

let thumbWidth = thumbClass[0].offsetWidth;

/* left arrow key */

leftArrow.addEventListener("click", function (e) {
    increaseCount('left');
    e.preventDefault();
    initial += thumbWidth;
    thumbImg.style.transform = "translateX(" + initial + "px)";
});

/* right arrow key*/

rightArrow.addEventListener("click", function (e) {
    increaseCount('right');
    e.preventDefault();
    initial -= thumbWidth;
    thumbImg.style.transform = "translateX(" + initial + "px)"
})

function increaseCount(arrow) {
    if (arrow === 'left') {
        count--
        updateArrows(count)
    } else {
        count++
        updateArrows(count)
    }
}

function updateArrows() {
    let mainImgWidth = mainImg.children[0].offsetWidth;
    let totalImages = imagesGallery.length;
    let thumbImageDisplayed = mainImgWidth / thumbWidth;
    let lastCount = totalImages - thumbImageDisplayed;
    if (count === lastCount) {
        rightArrow.classList.add("disabled");
    } else {
        rightArrow.classList.remove("disabled");
    }
    if (count === 0) {
        leftArrow.classList.add("disabled");
    } else {
        leftArrow.classList.remove("disabled");
    }
}

Complete Code

HTML

<div id="container">
  <div id="jumbotron"></div>
  <div id="thumbnail">
    <a href="#" class="arrow" id="left">&#10094</a>
    <div id="thumb"></div>
    <a href="#" class="arrow" id="right">&#10095</a>
  </div>
</div>

CSS

html{
    box-sizing: border-box;
}

*,
*::before,
*::after{
    box-sizing: inherit;
}

body{
    margin: 0;
    padding: 0;
}

#container {
    width: 450px;
    margin: 25px auto;
    position: relative;
}

/* jumbotron main images */

#jumbotron {
    height: 400px;
}

#jumbotron img {
    width: 100%;
    position: absolute;
}

/* thumbnail images */

#thumbnail {
    overflow: hidden;
}

.thumb img {
    width: 150px;
    height: 120px;
    opacity: .4;
}

#thumb {
    white-space: nowrap;
}

.thumb img:hover {
    opacity: 1;
}

/* arrow keys */

a {
    text-decoration: none;
}

.arrow {
    position: absolute;
    bottom: 55px;
}

.arrow.disabled {
    display: none;
}

#left {
    left: -60px;
}

#right {
    right: -60px;
}

JS

let imagesGallery = ["imageGallery/chef.jpg",
    "imageGallery/doctor.jpg",
    "imageGallery/home.jpg",
    "imageGallery/knife.jpg",
    "imageGallery/spoon.jpg",
    "imageGallery/street.jpg",
    "imageGallery/windy.jpg"
]

let mainImg = document.querySelector("#jumbotron");

let thumbImg = document.getElementById("thumb");

for (let i = 0; i < imagesGallery.length; i++) {
    let elem = document.createElement("img");
    elem.setAttribute("src", imagesGallery[i]);
    elem.setAttribute("data-id", "image" + i);
    elem.setAttribute("height", "350");
    elem.setAttribute("width", "350");
    mainImg.append(elem);
    let elem1 = elem.cloneNode(true)
    let a = document.createElement('a');
    a.setAttribute("href", '#');
    a.setAttribute('class', 'thumb');
    a.setAttribute("data-id", "image" + i);
    a.appendChild(elem1);
    thumbImg.append(a);
}

let thumbClass = document.querySelectorAll('.thumb');

thumbClass.forEach(function (ele) {
    ele.addEventListener('click', function (e) {
        e.preventDefault();
        let thumbId = this.getAttribute("data-id");
        [...mainImg.children].forEach(function (ele) {
            if (thumbId === ele.getAttribute("data-id")) {
                ele.style.zIndex = "1"
            } else {
                ele.style.zIndex = "-1"
            }
        })
    })
})

let count = 0;

let initial = 0;

let leftArrow = document.getElementById("left");

let rightArrow = document.getElementById("right");

leftArrow.classList.add("disabled")

let thumbWidth = thumbClass[0].offsetWidth;

// left arrow

leftArrow.addEventListener("click", function (e) {
    increaseCount('left');
    e.preventDefault();
    initial += thumbWidth;
    thumbImg.style.transform = "translateX(" + initial + "px)";
});

//right arrow

rightArrow.addEventListener("click", function (e) {
    increaseCount('right');
    e.preventDefault();
    initial -= thumbWidth;
    thumbImg.style.transform = "translateX(" + initial + "px)"
})

function increaseCount(arrow) {
    if (arrow === 'left') {
        count--
        updateArrows(count)
    } else {
        count++
        updateArrows(count)
    }
}

function updateArrows() {
    let mainImgWidth = mainImg.children[0].offsetWidth;
    let totalImages = imagesGallery.length;
    let thumbImageDisplayed = mainImgWidth / thumbWidth;
    let lastCount = totalImages - thumbImageDisplayed;

    if (count === lastCount) {
        rightArrow.classList.add("disabled");
    } else {
        rightArrow.classList.remove("disabled");
    }

     if (count === 0) {
        leftArrow.classList.add("disabled");
    } else {
        leftArrow.classList.remove("disabled");
    }
}