UmaruHime UmaruHime - 3 years ago 157
CSS Question

Image Gallery Using php css and 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

<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

#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

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);


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

Answer Source

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;
 }

Fiddle

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download