How to Create a Tab Image Gallery ?

0 0 1 minute read

To create a tab image gallery you need to use HTML, CSS, and JavaScript. HTML will make the structure of the body, and CSS will make it looks good. This kind of tab image gallery looks attractive on a website. By using JavaScript you can easily change the displayed pictures from the gallery.

Creating Structure: In the HTML section, we will create a basic website structure for the tab image gallery.

Designing Structure: In the CSS and JavaScript section we will design the structure for the tab image gallery and then change the picture effect on the tab image gallery using JavaScript.

html

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta name="viewport"
        content="width=device-width, initial-scale=1"> 
    <title> 
        How To Create a Tab Image Gallery 
    </title> 
</head> 
  
<body> 
    <div style="text-align:center"> 
        <h1>zambiatek</h1> 
          
        <h4>A Computer Science Portal for Geeks</h4> 
          
<p>Tab Image Gallery</p> 
  
    </div> 
  
    <!-- gallery pic -->
    <div class="row"> 
        <div id="zambiatek"> 
            Here the Photo will be displayed 
        </div> 
  
        <div class="column"> 
            <img src= 
"https://media.zambiatek.com/wp-content/uploads/20191129163105/zambiatek_sale.png"
                style="width:100%" onclick="gfg(this);"> 
            <img src= 
"https://media.zambiatek.com/wp-content/uploads/20191128181646/perl-Tutorial.png"
                style="width:100%" onclick="gfg(this);"> 
            <img src= 
"https://media.zambiatek.com/wp-content/uploads/20191127161209/BF-TokenMail-min-min.png"
                style="width:100%" onclick="gfg(this);"> 
        </div> 
  
        <div class="column"> 
            <span onclick= 
                "this.parentElement.style.display='none'"> 
            </span> 
              
            <img id="expand" style="width:70%;  
                height: 50%; margin-top: 15px;"> 
        </div> 
    </div> 
</body> 
  
</html> 

CSS

<style> 
    h1 { 
        color: green; 
    } 
            
    /* column pic */
    .column { 
        float: left; 
        width: 25%; 
        padding: 10px; 
    } 
            
    /* Style the images of gallery */
    .column img { 
        opacity: 0.6; 
        cursor: zoom-in; 
        padding: 5px; 
    } 
      
    .column img:hover { 
        opacity: 1; 
        transform: scale(1.1); 
        transition: 0.5s; 
    } 
      
    .column img:active { 
        opacity: 1; 
    } 
            
    * { 
        box-sizing: border-box; 
    } 
      
    /* Expanding image text */
    #zambiatek { 
        position: absolute; 
        left: 200px; 
        padding-top: 100px; 
        font-size: 28px; 
        color: #EFECE9; 
    } 
      
    #zambiatek:hover { 
        color: #ADE3BD; 
        cursor: wait; 
    } 
</style>

Javascript

<script> 
    function gfg(imgs) { 
        var expandImg = document.getElementById("expand"); 
        var imgText = document.getElementById("zambiatek"); 
        expandImg.src = imgs.src; 
        imgText.innerHTML = imgs.alt; 
        expandImg.parentElement.style.display = "block"; 
    } 
</script>

Output: To check the live output click here

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!