JavaScript Image Thumbnail Viewer Tutorial

javascript-image-thumbnail

Image Thumbnail Viewer

In the event that you search on the Internet utilizing any web index, you will locate an endless number of Javascript/jQuery picture displays that are accessible for you to use in your web ventures. Nonetheless, a large portion of them might be more than what you truly require. They may incorporate favor sliders, fly up windows, and other cool components. In this instructional exercise, we will cover how to assemble a straightforward thumbnail watcher utilizing JavaScript. We are not going to incorporate a considerable measure of extravagant accessories. This basic outline is proposed to be utilized for ventures that require a straightforward arrangement.


Source Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Simple JavaScript Image Thumbnail Viewer Tutorial | Lisenme.com</title>
<style>
.preview {
width:640px;
height:360px}

.thumb {
width:205px;
margin-right:3px;}

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

.selected {
border:3px solid #ff0000;}
</style>
</head>
<body>
<img id="0" class="preview normal" src="" alt="preview" /><br />
<img id="1" class="thumb normal" src="IMAGE PATH" alt="image1" onmouseover="preview(this)"/>
<img id="2" class="thumb normal" src="IMAGE PATH" alt="image2" onmouseover="preview(this)"/>
<img id="3" class="thumb normal" src="IMAGE PATH" alt="image3" onmouseover="preview(this)"/>
<script>

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

    function preview(img) {
        document.getElementById(lastImg).className = "thumb normal";
        img.className = "thumb selected";
        document.getElementById(0).src = img.src;
        lastImg = img.id
    }
</script>
</body>
</html>

 

You May Also Like

About the Author: admin

1 Comment

  1. Hi,

    Thank you for the video.
    Just want to ask, if the normal image, not the selected image, be smaller? Like 50%?
    As you know, I’m new.

    Thank you.

    Brandon

Leave a Reply

Your email address will not be published. Required fields are marked *