图片库使用php css和javascript [英] Image Gallery Using php css and javascript

问题描述

我正在尝试创建一个简单的图库。我正在关注YouTube上的教程。我很确定我跟得很好。但是，我不确定为什么它不起作用。这似乎是JavaScript导致的问题，因为我总是保存并每次检查它。但是当我添加代码的时候，当你点击一个缩略图图像时，它会用大图切换图像。这里是我的代码

I am trying to create a simple image gallery. I was following a tutorial on youtube. I am pretty sure i followed it well. However, I wasn't sure why it won't work. It seems that the javascript was causing the problem because i always save and check it every time. But when I added the code where when you click on a thumbnail image, it will switch images with the big Image. here are my codes

PHP

PHP

    <div id="gHolder">
        <div id="theBigImageHolder">
            <img src="http://2.media.dorkly.cvcdn.com/24/85/a2d9c425cf32934dbe8648be5a453042.jpg"
 id="BigImage">
        </div>
        <div id="thumbnailsHolder">
            <img src="http://2.media.dorkly.cvcdn.com/24/85/a2d9c425cf32934dbe8648be5a453042.jpg">
            <img src="https://i.kinja-img.com/gawker-media/image/upload/s--aTCcDbn_--/c_fill,fl_progressive,g_center,h_900,q_80,w_1600/1503194806639950221.png">
            <img src="https://i.imgur.com/i7VBIz3.jpg">
            <img src="https://i.ytimg.com/vi/FaFrYdoD6XY/maxresdefault.jpg">
            <img src="http://assets1.ignimgs.com/2017/06/07/13313349-10154255755436457-483416867-o-1496868408304_1280w.jpg">
        </div>
      </div>

CSS

CSS

#gHolder{
      width: 600px;
      height: 500px;
      margin: 0 auto;
      background-color: silver;
      padding: 10px;
    }
#theBigImageHolder{
      width: 600px;
      height: 400px;
      background-color: white;
    }
#thumbnailsHolder{
      width: 590px;
      height: 90px;
      background-color: white;
      margin: 2px auto;
      padding: 5px;
    }
#theBigImageHolder > img{
      width: 600px;
      height: 400px;
    }
#thumbnailsHolder > img{
      width: 90px;
      height: 90px;
      display: block;
      float: left;
      margin: 2px;
      transition: border-radius 0.3s linear 0s;
    }
#thumbnailsHolder > img:hover{
      border-radius: 100px;
      cursor: pointer;
    }

Javascript $ b

Javascript

 function imgFunc(){
          var bigImage = document.getElementById("bigImage");
          var thumbnailsHolder = document.getElementById("thumbnailsHolder");

 thumbnailsHolder.addEventListener("click",function(event){
            if (event.target.tagName == "IMG") {
              bigImage.src = event.tagName.src;
            }
          }, false);
      }
      window.addEventListener("load",imgFunc,false);

你们知道javascript在哪里编码不正确吗？非常感谢
这里是预览。
https://codepen.io/UmaruHime/pen/JryvyP

Do you guys know where in javascript i coded incorrectly? Big Thanks here is a preview. https://codepen.io/UmaruHime/pen/JryvyP

推荐答案

ID错误，应该是

Error in Id , it should be

document.getElementById("BigImage");

第二个错误

And second error

 if (event.target.tagName == "IMG") {
   bigImage.src = event.target.src; //instead of bigImage.src = event.tagName.src;
 }

小提琴

这篇关于图片库使用php css和javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！