jazzninja jazzninja - 5 months ago 9
jQuery Question

Revisiting jQuery fader function issues

creating/modifying this function, but the loop stops at the second image (of 5 total images). need help in preventing the z-index from resetting, so it will cycle through all 5 of my images instead of only the first two.

jQuery:

function cycleImages(){
var $active = $('.image img');
var $next = ($active.next().length > 0) ? $active.next() : $('.image img:first');
$next.css('z-index',2);//move the next image up the pile
$active.fadeOut(1500, function(){//fade out the top image
$active.css('z-index',1).fadeIn().removeClass('image');//reset the z-index and unhide the image
$next.css('z-index',5).addClass('image');//make the next image the top one
});
}

$(document).ready(function(){
$(".about-button, .home-button, .contact-button, .sourcing-button, .consulting-button, .installation-button").on("click", function(){
if($(this).hasClass("about-button")) {
$(".about-container").addClass("display-flex");
} else {
$(".about-container").removeClass("display-flex");
}

if($(this).hasClass("home-button")) {
$(".homepage-container").show();
} else {
$(".homepage-container").hide();
}

if($(this).hasClass("contact-button")) {
$(".contact-container").addClass("display-flex");
} else {
$(".contact-container").removeClass("display-flex");
}

if($(this).hasClass("sourcing-button")) {
$(".services-sourcing-container").addClass("display-flex");
} else {
$(".services-sourcing-container").removeClass("display-flex");
}

if($(this).hasClass("consulting-button")) {
$(".services-consulting-container").addClass("display-flex");
} else {
$(".services-consulting-container").removeClass("display-flex");
}

if($(this).hasClass("installation-button")) {
$(".services-installation-container").addClass("display-flex");
} else {
$(".services-installation-container").removeClass("display-flex");
}
});

// run every 5s
setInterval('cycleImages()', 5000);


});

html:

<div class="fader">
<div class="image">
<img class="" src="images/JAJ_photo1.svg" alt="" style="height: 100%; width:auto; object-fit: contain"; z-index="1">
</div>
<div class="">
<img class="" src="images/JAJ_photo2.svg" alt="" style="height: 100%; width:auto; object-fit: contain"; z-index="2">
</div>
<div class="">
<img class="" src="images/JAJ_photo3.svg" alt="" style="height: 100%; width:auto; object-fit: contain"; z-index="3">
</div>
<div class="">
<img class="" src="images/JAJ_photo4.svg" alt="" style="height: 100%; width:auto; object-fit: contain"; z-index="4">
</div>
<div class="">
<img class="" src="images/JAJ_photo5.svg" alt="" style="height: 100%; width:auto; object-fit: contain"; z-index="5">
</div>
</div>


CSS:

.fader {
border-radius: 1em;
height: 25vw;
width: 74vw;
max-height:100%;
min-height: 10vw;
margin: 0 auto;
border-left: 1.5em solid #aa917d;
border-right: 1.5em solid #aa917d;
position: relative;
overflow: hidden;
}

.fader div.image img {
display: block;
width: 100%;
margin: 0 auto;
z-index: 1;
position: absolute;
}

div.image img {
z-index: 5;
}

Answer

I've modified your code and made some changes which are as below. Added the changes in comments within code. Few major things you just do not need in fact. Add image class to all the parent-div and each time you just need to fadeIn/fadeOut only particular div. Add an active class to first div.image by default. You can avoid all the z-index things with this.

Extra CSS

<!--Add below CSS just to show `div` which has active class-->

div.image:not(.active){
      display:none;  
}

function cycleImages() {
  var $active = $('.image.active'); //get the active tab
  var $next = $active.next().length > 0 ? $active.next() : $('.image:first'); 
  //check next length if not present just get the first .image div
  //fade out the top image and remove active class from it in callback
  $active.animate({ 
    opacity:'0'
  },400,function(){
    $active.removeClass('active')
    $next.animate({ 
      opacity:'1'
    },400,function(){ 
      $next.addClass('active');
    }) 
  });
}

// run every 5s
setInterval(cycleImages, 5000);
.fader {
  border-radius: 1em;
  height: 25vw;
  width: 74vw;
  max-height: 100%;
  min-height: 10vw;
  margin: 0 auto;
  border-left: 1.5em solid #aa917d;
  border-right: 1.5em solid #aa917d;
  position: relative;
  overflow: hidden;
}
.fader div.image img {
  display: block;
  width: 100%;
  margin: 0 auto;
  z-index: 1;
  position: absolute;
}
div.image img {
  z-index: 5;
}

div.image{
  opacity:0;
  transition:all 1s ease-in;
}

div.image.active{
  opacity:1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fader">
  <div class="image active">
    <img class="" src="https://images.contentful.com/256tjdsmm689/2T0QeKcvR6MSsckuKoYIwS/b57d12107fc5eb635e294ed1c76cbbac/feature-gettyimages.jpg" alt="" style="height: 100%; width:auto; object-fit: contain" ; z-index="1">
  </div>
  <div class="image">
    <img class="" src="http://www.livemint.com/rf/Image-621x414/LiveMint/Period2/2016/04/09/Photos/DNAnocredit-kuAC--621x414@LiveMint.jpg" alt="" style="height: 100%; width:auto; object-fit: contain" ; z-index="2">
  </div>
  <div class="image">
    <img class="" src="http://i.dailymail.co.uk/i/pix/2016/03/22/13/32738CEB00000578-3504412-image-a-4_1458654503277.jpg" alt="" style="height: 100%; width:auto; object-fit: contain" ; z-index="3">
  </div>
  <div class="image">
    <img class="" src="http://static.bigstockphoto.com/images/homepage/2016_bigstock_video.jpg" alt="" style="height: 100%; width:auto; object-fit: contain" ; z-index="4">
  </div>
  <div class="image">
    <img class="" src="http://media.tinmoitruong.vn/public/media/media/picture/03/kh4.jpg" alt="" style="height: 100%; width:auto; object-fit: contain" ; z-index="5">
  </div>
</div>

Comments