In: Computer Science
javascritp
Gallery On the gallery page, include a JavaScript driven photo gallery with at least five (5) images of original work (web pages screen shots, photographs, illustrations, etc) that you have created. The photo gallery must have previous and next buttons to change the image being displayed. Images must wrap to the first image when the next button is clicked while the last image is being displayed. Similarly, images must wrap to the last image when the previous button is clicked while the first image is being displayed. The next image must be displayed after five (5) seconds if the user has not clicked the next button. Use gallery.html as the filename for the Gallery page.
The following code snippet will add a simple javascript based slideshow on a webpage, the slideshow code starts from <div class="slideshow-container">, Although this code is static, this can also be converted to a dynamically generated page using php or any framwork.
<!-- Content for gallery.html -->
<html>
<head>
<!-- All the required feilds -->
</head>
<body>
<!-- any other data you want to add -->
<!-- slideshow starts -->
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 5</div>
<img src="img1.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 5</div>
<img src="img2.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 5</div>
<img src="img3.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 5</div>
<img src="img4.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 5</div>
<img src="img5.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<!-- Control buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<!-- circles at the bottom of the images-->
<div style="text-align:center">
<span class="circles" onclick="currentSlide(1)"></span>
<span class="circles" onclick="currentSlide(2)"></span>
<span class="circles" onclick="currentSlide(3)"></span>
<span class="circles" onclick="currentSlide(4)"></span>
<span class="circles" onclick="currentSlide(5)"></span>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var circles = document.getElementsByClassName("circles");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
circles[i].className = circles[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
circles[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // This makes the slideshow automatically start when page loads
}
</script>
this is the CSS used for the slideshow -
* {box-sizing:border-box}
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
.mySlides {
display: none;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.circles {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
Once implemented properly this will generate something ike this -