I've been studying hard about auto slideshow, my problem is when i clicked at bullet for it to shows next image, the image suddenly disappear.
At first i thought because i used addEventListener event that's why it didn't work, then i changed to use "click" event which is jquery, the result it's still the same.
I now really have no idea what to do next, i would like to hear some advices from professional or web developer, please! i would very appreciate it.
var toggleMenu = $(document).ready(function () {
$("#maintopics").click(function (e) {
e.preventDefault();
e.stopPropagation();
$("#subtopics").toggle("fast");
});
$("html").click(function() {
if ($("#subtopics").is(':visible')) {
$("#subtopics").toggle();
}
});
});
// slideshow
var slideShow = $(document).ready(function () {
var slideImages = document.getElementsByClassName("slide");
var bulletImages = document.getElementsByClassName("bullets");
var index = 0;
function hideImages() {
for (var i = 0; i < slideImages.length; i++) {
slideImages[i].style.display = 'none';
$(bulletImages[i]).removeClass("clicked");
}
}
function initiaImage() {
for (var i = 0; i < slideImages.length; i++) {
slideImages[0].style.display = 'block';
$(bulletImages[index]).addClass("clicked");
}
}
function slidingImages() {
hideImages();
if (index < slideImages.length - 1)
index++;
else {
index = 0;
}
slideImages[index].style.display = 'block';
$(bulletImages[index]).addClass("clicked");
}
function autoSlide() {
setInterval(function () {
slidingImages();
}, 2000);
}
function arrowSlide() {
var prev = document.getElementById("prev");
var next = document.getElementById("next");
$(prev).click(function () {
hideImages();
if (index === 0) {
index = slideImages.length;
}
slideImages[index - 1].style.display = 'block';
index--;
$(bulletImages[index]).addClass("clicked");
});
$(next).click(function () {
hideImages();
if (index === slideImages.length - 1) {
index = -1;
}
slideImages[index + 1].style.display = 'block';
index++;
$(bulletImages[index]).addClass("clicked");
});
}
function bulletSlide() {
for (var i = 0; i < bulletImages.length; i++) {
$(bulletImages).click(function () {
hideImages();
slideImages[i].style.display = 'block';
index = i;
});
}
}
return {
hideImages: hideImages(),
initiaImage: initiaImage(),
autoSlide: autoSlide(),
arrowSlide: arrowSlide(),
bulletSlide: bulletSlide()
}
});
/*slideshow*/
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
#slideshow {
position: relative;
max-width: 800px;
margin: 0 auto;
}
.slide {
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
width: 800px;
height: 400px;
margin: 0 auto;
max-width: 100%;
z-index: 1;
}
.slidecontent {
position: absolute;
color: white;
top: 50%;
left: 50%;
transform: translate3d(-50%,-50%,0);
}
.arrow {
position: absolute;
cursor: pointer;
width: auto;
padding: 15px;
top: 50%;
font-size: 50px;
color: white;
border-radius: 0 10px 10px 0;
transition: 0.5s ease;
transform: translate3d(0,-50%,0);
}
#prev {
left: 0px;
max-width: 100%;
}
#next {
right: 0px;
max-width: 100%;
border-radius: 10px 0px 0px 10px;
}
#previous:hover, #next:hover {
background-color: rgba(0,0,0,0.8);
}
#slidebullets {
position: relative;
text-align: center;
top: -30px;
}
.bullets {
display: inline-block;
background-color: gray;
width: 15px;
height: 15px;
border-radius: 10px;
cursor: pointer;
transition: background-color 0.6s ease;
}
.clicked {
background-color: #ff0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="index2.css" />
</head>
<body>
<div id="slideshow">
<div id="slide1" class="slide">
<span class="slidecontent">SlideImage1</span>
</div>
<div id="slide2" class="slide">
<span class="slidecontent">SlideImage2</span>
</div>
<div id="slide3" class="slide">
<span class="slidecontent">SlideImage3</span>
</div>
<div id="prev" class="arrow">❮</div>
<div id="next" class="arrow">❯</div>
</div>
<div id="slidebullets">
<div id="bullet1" class="bullets"></div>
<div id="bullet2" class="bullets"></div>
<div id="bullet3" class="bullets"></div>
</div>
<script src="jquery.js"></script>
<script src="index2.js"></script>
</body>
</html>
https://jsfiddle.net/b9asqxc5/1/
Getting the value of i in a wrong way, alert i to see its value:
function bulletSlide() {
for (var i = 0; i < bulletImages.length; i++) {
$(bulletImages).click(function () {
alert(i); // i = 3
hideImages();
slideImages[i].style.display = 'block';
index = i;
});
}
}
Please revise as below:
function bulletSlide() {
$(bulletImages).click(function () {
hideImages();
slideImages[$(this).index()].style.display = 'block';
index = $(this).index();
});
}
Vanilla JS version:
function bulletSlide() {
[].forEach.call(bulletImages, function(bimg,i,a) {
bimg.addEventListener('click', function () {
hideImages();
slideImages[i].style.display = 'block';
index = i;
});
});
}
Related
I have a carousel that I have to hard code and I need some help. I want to make a slide effect for mobile phones but I can't find a replacement for album.scrollBy. If you take a look at the code, you can see that on touchMove I scroll the parent element of the carousel but after the touch is done I transform the carousel and the album remains scrolled. So the only solution I found was to remove the scroll after the transition but is doesn't look good. Any ideas?
This is the carousel index.html
<body>
<div id="album" autoCall="true" class='album'>
<ul id="carousel" class='carousel is-set'>
<li class='container carousel-element'>
<img src="assets/img1.jpeg">
</li>
<li class='container carousel-element'>
<img src="assets/img2.jpeg">
</li>
<li class='container carousel-element'>
<img src="assets/img3.jpeg">
</li>
<li class='container carousel-element is-ref'>
<img src="assets/img4.jpeg">
</li>
</ul>
<div class="left-arrow"></div>
<div class="right-arrow"></div>
</div>
<script src="SLID/js/index.js"></script>
</body>
This is the CSS file that contains the transitions:
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
scroll-behavior: smooth;
}
.album {
overflow: hidden;
width: 100%;
height: 100%;
margin: auto;
position: relative;
}
.carousel {
height: 100%;
width: 100%;
display: flex;
left: -100%;
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.carousel.toNext {
transform: translateX(100%);
}
.carousel.toPrev {
transform: translateX(-100%);
}
.carousel.is-set {
transform: none;
transition: transform 0.5s cubic-bezier(0.215, 0.610, 0.355, 1);
}
.carousel-element {
background: #ddd;
flex: 1 0 100%;
text-align: center;
order: 2;
position: relative;
height: 100% !important;
max-width: 100% !important;
padding: 0;
}
.carousel-element:nth-child(even) {
background: #d5d5d5;
}
.carousel-element.is-ref {
order: 1;
}
.controls {
padding: 2em;
text-align: center;
}
.container {
margin: 0 auto;
height: 100%;
width: 100%;
}
.carousel-element >img, video {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-width: 100%;
max-height: 100%;
margin: auto;
padding: 0 !important;
}
.left-arrow,
.right-arrow {
height: 100%;
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
width: 15%;
color: #fff;
text-align: center;
opacity: .5;
transition: opacity .15s ease
}
.left-arrow {
left: 0;
background: red
}
.right-arrow {
right: 0;
background: blue;
}
And here is the JS file:
let album = document.getElementById("album");
let carousel = document.getElementById("carousel");
let seats = document.querySelectorAll("ul > li");
if (seats.length === 1)
carousel.style.left = 0;
class SLID {
constructor() {
this.nextDisable = false;
this.prevDisable = false;
this.startX = 0;
this.finalX = 0;
this.lastX = 0;
this.didTheTouchMove = false;
}
goToNext() {
this.nextDisable = true;
var el, i, j, new_seat, ref;
el = document.querySelector("ul > li.is-ref");
el.classList.remove('is-ref');
new_seat = el.nextElementSibling || seats[0];
new_seat.classList.add('is-ref');
new_seat.style.order = 1;
for (i = j = 2, ref = seats.length; (2 <= ref ? j <= ref : j >= ref); i = 2 <= ref ? ++j : --j) {
new_seat = new_seat.nextElementSibling || seats[0];
new_seat.style.order = i;
}
carousel.classList.remove('toPrev');
carousel.classList.add('toNext');
carousel.classList.remove('is-set');
document.getElementById('carousel').addEventListener("transitionend", () => {
this.nextDisable = false;
}, {
once: true,
});
return setTimeout((function () {
return carousel.classList.add('is-set');
}), 50);
}
goToPrev() {
this.prevDisable = true;
var el, i, j, new_seat, ref;
el = document.querySelector("ul > li.is-ref");
el.classList.remove('is-ref');
new_seat = el.previousElementSibling || seats[seats.length - 1];
new_seat.classList.add('is-ref');
new_seat.style.order = 1;
for (i = j = 2, ref = seats.length; (2 <= ref ? j <= ref : j >= ref); i = 2 <= ref ? ++j : --j) {
new_seat = new_seat.nextElementSibling || seats[0];
new_seat.style.order = i;
}
carousel.classList.remove('toNext');
carousel.classList.add('toPrev');
carousel.classList.remove('is-set');
document.getElementById('carousel').addEventListener("transitionend", () => {
this.prevDisable = false;
}, {
once: true
});
return setTimeout((function () {
return carousel.classList.add('is-set');
}), 50);
}
}
if (document.getElementById("album").getAttribute('autoCall') === "true") {
let s = new SLID();
document.addEventListener("keydown", (e) => {
if (e.keyCode === 37)
if (s.prevDisable === false)
s.goToPrev();
if (e.keyCode === 39)
if (s.nextDisable === false)
s.goToNext();
})
carousel.addEventListener("touchstart", (e) => {
s.startX = e.touches[0].clientX;
s.lastX = e.touches[0].clientX;
})
carousel.addEventListener("touchmove", (e) => {
album.scrollBy(s.lastX - e.touches[0].clientX, 0);
s.lastX = e.touches[0].clientX;
})
carousel.addEventListener("touchend", (e) => {
album.scrollBy(s.lastX - s.startX, 0);
s.goToNext();
})
}
I'm a new javascript, let me direct to the point. I have heard that we have to avoid global variables as much as we can, so, i learn to use closure for make sure that variables can not access to each other.
I have slideShow function which is on the top and toggleMenu function on the bottom, these functions are work fine in my webpage.
My problems is when i changed position of functions, slideShow function to the bottom and toggleMenu function to the top, my webpage it looks not fine, doesn't work properly
May be there is something that i don't know? or i did something wrong? if any one would give me some advices i would appreciate that, thank you.
Here is original code
var slideShow = (function () {
var slideImages = document.getElementsByClassName("slide");
var leftSide = document.getElementById("arrow-left");
var rightSide = document.getElementById("arrow-right");
var slideBullets = document.getElementsByClassName("bullets");
var current = 0;
function reset() {
for (let i = 0; i < slideImages.length; i++) {
slideImages[i].style.display = 'none';
slideBullets[i].classList.remove("clicked");
}
};
function showImages() {
for (let i = 0; i < slideImages.length; i++) {
slideImages[0].style.display = 'block';
slideBullets[current].classList.add("clicked");
}
};
function arrowSlide() {
leftSide.addEventListener("click", function () {
reset();
if (current === 0) {
current = slideImages.length;
}
slideImages[current - 1].style.display = 'block';
current--;
slideBullets[current].classList.add("clicked");
});
rightSide.addEventListener("click", function () {
reset();
if (current === slideImages.length - 1) {
current = - 1;
}
slideImages[current + 1].style.display = 'block';
current++;
slideBullets[current].classList.add("clicked");
});
};
function showBulletsImages() {
for (let i = 0; i < slideBullets.length; i++) {
slideBullets[i].addEventListener("click", function () {
reset();
slideImages[i].style.display = 'block';
slideBullets[i].classList.add("clicked");
current = i;
});
}
};
function autoSlide() {
setInterval(function () {
rightSide.click();
slideBullets[current].classList.add('clicked')
}, 2000);
};
return {
reset: reset(),
showImages: showImages(),
arrowSlide: arrowSlide(),
showBulletsImages: showBulletsImages(),
autoSlide: autoSlide()
};
})();
var toggleMenu = (function () {
var mainTopics = document.getElementById("maintopics");
mainTopics.addEventListener("click", function (e) {
e.preventDefault();
e.stopImmediatePropagation();
mainTopics.classList.toggle("show");
});
document.addEventListener("click", function (e) {
if (e.target.id !== 'arrow-right') {
mainTopics.classList.remove("show");
}
});
return {
toggleMenu: toggleMenu()
};
})();
body {
margin: 0;
}
li, a{
text-decoration: none;
list-style-type: none;
text-decoration-line: none;
color: black;
}
/*main-menu*/
#mainmenu {
position: relative;
}
#mainmenu ul {
margin: 0;
padding: 0;
}
#mainmenu li {
display: inline-block;
}
#mainmenu a {
display: block;
width: 100px;
padding: 10px;
border: 1px solid;
text-align: center;
}
/*sub-topics*/
#subtopics {
position: absolute;
display: none;
margin-top: 10px;
width: 100%;
left: 0;
}
#maintopics.show #subtopics {
display: block;
}
#subtopics ul {
margin: 0;
padding: 0;
}
#subtopics li {
display: block;
}
#subTopics a {
text-align: left;
}
/*columns*/
#column1, #column2, #column3 {
position: relative;
float: left;
left: 125px;
margin: 0px 5px 0px 0px;
}
/*hover underline*/
#mainmenu li:hover {
text-decoration: underline;
}
/*slideshow*/
#slideshow {
position: relative;
width: 100%;
height: 100%;
}
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
.slide {
background-repeat: no-repeat;
background-position: center;
background-size: 800px 400px;
width: 800px;
height: 400px;
margin: auto;
margin-top: 40px;
}
.slide-contain {
position: absolute;
left: 50%;
bottom: 50%;
transform: translate3d(-50%,-50%,0);
text-align: center;
}
.slide-contain span {
color: white;
}
/*arrow*/
.arrow {
position: absolute;
cursor: pointer;
top: 200px;
width: 0;
height: 0;
border-style: solid;
}
.arrow:hover {
background-color: #e0dede;
transition: background-color 0.6s ease;
}
#arrow-left {
position: absolute;
border-width: 30px 40px 30px 0px;
border-color: transparent gray transparent transparent;
left: 0;
margin-left: 300px;
}
#arrow-right {
border-width: 30px 0px 30px 40px;
border-color: transparent transparent transparent gray;
right: 0;
margin-right: 300px;
}
/*bullets*/
#slidebullet {
position: relative;
top: -30px;
text-align: center;
}
.bullets {
display: inline-block;
background-color: gray;
width: 15px;
height: 15px;
border-radius: 10px;
cursor: pointer;
transition: background-color 0.6s ease;
}
.clicked {
background-color: #ff0000;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<header></header>
<nav>
<div id="mainmenu">
<ul>
<li>Logo</li>
<li>Home</li>
<li id="maintopics">Topics
<div id="subtopics">
<div id="column1" class="columns">
<ul>
<li>example1</li>
<li>example2</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</nav>
<div id="slideshow">
<div id="slide1" class="slide">
<div class="slide-contain">
<span>Image One</span>
</div>
</div>
<div id="slide2" class="slide">
<div class="slide-contain">
<span>Image Two</span>
</div>
</div>
<div id="slide3" class="slide">
<div class="slide-contain">
<span>Image Three</span>
</div>
</div>
<div id="slidebullet">
<div id="bullet1" class="bullets"></div>
<div id="bullet2" class="bullets"></div>
<div id="bullet3" class="bullets"></div>
</div>
<div id="arrow-left" class="arrow"></div>
<div id="arrow-right" class="arrow"></div>
</div>
<script src="jquery.js"></script>
<script src="index.js"></script>
<script>
</script>
</body>
</html>
Then i changed position of functions
var toggleMenu = (function () {
var mainTopics = document.getElementById("maintopics");
mainTopics.addEventListener("click", function (e) {
e.preventDefault();
e.stopImmediatePropagation();
mainTopics.classList.toggle("show");
});
document.addEventListener("click", function (e) {
if (e.target.id !== 'arrow-right') {
mainTopics.classList.remove("show");
}
});
return {
toggleMenu: toggleMenu()
};
})();
var slideShow = (function () {
var slideImages = document.getElementsByClassName("slide");
var leftSide = document.getElementById("arrow-left");
var rightSide = document.getElementById("arrow-right");
var slideBullets = document.getElementsByClassName("bullets");
var current = 0;
function reset() {
for (let i = 0; i < slideImages.length; i++) {
slideImages[i].style.display = 'none';
slideBullets[i].classList.remove("clicked");
}
};
function showImages() {
for (let i = 0; i < slideImages.length; i++) {
slideImages[0].style.display = 'block';
slideBullets[current].classList.add("clicked");
}
};
function arrowSlide() {
leftSide.addEventListener("click", function () {
reset();
if (current === 0) {
current = slideImages.length;
}
slideImages[current - 1].style.display = 'block';
current--;
slideBullets[current].classList.add("clicked");
});
rightSide.addEventListener("click", function () {
reset();
if (current === slideImages.length - 1) {
current = - 1;
}
slideImages[current + 1].style.display = 'block';
current++;
slideBullets[current].classList.add("clicked");
});
};
function showBulletsImages() {
for (let i = 0; i < slideBullets.length; i++) {
slideBullets[i].addEventListener("click", function () {
reset();
slideImages[i].style.display = 'block';
slideBullets[i].classList.add("clicked");
current = i;
});
}
};
function autoSlide() {
setInterval(function () {
rightSide.click();
slideBullets[current].classList.add('clicked')
}, 2000);
};
return {
reset: reset(),
showImages: showImages(),
arrowSlide: arrowSlide(),
showBulletsImages: showBulletsImages(),
autoSlide: autoSlide()
};
})();
The issue seems to be with this
return {
toggleMenu: toggleMenu()
};
inside the toggleMenu immediately invoking function . This IIFE does not have any toggleMenu function
Beside return like
return {
reset: reset(),
showImages: showImages(),
arrowSlide: arrowSlide(),
showBulletsImages: showBulletsImages(),
autoSlide: autoSlide()
};
is not appropriate ,replace it with the following
There is no reason tha slideShow has to IIFE
return {
reset: reset,
showImages: showImages,
arrowSlide: arrowSlide,
showBulletsImages: showBulletsImages,
autoSlide: autoSlide
};
Here is a working demo at stackblitz
I have an image/video carousel and I'm having trouble keeping all the content in the carousel the same height.
When you click on the thumbnails, the main image heights don't match up.
How do I keep everything the same height, yet responsive at the same time?
(I added some pictures to show what I mean)
Here's the codepen.
Edit: I want to keep the main images shown in the carousel the same height, not the thumbnails.
$(document).ready(function() {
// get all images loaded
var images = $(".chair-class");
// thumbnails containers
var thumbnailContainer = $("#thumbnails");
var iframe1 = $('#sketchfab-iframe-1')[0];
var iframe2 = $('#sketchfab-iframe-2')[0];
var player1 = $f(iframe1);
var player2 = $f(iframe2);
// generate thumbnail images
generateThumbnails(images, thumbnailContainer);
// listeners for controls arrows
$(".prev-next-button").on("click", function() {
player1.api('pause');
player2.api('pause');
// get the images
var currentImageIndex = images.index($(".chair-class[data-active=true]"));
var isPrevious = $(this).hasClass("previous");
var nextIndex;
if (isPrevious) {
if (currentImageIndex === 0) {
nextIndex = images.length - 1;
}
if (currentImageIndex > 0) {
nextIndex = currentImageIndex - 1;
}
} else {
if (currentImageIndex === images.length - 1) {
nextIndex = 0;
}
if (currentImageIndex < images.length - 1) {
nextIndex = currentImageIndex + 1;
}
}
// remove any active class from images
images.removeClass("active").attr('data-active', "false");
// get the next active image and add active class to that next current image
var $nextImage = $(images[nextIndex]);
var iframeId = $nextImage.data('iframe');
if (iframeId) {
$(images[nextIndex]).attr('data-active', "true");
$('.sketchfab-iframe').removeClass('active');
$('#' + iframeId).addClass('active');
} else {
$(images[nextIndex]).addClass("active").attr('data-active', "true");
$('.sketchfab-iframe').removeClass('active');
}
});
$(".thumb").on("click", function(event) {
event.preventDefault();
var images = $(".chair-class");
var indexSelected = $(this).data("img-index");
var currentShown = images.index($(".chair-class[data-active=true]"));
if (currentShown === indexSelected) return false;
player1.api('pause');
player2.api('pause');
images.removeClass("active").attr('data-active', "false");
var iframeId = $(this).data('iframe');
if (iframeId) {
$(images[indexSelected]).attr('data-active', "true");
$('.sketchfab-iframe').removeClass('active');
$('#' + iframeId).addClass('active');
} else {
images.removeClass("active");
$(images[indexSelected]).addClass('active').attr('data-active', "true");;
$('.sketchfab-iframe').removeClass('active');
}
});
function generateThumbnails(images, container) {
var ul = $("<ul>");
images.each(function(index, element) {
var currentThumb = $("<img>");
var li = $("<li>");
var src = $(this).attr("src");
currentThumb.attr("src", src);
currentThumb.attr("class", "thumb");
currentThumb.data("img-index", index);
var iframe = $(this).data('iframe');
if (iframe) {
currentThumb.data("iframe", iframe);
}
li.append(currentThumb);
ul.append(li);
});
container.append(ul);
}
});
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
font-size: 100%;
}
/* #green-room {
background: #333 !important;
} */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
#chair,
.chair-class {
position: absolute;
width: 100%;
height: auto;
max-width: 600px;
max-height: 400px;
margin: 0 auto;
display: block;
top: 0;
left: 0;
opacity: 0;
transition: opacity .5s;
}
.chair-class.active {
position: relative;
opacity: 1;
}
#prev {
position: absolute;
color: black;
left: 0;
top: 0;
bottom: 0;
}
#next {
position: absolute;
color: black;
right: 0;
top: 0;
bottom: 0;
}
#prev p,
#next p {
font-size: 3em;
}
#imgDetail {
position: relative;
width: 90%;
margin: 0 auto;
overflow: hidden;
}
#imgDetail a {
text-decoration: none;
display: flex;
padding: 3%;
justify-content: center;
align-items: center;
}
#imgDetail a:hover {
background-color: #333;
color: white;
opacity: 0.5;
}
#imgDetail ul {
margin: 0 auto;
display: block;
}
#thumbnails {
max-width: 1000px;
width: 100%;
display: inline-block;
text-align: center;
}
.thumb {
width: 21%;
height: auto;
margin-top: 15px;
cursor: pointer;
}
#imgDetail li {
display: inline;
}
#thumbnails ul {
margin: 0 auto;
display: block;
}
#thumbnails li {
display: inline;
padding-right: 2%;
}
#thumbnails li:last-child {
padding-right: 0;
}
.sketchfab-iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 40vw;
}
.sketchfab-iframe {
opacity: 0;
margin: 0 auto;
transition: opacity .5s;
display: none;
}
.sketchfab-iframe.active {
opacity: 1;
position: relative;
display: block;
}
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Images not Owned by Me -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Daniel Pollack</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.2.0/jquery.fitvids.js">
</script>
</head>
<body id="green-room">
<div class="slideshow-container">
<div id="imgDetail">
<img data-iframe="sketchfab-iframe-1" src="https://i.vimeocdn.com/video/682901345_640.webp" class="chair-class" data-active="true" />
<img data-iframe="sketchfab-iframe-2" src="https://i.vimeocdn.com/video/682890362_640.webp" class="chair-class" data-active="false" />
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" class="chair-class" data-active="false" />
<div class="aspect-ratio">
<iframe id="sketchfab-iframe-1" class="sketchfab-iframe active" src="https://player.vimeo.com/video/255482396" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="aspect-ratio">
<iframe id="sketchfab-iframe-2" class="sketchfab-iframe" src="https://player.vimeo.com/video/255473875" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<!--CONTROLS-->
<a href="javascript:void(0)" id="prev" class="prev-next-button previous">
<p>❬</p>
</a>
<a href="javascript:void(0)" id="next" class="prev-next-button next">
<p>❭</p>
</a>
</div>
<!--Thumbnails-->
<div id="thumbnails">
</div>
</html>
It's fixed by setting all the image height to 70vh.
Guess something is not working with StackOverflow Fiddle.
Check my codepen and let me know if that's what you are looking for.
$(document).ready(function() {
// get all images loaded
var images = $(".chair-class");
// thumbnails containers
var thumbnailContainer = $("#thumbnails");
var iframe1 = $('#sketchfab-iframe-1')[0];
var iframe2 = $('#sketchfab-iframe-2')[0];
var player1 = $f(iframe1);
var player2 = $f(iframe2);
// generate thumbnail images
generateThumbnails(images, thumbnailContainer);
// listeners for controls arrows
$(".prev-next-button").on("click", function() {
player1.api('pause');
player2.api('pause');
// get the images
var currentImageIndex = images.index($(".chair-class[data-active=true]"));
var isPrevious = $(this).hasClass("previous");
var nextIndex;
if (isPrevious) {
if (currentImageIndex === 0) {
nextIndex = images.length - 1;
}
if (currentImageIndex > 0) {
nextIndex = currentImageIndex - 1;
}
} else {
if (currentImageIndex === images.length - 1) {
nextIndex = 0;
}
if (currentImageIndex < images.length - 1) {
nextIndex = currentImageIndex + 1;
}
}
// remove any active class from images
images.removeClass("active").attr('data-active', "false");
// get the next active image and add active class to that next current image
var $nextImage = $(images[nextIndex]);
var iframeId = $nextImage.data('iframe');
if (iframeId) {
$(images[nextIndex]).attr('data-active', "true");
$('.sketchfab-iframe').removeClass('active');
$('#' + iframeId).addClass('active');
} else {
$(images[nextIndex]).addClass("active").attr('data-active', "true");
$('.sketchfab-iframe').removeClass('active');
}
});
$(".thumb").on("click", function(event) {
event.preventDefault();
var images = $(".chair-class");
var indexSelected = $(this).data("img-index");
var currentShown = images.index($(".chair-class[data-active=true]"));
if (currentShown === indexSelected) return false;
player1.api('pause');
player2.api('pause');
images.removeClass("active").attr('data-active', "false");
var iframeId = $(this).data('iframe');
if (iframeId) {
$(images[indexSelected]).attr('data-active', "true");
$('.sketchfab-iframe').removeClass('active');
$('#' + iframeId).addClass('active');
} else {
images.removeClass("active");
$(images[indexSelected]).addClass('active').attr('data-active', "true");;
$('.sketchfab-iframe').removeClass('active');
}
});
function generateThumbnails(images, container) {
var ul = $("<ul>");
images.each(function(index, element) {
var currentThumb = $("<img>");
var li = $("<li>");
var src = $(this).attr("src");
currentThumb.attr("src", src);
currentThumb.attr("class", "thumb");
currentThumb.data("img-index", index);
var iframe = $(this).data('iframe');
if (iframe) {
currentThumb.data("iframe", iframe);
}
li.append(currentThumb);
ul.append(li);
});
container.append(ul);
}
});
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
font-size: 100%;
}
/* #green-room {
background: #333 !important;
} */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
#chair,
.chair-class {
position: absolute;
width: auto;
height: 100%;
/* max-width: 600px;
max-height: 400px; */
margin: 0 auto;
display: block;
top: 0;
left: 0;
opacity: 0;
transition: opacity .5s;
}
.chair-class.active {
position: relative;
opacity: 1;
}
#prev {
position: absolute;
color: black;
left: 0;
top: 0;
bottom: 0;
}
#next {
position: absolute;
color: black;
right: 0;
top: 0;
bottom: 0;
}
#prev p,
#next p {
font-size: 3em;
}
#imgDetail {
position: relative;
width: 90%;
margin: 0 auto;
height: 70vh;
overflow: hidden;
}
#imgDetail img {
height: 70vh;
}
#imgDetail a {
text-decoration: none;
display: flex;
padding: 3%;
justify-content: center;
align-items: center;
}
#imgDetail a:hover {
background-color: #333;
color: white;
opacity: 0.5;
}
#imgDetail ul {
margin: 0 auto;
display: block;
}
#thumbnails {
max-width: 1000px;
display: inline-block;
text-align: center;
}
.thumb {
width: 21%;
height: auto;
margin-top: 15px;
cursor: pointer;
}
#imgDetail li {
display: inline;
}
#thumbnails ul {
margin: 0 auto;
display: block;
}
#thumbnails li {
display: inline;
padding-right: 2%;
}
#thumbnails li:last-child {
padding-right: 0;
}
.sketchfab-iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* top:10vh; */
height: 70vh;
opacity: 0;
margin: 0 auto;
transition: opacity .5s;
display: none;
}
.sketchfab-iframe.active {
opacity: 1;
position: relative;
display: block;
}
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Images not Owned by Me -->
<body>
<div class="slideshow-container">
<div id="imgDetail">
<img data-iframe="sketchfab-iframe-1" src="https://i.vimeocdn.com/video/682901345_640.webp" class="chair-class" data-active="true" />
<img data-iframe="sketchfab-iframe-2" src="https://i.vimeocdn.com/video/682890362_640.webp" class="chair-class" data-active="false" />
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" class="chair-class" data-active="false" />
<div class="aspect-ratio">
<iframe id="sketchfab-iframe-1" class="sketchfab-iframe active" src="https://player.vimeo.com/video/255482396" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="aspect-ratio">
<iframe id="sketchfab-iframe-2" class="sketchfab-iframe" src="https://player.vimeo.com/video/255473875" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<!--CONTROLS-->
<a href="javascript:void(0)" id="prev" class="prev-next-button previous">
<p>❬</p>
</a>
<a href="javascript:void(0)" id="next" class="prev-next-button next">
<p>❭</p>
</a>
</div>
<!--Thumbnails-->
<div id="thumbnails">
</div>
</div>
</body>
$(document).ready(function () {
// get all images loaded
var images = $(".chair-class");
// thumbnails containers
var thumbnailContainer = $("#thumbnails");
var iframe1 = $('#sketchfab-iframe-1')[0];
var iframe2 = $('#sketchfab-iframe-2')[0];
var player1 = $f(iframe1);
var player2 = $f(iframe2);
// generate thumbnail images
generateThumbnails(images, thumbnailContainer);
// listeners for controls arrows
$(".prev-next-button").on("click", function () {
player1.api('pause');
player2.api('pause');
// get the images
var currentImageIndex = images.index($(".chair-class[data-active=true]"));
var isPrevious = $(this).hasClass("previous");
var nextIndex;
if (isPrevious) {
if (currentImageIndex === 0) {
nextIndex = images.length - 1;
}
if (currentImageIndex > 0) {
nextIndex = currentImageIndex - 1;
}
} else {
if (currentImageIndex === images.length - 1) {
nextIndex = 0;
}
if (currentImageIndex < images.length - 1) {
nextIndex = currentImageIndex + 1;
}
}
// remove any active class from images
images.removeClass("active").attr('data-active', "false");
// get the next active image and add active class to that next current image
var $nextImage = $(images[nextIndex]);
var iframeId = $nextImage.data('iframe');
if (iframeId) {
$(images[nextIndex]).attr('data-active', "true");
$('.sketchfab-iframe').removeClass('active');
$('#' + iframeId).addClass('active');
} else {
$(images[nextIndex]).addClass("active").attr('data-active', "true");
$('.sketchfab-iframe').removeClass('active');
}
});
$(".thumb").on("click", function (event) {
event.preventDefault();
var images = $(".chair-class");
var indexSelected = $(this).data("img-index");
var currentShown = images.index($(".chair-class[data-active=true]"));
if (currentShown === indexSelected) return false;
player1.api('pause');
player2.api('pause');
images.removeClass("active").attr('data-active', "false");
var iframeId = $(this).data('iframe');
if (iframeId) {
$(images[indexSelected]).attr('data-active', "true");
$('.sketchfab-iframe').removeClass('active');
$('#' + iframeId).addClass('active');
} else {
images.removeClass("active");
$(images[indexSelected]).addClass('active').attr('data-active', "true");;
$('.sketchfab-iframe').removeClass('active');
}
});
function generateThumbnails(images, container) {
var ul = $("<ul>");
images.each(function (index, element) {
var currentThumb = $("<img>");
var li = $("<li>");
var src = $(this).attr("src");
currentThumb.attr("src", src);
currentThumb.attr("class", "thumb");
currentThumb.data("img-index", index);
var iframe = $(this).data('iframe');
if (iframe) {
currentThumb.data("iframe", iframe);
}
li.append(currentThumb);
ul.append(li);
});
container.append(ul);
}
});
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
font-size: 100%;
}
/* #green-room {
background: #333 !important;
} */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
#chair, .chair-class {
position: absolute;
width: 80%;
height: auto;
max-width: 600px;
max-height: 400px;
margin: 0 auto;
display: block;
top: 0;
left: 0;
right: 0;
opacity: 0;
transition: opacity .5s;
}
.chair-class.active {
position: relative;
opacity: 1;
}
#prev {
position: absolute;
color: black;
left: 0;
top: 0;
bottom: 0;
}
#next {
position: absolute;
color: black;
right: 0;
top: 0;
bottom: 0;
}
#prev p, #next p {
font-size: 3em;
}
#imgDetail {
position: relative;
width: 90%;
margin: 0 auto;
overflow: hidden;
}
#imgDetail a {
text-decoration: none;
display: flex;
padding: 3%;
justify-content: center;
align-items: center;
}
#imgDetail a:hover {
background-color: #333;
color: white;
opacity: 0.5;
}
#imgDetail ul {
margin: 0 auto;
display: block;
}
#thumbnails {
max-width: 1000px;
width: 100%;
display: inline-block;
text-align: center;
}
.thumb {
width: 21%;
height: 120px;
margin-top: 15px;
cursor: pointer;
}
#imgDetail li {
display: inline;
}
#thumbnails ul {
margin: 0 auto;
display: block;
}
#thumbnails li {
display: inline;
padding-right: 2%;
}
#thumbnails li:last-child {
padding-right: 0;
}
.sketchfab-iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 40vw;
}
.sketchfab-iframe {
opacity: 0;
margin: 0 auto;
transition: opacity .5s;
display: none;
}
.sketchfab-iframe.active {
opacity: 1;
position: relative;
display: block;
}
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Images not Owned by Me -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Daniel Pollack</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.2.0/jquery.fitvids.js">
</script>
</head>
<body id="green-room">
<div class="slideshow-container">
<div id="imgDetail">
<img data-iframe="sketchfab-iframe-1" src="https://i.vimeocdn.com/video/682901345_640.webp" class="chair-class" data-active="true" />
<img data-iframe="sketchfab-iframe-2" src="https://i.vimeocdn.com/video/682890362_640.webp" class="chair-class" data-active="false" />
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" class="chair-class" data-active="false" />
<div class="aspect-ratio">
<iframe id="sketchfab-iframe-1" class="sketchfab-iframe active" src="https://player.vimeo.com/video/255482396" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="aspect-ratio">
<iframe id="sketchfab-iframe-2" class="sketchfab-iframe" src="https://player.vimeo.com/video/255473875" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<!--CONTROLS-->
<a href="javascript:void(0)" id="prev" class="prev-next-button previous">
<p>❬</p>
</a>
<a href="javascript:void(0)" id="next" class="prev-next-button next">
<p>❭</p>
</a>
</div>
<!--Thumbnails-->
<div id="thumbnails">
</div>
</html>
I have a simple image slider, with pagination controls.
I have coded it to add and remove an "active" class on the pagination
buttons on click. I would also like them to have the active class when the corresponding slide is showing.
How can I modify my code to achieve this?
<div id="slideshow">
<ul id="slides">
<li class="slide showing">
<div class="slide-description">
<h1 class="slide-title">All-in-one EV charging solution.</h1>
<p> Easy to use. Connected with smart charging capabilities. Our charging stations can be used at home,
work or in public.</p>
</div>
</li>
<li class="slide">
<div class="slide-description">
<h1 class="slide-title">Charging at work- a case study.</h1>
<p>In this new series of charging case studies, we dive into into the reasons why EV-Box partners are taking the green route.</p>
</div>
</li>
<li class="slide"> <div class="slide-description">
<h1 class="slide-title">Finding the best solution for your charging routine.</h1>
<p>
This whitepaper highlights the key answers that will guide you to acharging solution that best serves your needs.
</p>
</div>
</li>
</ul>
<button class="controls" id="previous"></button>
<button class="controls" id="next"></button>
<div id="pagination"></div>
var slides = document.querySelectorAll('#slides .slide'); // get all the slides
var currentSlide = 0;
var slideInterval = setInterval(nextSlide, 6000);
function nextSlide() {
goToSlide(currentSlide + 1);
}
function previousSlide() {
goToSlide(currentSlide - 1);
}
function goToSlide(n) {
slides[currentSlide].className = 'slide';
currentSlide = (n + slides.length) % slides.length;
slides[currentSlide].className = 'slide showing';
}
//Previous and Next controls
var next = document.getElementById('next');
var previous = document.getElementById('previous');
next.onclick = function() {
nextSlide();
};
previous.onclick = function() {
previousSlide();
};
//Pagination controls
var p = document.getElementById('pagination');
var phtml = '';
for(var i = 0; i < slides.length; i++) {
phtml += '<button></button>'; // create the pagination buttons for each slide
}
p.innerHTML = phtml; //insert the html for the buttons
var pbuttons = p.querySelectorAll('button'); // grab all the buttons
var activeButton = null; // reference to active button
for(var i = 0; i < pbuttons.length; i++) {
pbuttons[i].onclick = (function(n) {
return function() {
if(activeButton)
activeButton.classList.remove('active'); // delete class from old active button
activeButton = this;// change ref, this is current button
activeButton.classList.add('active');// add class for new
goToSlide(n);
};
})(i);
}
#slider {
min-height: 400px;
position: relative;
#slides {
min-height: 400px;
padding: 0;
margin: 0;
list-style-type: none;
.slide {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
min-height: 400px;
box-sizing: border-box;
background: $black;
color: $white;
display: flex;
align-items: center;
-webkit-justify-content: flex-end;
justify-content: flex-end;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
transition: opacity 1s;
&.showing {
opacity: 1;
z-index: 2;
}
&:nth-of-type(1) {
#include backImage('../images/evbox1.jpg');
}
&:nth-of-type(2){
#include backImage('../images/evbox2.jpg');
}
&:nth-of-type(3) {
#include backImage('../images/evbox3.jpg');
}
}
.slide-description {
width: 500px;
.slide-title {
width: 90%;
font-family: 'Open Sans', sans-serif;
font-size: 44px;
text-shadow: 0 2px 3px rgba($black, .2);
line-height: 1.1em;
margin-bottom: 10px;
}
p {
margin-bottom: 15px;
width: 90%;
font-size: 20px;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
text-shadow: 0 2px 3px rgba($black, .2);
}
.btn {
#include button($blue, $font-color, $shadow-color);
}
}
#include respond-to($mobile) {
#media only screen and (max-width: $mobile) {
.slide:nth-of-type(3) {
background-position: left 0;
}
.slide-description {
height: 100%;
width: 100%;
padding: 8em 5em;
position: static;
text-align: center;
.slide-title {
font-size: 30px;
width: 100%;
}
.btn {
padding: 8px 16px;
}
}
p {
display: none;
}
}
}
}
}
/*Previous and Next Controls*/
.controls {
position: absolute;
top: 42%;
z-index: 10;
background: url('http://www.ev-box.com/Evbox-EN/includes/themes/evbox/assets/images/sprites#2x.png') no-repeat;
height: 50px;
width: 30px;
background-size: 369px 240px;
outline: 0;
border: 0;
cursor: pointer;
}
#previous {
right: 10px;
background-position: -50px -121px;
}
#next {
left: 10px;
background-position: -16px -121px;
}
// Pagination
#pagination {
position: absolute;
bottom: 30px;
right: 50%;
z-index: 10;
button {
border-radius: 50%;
border: 1px solid $white;
background-color: $white;
opacity: .8;
width: 14px;
height: 14px;
min-height: 14px;
border-width: 0;
margin-right: 5px;
&.active {
width: 15px;
height: 15px;
min-height: 15px;
border: 1px solid $white;
background-color: $primary;
opacity: 1;
&:focus {
outline: 0;
}
}
}
}
I updated the javascript as shown below. Use this in your code pen. you can see the diffrence. If you click next and previous button the corresponding pagination will be highlighted by using this javascript
document.addEventListener("DOMContentLoaded", function() {
var slides = document.querySelectorAll('#slides .slide'); // get all the slides
const totalSlides = 2 // Total number of slides count
var currentSlide = 0; // current slide
var previousSlide = totalSlides;
// var slideInterval = setInterval(nextSlide, 1000);
function nextSlide() {
previousSlide = currentSlide
if(totalSlides > currentSlide){
currentSlide += 1
}
else currentSlide = 0
goToSlide();
}
function PreviousSlide() {
if(currentSlide == 0){
previousSlide = currentSlide
currentSlide = totalSlides
}
else{
previousSlide = currentSlide
currentSlide -=1
}
goToSlide();
}
function goToSlide() {
slides[previousSlide].className = 'slide';
slides[currentSlide].className = 'slide showing';
var currentSlideButton = "button"+currentSlide
var previousSlideButton = "button"+previousSlide
document.getElementById(currentSlideButton).classList.add('active');
document.getElementById(previousSlideButton).classList.remove('active');
}
//Previous and Next controls
var next = document.getElementById('next');
var previous = document.getElementById('previous');
next.onclick = function() {
PreviousSlide();
};
previous.onclick = function() {
nextSlide();
};
//Pagination controls
var p = document.getElementById('pagination');
var phtml = '';
for(var i = 0; i < slides.length; i++) {
phtml += '<button id=button'+i+'></button>'; // create the pagination buttons for each slide
}
p.innerHTML = phtml; //insert the html for the buttons
var pbuttons = p.querySelectorAll('button'); // grab all the buttons
var activeButton = null; // reference to active button
for(var i = 0; i < pbuttons.length; i++) {
pbuttons[i].onclick = (function(n) {
return function() {
if(activeButton)
activeButton.classList.remove('active'); // delete class from old active button
activeButton = this;// change ref, this is current button
activeButton.classList.add('active');// add class for new
goToSlide(n);
};
})(i);
}
goToSlide();// Initialising goToSlide method
});
I want to fade in div by clicking menu buttons.
I implemented it anyway but when I switch the views very quickly, it sometimes flashes and the behavior is kind of rough or jumpy..or I don't know how to say..it's not smooth anyways.
https://jsfiddle.net/eLbze55d/12/
Any advice would be appreciated.
var m_menu = document.getElementById('m_menu');
var menu = document.getElementById('menu');
var m_staff = document.getElementById('m_staff');
var staff = document.getElementById('staff');
var m_access = document.getElementById('m_access');
var access = document.getElementById('access');
m_menu.addEventListener('click', function() {
menu.style.zIndex = 1;
staff.style.zIndex = 0;
access.style.zIndex = 0;
menu.style.webkitAnimationName = 'fadein';
menu.style.webkitAnimationDuration = "1000ms";
});
menu.addEventListener('webkitAnimationEnd', function() {
menu.style.opacity = 1;
staff.style.opacity = 0;
access.style.opacity = 0;
menu.style.webkitAnimationName = '';
});
m_staff.addEventListener('click', function() {
staff.style.zIndex = 1;
menu.style.zIndex = 0;
access.style.zIndex = 0;
staff.style.webkitAnimationName = 'fadein';
staff.style.webkitAnimationDuration = "1000ms";
});
staff.addEventListener('webkitAnimationEnd', function() {
staff.style.opacity = 1;
menu.style.opacity = 0;
access.style.opacity = 0;
staff.style.webkitAnimationName = '';
});
m_access.addEventListener('click', function() {
access.style.zIndex = 1;
menu.style.zIndex = 0;
staff.style.zIndex = 0;
access.style.webkitAnimationName = 'fadein';
access.style.webkitAnimationDuration = "1000ms";
});
access.addEventListener('webkitAnimationEnd', function() {
access.style.opacity = 1;
menu.style.opacity = 0;
staff.style.opacity = 0;
access.style.webkitAnimationName = '';
});
#-webkit-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
html,body { height:100%; }
#main {
height:100%;
color: white;
}
.content{
font-size: 50pt;
}
#menu {
z-index: 1;
opacity: 1;
position: absolute;
top: 0;
left: 0;
background-image: url(https://snap-photos.s3.amazonaws.com/img-thumbs/960w/7B62IKGVF4.jpg);
height: 100%;
width: 100%;
}
#staff {
z-index: 0;
opacity: 0;
position: absolute;
top: 0;
left: 0;
background-image: url(https://snap-photos.s3.amazonaws.com/img-thumbs/960w/FRHYAEUPIN.jpg);
height: 100%;
width: 100%;
}
#access{
z-index: 0;
position: absolute;
top: 0;
left: 0;
background-image: url(https://snap-photos.s3.amazonaws.com/img-thumbs/960w/MGWWJDK49D.jpg);
height: 100%;
width: 100%;
}
#site_menu {
z-index: 2;
position: absolute;
bottom: 2%;
left: 3.5%;
font-size: 20pt;
display: flex;
justify-content: start;
}
#site_menu > div {
cursor: pointer;
margin: 20px;
display: flex;
align-items: center;
justify-content: start;
}
<div id="main">
<div id="menu" class="content">THIS IS MENU</div>
<div id="staff" class="content">THIS IS STAFF</div>
<div id="access" class="content">THIS IS ACCESS</div>
<div id="site_menu">
<div id="m_menu" class="menuelem">Menu</div>
<div id="m_staff" class="menuelem">Staff</div>
<div id="m_access" class="menuelem">Access</div>
</div>
</div>