Gallery function implemented by native Js

The first
The second

Native Js implements the gallery function. Click on the picture and the corresponding enlarged picture will appear below. Bind the onclick event to the a tag. The small image above and the large image below are the same image, but different width and height are set in the styles of the two imgs. (If you don't want to set width and height, another way is to save the image in the src of the a tag as a large image, and img displays a small image.) Use Js click events combined with CSS to display or hide the large image and switch images

The details are as follows, and the code is attached

The first

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        img{
            width: 200px;
            height: 100px;

        }
        #showimg{
            width: 500px;
            height: 240px;
          /* background-color: pink;*/
        }
        .hide{
            display: none;
        }
        .show{
            display: block;
        }
    </style>
</head>
<body>
    <div id = "imagegallery">
        <a href="../../imgs/1.jpg" rel="external nofollow" title="pic1">
            <img src="../../imgs/1.jpg" alt="1">
        </a>

        <a href="../../imgs/2.jpg" rel="external nofollow" title="pic2">
            <img src="../../imgs/2.jpg" alt="2">
        </a>

        <a href="../../imgs/3.jpg" rel="external nofollow" title="pic3">
            <img src="../../imgs/3.jpg" alt="3">
        </a>

        <a href="../../imgs/4.jpg" rel="external nofollow" title="pic4">
            <img src="../../imgs/4.jpg" alt="4">
        </a>
    </div>

    <!-- Clear floating -->
    <div style="clear: both"></div>
    
    <!--Use a blank image to occupy a position-->
    <!-- <img id="image" src="" alt="" width="450px"> -->

    
    <img id="showimg" src="" class="hide" alt="">

    <p id="desc"></p>


    
    <script>
        var imagegallery = document.getElementById("imagegallery");
        var link = document.getElementsByTagName("a");
        var showimg = document.getElementById("showimg");
        var desc = document.getElementById("desc");



        //For the bound events added inside the for loop, when triggered, all the batch added events have been successful, and the events are triggered after the loop ends. //If there is a variable i inside the event function of the batch bound events, please note that the function is executed after the loop ends. //The variable defined inside the loop is a global variable. The value of the variable i executed after the loop is the value when i jumps out of the loop. image.src = links[i].href;
        
       // for(var i = 0;i < link.length;i++){
        // link[i].onclick = function(){
        // // alert("123");
        // // Change the src attribute value inside the image // showimg.src = link[i].href;
        // // Change the text description in desc // return false; // Cancel the default jump of label a // }
        // }
       
        
        for(var i = 0;i < link.length;i++){
            link[i].onclick = function(){
                // alert("123");
                // Change the src attribute value inside the imageshowimg.src = this.href;//this. keyword refers to the real event source that triggers the event//Change the img displayshowimg.className = "show";
                // Change the text description inside desc desc.innerText = this.title;
                return false; //Cancel the default jump of label a}
        }


      

        
    </script>
</body>
</html>

The second

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Simple light box gallery design</title>
	<style>
	*{
		margin: 0;
	}
		#total{
			width:100%;
			background-color: green;
			height:1000px;
		}
        #fpic{
        	margin-left: 15%;
        }
		.pic{
			margin : 50px;
			width: 100px;
			height: 100px;
		}
		#show-bigger{
			margin: auto;
			width: 600px;
			height: 450px;
			background-color: red;
		}
	</style>
</head>
<body>
<div id="total">
<h3 style="color: white;text-align:center;">Simple gallery design</h3>	
<hr color="red">
<img class="pic" id="fpic"src="trees/t1.jpg" onclick="myfunction(this)" tabIndex=1 onblur="myfunction1(this)">
<img class="pic" src="trees/t2.jpg" onclick="myfunction(this)" tabIndex=1 onblur="myfunction1(this)">
<img class="pic" src="trees/t3.jpg" onclick="myfunction(this)" tabIndex=1 onblur="myfunction1(this)">
<img class="pic" src="trees/t4.jpg" onclick="myfunction(this)" tabIndex=1 onblur="myfunction1(this)">
<img class="pic" src="trees/t5.jpg" onclick="myfunction(this)" tabIndex=1 onblur="myfunction1(this)">
<img class="pic" src="trees/t6.jpg" onclick="myfunction(this)" tabIndex=1 onblur="myfunction1(this)">
<div id="show-bigger"><img id="spic" src="trees/t1.jpg" style="width: 100%;height: 100%"></div>
</div>
</body>
<script type="text/javascript">
	function myfunction(x){ //Change the image in the display box and the border of the selected image document.getElementById("spic").src=x.src;
		x.style.borderBottom="5px solid red";
	}
	function myfunction1(x){ //Eliminate unselected border attributes x.style.border="none";        
	}
</script>
</html>

The above is the details of the gallery function implemented by native Js. For more information about the gallery function implemented by Js, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in: