JavaScript Image Thumbnails Preview Gallery

Today, We want to share with you JavaScript Image Thumbnails Preview Gallery.In this post we will show you javascript image gallery with thumbnails, hear for CSS Image Thumbnail Viewer in javascript Gallery we will give you demo and example for implement.In this post, we will learn about Responsive Image Gallery with Thumbnail Carousel with an example.

JavaScript Image Thumbnails Preview Gallery

There are the Following The simple About JavaScript Image Thumbnails Preview Gallery Full Information With Example and source code.

As I will cover this Post with live Working example to develop jQuery Thumbnail Image Slider – CSS, JavaScript, so the css image gallery with thumbnails for this example is following below.

Example 1: JavaScript Image Thumbnail Viewer Tutorial

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Simple javascript image gallery with thumbnails | Pakainfo.com</title>
<style>
.liveimgpreview {
width:640px;
height:360px}

.gallerythumb {
width:204px;
margin-right:3px;}

.defaultset {
border:3px solid #000000;}

.selected {
border:3px solid #ff0000;}
</style>
</head>
<body>
<h1>Image Thumbnail Viewer</h1>
<img id="0" class="liveimgpreview defaultset" src="" alt="preview" /><br />
<img id="1" class="gallerythumb defaultset" src="YOUR IMAGES BASE PATH" alt="Product1" onmouseover="liveimgpreview(this)"/>
<img id="2" class="gallerythumb defaultset" src="YOUR IMAGES BASE PATH" alt="Product2" onmouseover="liveimgpreview(this)"/>
<img id="3" class="gallerythumb defaultset" src="YOUR IMAGES BASE PATH" alt="Product3" onmouseover="liveimgpreview(this)"/>
<script>

    var lastImg = 1; //Set initial thumbnail and liveimgpreview
    document.getElementById(0).src = document.getElementById(lastImg).src;
    document.getElementById(lastImg).className = "gallerythumb selected";

    function liveimgpreview(img_param) {
        document.getElementById(lastImg).className = "gallerythumb defaultset";
        img_param.className = "gallerythumb selected";
        document.getElementById(0).src = img_param.src;
        lastImg = img_param.id
    }
</script>
</body>
</html>

Example 2: Simple JavaScript Image Thumbnail Viewer

<html>
<head>
    <title>JavaScript Thumbnail Slider</title>
    <style type="text/css">
        .img_container {
            margin: 0 auto;
            width: 191px;
            height: 113px;    
            border: 0;
            overflow: hidden;
            background-color: #FFFFFF;
            webkit-box-shadow: 2px 0 10px rgba(0,0,0,0.2), -2px 0 10px rgba(0,0,0,0.2);
            -moz-box-shadow: 2px 0 10px rgba(0,0,0,0.2), -2px 0 10px rgba(0,0,0,0.2);
            box-shadow: 2px 0 10px rgba(0,0,0,0.2), -2px 0 10px rgba(0,0,0,0.2);    
            border: solid 0px #FFFFFF; 
            border-radius: 4px;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;    
            display: block;
        }       
        #gallery {
            margin:0 auto;
            width:200px;
            height:20px;
            position:relative;
            top:-2px;
        }
        .thumbnailSlide {
            text-align:center; 
            width:100%; 
            display:block;
        }
        .thumbnailSlide .btSld {
            margin:3px; 
            padding:4px;
            height:4px;
            text-decoration:none;
            outline:none;
            cursor:pointer; 
            border:solid 2px #FFFFFF;
            border-radius:30px;
            -moz-border-radius:30px; 
            -webkit-border-radius:30px; 
        }
    </style>
</head>
<body>
    <p>Click the little circles below the Product Thumb to slide</p> 
    <div class="img_container">
        <a href="#" rel="">
            <img src="https://www.yourDomainName.com/2019/11/slide/image1.jpg" id="pb1" alt="" border="0" />
        </a>
    </div>
        
    <div id="gallery">
        <div class="thumbnailSlide">
            <input type="button" id="1" class="btSld" 
                style="background-color:#567DD8;"
                onclick="javascript:previewThumb(this.id);" />
            <input type="button" id="2" class="btSld" 
                onclick="javascript:previewThumb(this.id);" />
            <input type="button" id="3" class="btSld" 
                onclick="javascript:previewThumb(this.id);" />
            <input type="button" id="4" class="btSld" 
                onclick="javascript:previewThumb(this.id);" />
        </div>
    </div>
</body>

<script>
    var array_Thumb = new Array();  

    array_Thumb[1] = 'https://www.yourDomainName.com/2019/11/media/Product1.jpg';
    array_Thumb[2] = 'https://www.yourDomainName.com/2019/11/media/Product2.jpg';
    array_Thumb[3] = 'https://www.yourDomainName.com/2019/11/media/Product3.jpg';
    array_Thumb[4] = 'https://www.yourDomainName.com/2019/11/media/Product4.jpg';

    var setThumb;
    var thumbnailCounter = array_Thumb.length - 1;

    var arrThumbCnt = new Array();
    for (setThumb = 1; setThumb < thumbnailCounter + 1; setThumb++) {
        arrThumbCnt[setThumb] = new Image();
        arrThumbCnt[setThumb].src = array_Thumb[setThumb];
    }
        
    function previewThumb(img) {
        document.images.pb1.src = arrThumbCnt[img].src;
            
        for (setThumb = 1; setThumb < thumbnailCounter + 1; setThumb++) {
            
            if (setThumb == img) 
                document.getElementById(setThumb).style.backgroundColor = "#567DD8";
            else 
                document.getElementById(setThumb).style.backgroundColor = "#CCC";
        }
    }
</script>
</html>

Angular 6 CRUD Operations Application Tutorials

Read :

Read Also:  what is dbms and rdbms? : Difference between DBMS and RDBMS

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about JavaScript Image Thumbnails Preview Gallery.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.