- Here is simple codes for image viewer in HTML.
- I got these codes from Riani.
- Here are the codes.
<!doctype html>
<html>
<head>
<title>example</title>
<style>
.active, .dot: hover {
background-color: #717171;
}
.dot {
background-color: #BBBBBB;
border-radius: 50%;
cursor: pointer;
display: inline-block;
height: 13px;
margin: 0px 2px;
transition: background-color 0.5 s ease;
width: 13px;
}
.fade {
-webkit-animation-duration: 1.5s;
-webkit-animation-name: fade;
animation-duration: 1.5s;
animation-name: fade;
}
.next {
right: 20%;
border-radius: 3px 0px 0px 3px;
}
.next, .prev {
border-radius: 0px 3px 3px 0px;
color: white;
cursor: pointer;
font-weight: bold;
margin-top: -22px;
padding: 16px;
position: absolute;
top: 40%;
transition: 0.5s ease;
width: auto;
}
.next: hover, .prev: hover {
background-color: #000000;
}
.prev {
border-radius: 3px 0px 0px 3px;
left: 20%;
}
.slide {
display: none;
}
.slideshow-container {
margin: auto;
max-width: 1000px;
position: relative;
}
.text {
bottom: 1px;
color: #000000;
font-size: 18px;
font-weight: bold;
padding: 8px 12px;
position: absolute;
text-align: center;
width: 100%;
}
.text-number {
color: #F2F2F2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
@-webkit-keyframes fade {
from {opacity: 4;}
to {opacity: 1;}
}
@keyframes fade {
from {opacity: 4;}
to {opacity: 1;}
}
</style>
</head>
<body>
<h1 style="text-align: center;">simple image gallery</h1>
<div class="slideshow-container">
<div class="fade slide">
<div class="text-number">1/4</div>
<img src="1.jpg" style="width: 100%;">
<div class="text" style="color: #FFFFFF">example image 1</div>
</div>
<div class="fade slide">
<div class="text-number">2/4</div>
<img src="2.jpg" style="width: 100%;">
<div class="text" style="color: #FFFFFF">example image 2</div>
</div>
<div class="fade slide">
<div class="text-number">3/4</div>
<img src="3.jpg" style="width: 100%;">
<div class="text" style="color: #FFFFFF">example image 3</div>
</div>
<div class="fade slide">
<div class="text-number">4/4</div>
<img src="4.jpg" style="width: 100%;">
<div class="text" style="color: #FFFFFF">example image 4</div>
</div>
</div>
<div>
<a class="prev" onclick="add(1)">❮</a>
<a class="next" onclick="add(-1)">❯</a>
</div>
<br>
<div style="text-align: center;">
<span class="dot" onclick="set(1)"></span>
<span class="dot" onclick="set(2)"></span>
<span class="dot" onclick="set(3)"></span>
<span class="dot" onclick="set(4)"></span>
</div>
<script>
var index = 1;
show(index);
function add(_number) {show(index += _number);}
function set(_number) {show(index = _number);}
function show(_number) {
var dot = document.getElementsByClassName("dot");
var slide = document.getElementsByClassName("slide");
if (_number < 1) {index = slide.length}
if (_number > slide.length) {index = 1}
for (var i = 0; i < dot.length; i ++) {
dot[i].className = dot[i].className.replace(" active", "");
}
for (var i = 0; i < slide.length; i ++) {
slide[i].style.display = "none";
}
dot[index - 1].className += " active";
slide[index - 1].style.display = "block";
}
</script>
</body>
</html>
- Here is the attached compressed project file.
./20170409-0157-cet-codes-1.zip