So I have an image gallery of 50 images that is generated by randomly picking 50 pics out of a pool of 500.
The code below works nicely but the images don't use the CSS style of the HTML file it is injected in, which includes a bigger preview of the image when hovering over it. How could I get it to work?
Thank you
I have this:
function show_image(src, width, height, alt) {
var img = document.createElement("img");
img.src = src;
img.width = width;
img.height = height;
img.alt = alt;
document.body.appendChild(img);
}
for (let i = 1; i<=50;i++ )
{
j= Math.floor((Math.random() * 500)+1);
source='config/images/file_name_'+j+'.jpg';
show_image(source,100, 100,'File_name_ #'+j);
}
Gallery code:
<html>
<head>
<meta name="Gallery" content="device-width, initial-scale=1.0">
<title>Title</title>
<link rel="icon" href="Icon.ico">
<link rel="stylesheet" href="config/menu2-1.css">
</head>
<body>
<div class="texte"></box><a>Gallery description.</a></div>
<div class="img-gallery">
<script src="Gallery.js"> </script>
</div>
</body>
</html>
CSS:
body{
margin: 0;
padding:0;
background: #C0DDF4;
font-family: Cochin,Cambria, Georgia, Times, 'Times New Roman', serif;
line-height: 0;
text-align: center;
width: 75%;
margin-left: auto;
margin-right: auto;
}
.img-gallery{
margin-top: 10px;
margin-left: 0px;
left: 25%;
top: 10px;
width: 100%;
}
.img-gallery img{
width:100px;
height:100px;
cursor:pointer;
}
.img-gallery img:hover{
transform: scale(3 ) rotate(-0deg) translateX(-10px) translateY(-10px);
border-radius:5px;
box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.75);
}