I've written a code when user click on any div modal open and inside the modal all the div grouped together and work as a slider. But I want to give the highest z-index on the div which is clicked by the user and then carry the next and previous button functionality according to the highest z-index div.
Currently, when we are clicking on div the modal appears and set the highest z-index on the last slide and then the next and previous button work accordingly.
Below is the code:-
$(function() {
$('.gallery-wrapper').each(function() {
var $this = $(this),
galleryPopup = $this.find('.gallery-popup'),
prevBtn = $this.find('.prev-btn'),
nextBtn = $this.find('.next-btn'),
posts = $this.find('.post'),
current = 0
// -------- Opening popup by clicking on any item-link
// --------------------------------------------
$this.find('.item-link').on('click', function(event) {
event.preventDefault();
galleryPopup.fadeIn();
$('body, html').css('overflow', 'hidden');
});
// -------- Closing popup by clicking on close-link
// --------------------------------------------
$this.find('.close-link').on('click', function(event) {
event.preventDefault();
galleryPopup.fadeOut();
$('body, html').css('overflow', 'initial');
});
// -------- Popup slider script
// --------------------------------------------
var galleryWrapper = document.querySelector('.gallery-wrapper');
var controls = galleryWrapper.querySelector('.button-holder');
var els = galleryWrapper.querySelectorAll('.post');
var order = Object.keys(els);
var cn;
var highestElm;
function setZIndex() {
for (var i in order) els[order[i]].style.zIndex = i;
}
function findHighestZIndex(elem) {
var highest = 0;
var highestElement = null;
var elems = document.getElementsByClassName(elem);
for (var i = 0; i < elems.length; i++) {
var style = document.defaultView.getComputedStyle(elems[i], null);
var zindex = style.getPropertyValue("z-index");
if ((zindex != 'auto') && (+zindex > highest)) {
highest = zindex;
highestElement = elems[i];
}
}
return highestElement;
}
// assign a click handler to the parent
controls.onclick = function(e) {
var elem = findHighestZIndex('post');
var nodes = Array.prototype.slice.call(document.querySelector('.collection').children);
highestElm = Number(nodes.indexOf(elem));
if (!(cn = (e.target.className.match(/prev-btn|next-btn/) || [false])[0])) return;
if (cn === "prev-btn") {
if (highestElm == 0) {
var lastChildElem = galleryWrapper.querySelector('.collection').lastElementChild;
lastChildElem.classList.add('animate-out');
setTimeout(function() {
lastChildElem.classList.remove('animate-out');
}, 300);
} else {
els[highestElm - 1].classList.add('animate-out');
setTimeout(function() {
els[highestElm - 1].classList.remove('animate-out');
}, 300);
}
order.unshift(order.pop());
setTimeout(function() {
setZIndex();
}, 400);
}
if (cn === "next-btn") {
els[highestElm].classList.add('animate');
setTimeout(function() {
els[highestElm].classList.remove('animate');
setZIndex();
}, 300);
order.push(order.shift());
setZIndex();
}
}
setZIndex();
});
});* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow-x: hidden !important;
}
.gallery-popup {
display: none;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
width: 100%;
height: 100%;
}
.collection {
max-width: 300px;
margin: 0 auto;
perspective: 1500px;
position: absolute;
left: 50%;
top: 120px;
transform: translateX(-50%);
width: 100%;
}
.post {
position: absolute;
left: 0;
top: 0;
width: 300px;
height: 400px;
background: orangered;
border: 5px solid #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
transform-style: preserve-3d;
transition: transform 0.25s cubic-bezier(0.57, 0.09, 0.105, 1.005);
}
.post img {
width: 100%;
height: 100%;
object-fit: cover;
}
.animate {
transform: translate3d(350px, 25px, -400px);
z-index: 999 !important;
}
.animate-out {
transform: translate3d(380px, 85px, -590px);
z-index: -1 !important;
/* keygrame if needed */
}
.button-holder {
position: absolute;
bottom: 50px;
width: 100%;
text-align: center;
}
.button-holder button {
margin: 5px;
width: 70px;
height: 30px;
border-radius: 0;
border: none;
background: orangered;
color: #fff;
}
.close-link {
color: #fff;
position: absolute;
right: 15px;
top: 15px;
width: 35px;
height: 35px;
border-radius: 50%;
line-height: 34px;
text-align: center;
text-decoration: none;
font-size: 18px;
font-family: 'Arial';
background: orangered;
}
.gallery-row {
display: flex;
flex-wrap: wrap;
padding: 15px;
margin-left: -10px;
margin-right: -10px;
}
.gallery-row .item {
padding: 10px;
flex: 0 0 25%;
max-width: 25%;
height: 250px;
background: orangered;
border: 2px solid #fff;
position: relative;
}
.gallery-row .item a {
display: flex;
position: absolute;
height: 100%;
top: 0;
width: 100%;
left: 0;
font-size: 24px;
color: #fff;
text-decoration: none;
align-items: center;
justify-content: center;
}
.gallery-row .item img {
width: 100%;
height: 100%;
object-fit: cover;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gallery-wrapper">
<div class="gallery-row">
<div class="item">
<a href="#" class="item-link">
<span>1</span>
</a>
</div>
<div class="item">
<a href="#" class="item-link">
<span>2</span>
</a>
</div>
<div class="item">
<a href="#" class="item-link">
<span>3</span>
</a>
</div>
<div class="item">
<a href="#" class="item-link">
<span>4</span>
</a>
</div>
<div class="item">
<a href="#" class="item-link">
<span>5</span>
</a>
</div>
</div>
<!-- Gallery Popup -->
<div class="gallery-popup">
<a href="javascript:void(0)" class="close-link">x</a>
<div class="collection">
<div class="post">
<span>1</span>
</div>
<div class="post">
<span>2</span>
</div>
<div class="post">
<span>3</span>
</div>
<div class="post">
<span>4</span>
</div>
<div class="post">
<span>5</span>
</div>
</div>
<div class="button-holder">
<div>
<button class="prev-btn">Previous</button>
</div>
<div>
<button class="next-btn">Next</button>
</div>
</div>
</div>
<!-- End of Gallery Popup -->
</div>