I’m trying to get this image gallery to function, but the result so far is just a static display that doesn’t actually work. I probably made an obvious mistake copying & pasting the code but I’m just not seeing it. Can you help? …Thanks
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Image Gallery</title>
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">
</script>
<script>
<script $(document).ready(function () {
// Change image on selection
$("#gallery img").click(function () {
// Get current image source
var image = $(this).attr("src");
// Apply grayscale to thumbnails except selected
$("#gallery").find("img").css("filter", "grayscale(1)");
$(this).css("filter", "none");
// Change image
$("#gallery-img").css("background-image", "url(" + image + ")");
// Apply link to image
$("#gallery-link").attr("href", image);
// Use id for count
$("#count").text($(this).attr("id"));
});
// Get total number of images
var gallerySize = $(".gallery-thumbnails img").length;
$("#total").text(gallerySize);
var display = $("#imgDisplay");
var scroll = $("#imgScroll");
var scale = $("#imgScale");
// Image display
display.change(function () {
if (display.val() === "contain") {
$("#gallery-img").css("background-size", "contain");
} else {
$("#gallery-img").css("background-size", "cover");
}
});
// Scroll
scroll.change(function () {
if (scroll.val() === "yes") {
$("#gallery-box").css("overflow", "scroll");
} else {
$("#gallery-box").css("overflow", "hidden");
}
});
// Scale
var changeScale = scale.change(function () {
$("#gallery-img").css("background-size", scale.val() + "px");
});
});
</script>
<style>
body {
width: 100vw;
height: 100vh;
margin: 2% auto;
background-color: #111;
}
label {
color: #5d5dff;
}
#gallery {
color: white;
}
#gallery-box {
display: block;
position: relative;
max-height: 400px;
width: 100%;
overflow: scroll;
width: 100%;
}
#gallery-box::-webkit-scrollbar {
width: 10px;
height: 10px;
}
#gallery-box::-webkit-scrollbar-track {
background: #e5e5e5;
}
#gallery-box::-webkit-scrollbar-thumb {
background: #5d5dff;
}
#gallery-box::-webkit-scrollbar-thumb:hover {
background: #7d7dff;
}
#gallery-count {
display: inline-block;
position: absolute;
top: 0;
right: 0;
padding: 15px;
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
height: 50px;
text-decoration: none;
}
#gallery-img {
display: -webkit-box;
display: flex;
min-height: 400px;
min-width: 600px;
height: auto;
background: #e5e5e5;
text-align: center;
background-image: url("https://loremflickr.com/800/600/dog?lock=10");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.gallery-thumbnails {
display: -webkit-box;
display: flex;
height: auto;
overflow: hidden;
width: 100%;
background: rgba(255, 255, 255, 0.1);
border-top: 2px solid white;
}
.gallery-thumbnails img {
float: left;
width: 10%;
cursor: pointer;
padding: 0;
-webkit-filter: grayscale(1);
filter: grayscale(1);
min-height: 25px;
}
.gallery-thumbnails img:hover {
-webkit-filter: none !important;
filter: none !important;
}
</style>
</head>
<body>
<div class="container" id="gallery">
<div class="col-xs-12 no-pad">
<h3>Image Gallery</h3>
<hr>
</div>
<div id="gallery-box">
<div id="gallery-count">
<span id="count">1</span> of <span id="total"></span>
</div><a href="https://loremflickr.com/800/600/dog?lock=10" id="gallery-link" target="_blank"></a>
<div id="gallery-img"></div>
</div>
<div class="gallery-thumbnails">
<div class="col-xs-12 no-pad"><img class="img-responsive" id="1" src="https://loremflickr.com/800/600/dog?lock=10"> <img class="img-responsive" id="2" src="https://loremflickr.com/800/600/dog?lock=20"> <img class="img-responsive" id="3" src="https://loremflickr.com/800/600/dog?lock=30"> <img class="img-responsive" id="4" src="https://loremflickr.com/800/600/dog?lock=40"> <img class="img-responsive" id="5" src="https://loremflickr.com/800/600/dog?lock=50"> <img class="img-responsive" id="6" src="https://loremflickr.com/800/600/dog?lock=60"> <img class="img-responsive" id="7" src="https://loremflickr.com/800/600/dog?lock=70"> <img class="img-responsive" id="8" src="https://loremflickr.com/800/600/dog?lock=80"> <img class="img-responsive" id="9" src="https://loremflickr.com/800/600/dog?lock=90"> <img class="img-responsive" id="10" src="https://loremflickr.com/800/600/dog?lock=100"></div>
</div>
<hr>
<div class="row">
<div class="col-xs-12 col-sm-4">
<label>Image Display</label> <select class="form-control" id="imgDisplay">
<option value="cover">
cover
</option>
<option value="contain">
contain
</option>
</select>
</div>
<div class="col-xs-12 col-sm-4">
<label>Scroll</label> <select class="form-control" id="imgScroll">
<option value="yes">
Yes
</option>
<option value="no">
No
</option>
</select>
</div>
<div class="col-xs-12 col-sm-4">
<label>Scale</label> <input class="slider form-control" id="imgScale" max="1200" min="200" type="range" value="700">
</div>
</div>
</div>
</body>
</html>