CODEWITHSUNDEEP
javascript
HamiD
HamiD

Reputation: 1090

use Slide Function on multiple galleries on the same page

I have multiple Galleries on a page with same classes. I added a Slider JavaScript function to it. It works, but if I close the light box (current Slider) and open another one, it starts from previous slide-Index, sliders change faster and there is a console error: Uncaught TypeError: document.querySelector(...) is null This is the reduced JS Code:

var slideNum = 0;
var slides;

function showSlides() {
    var i;
    slides = document.querySelector("#Images").childNodes;
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    }
    slideNum++;
    if (slideNum> slides.length) {slideNum = 1}  
    slides[slideNum-1].style.display = "block";
    setTimeout(showSlides, 3000); 
}

Is there a way to stop the function and start it onclick on another gallery?

Upvotes: 0

Views: 71

Answers (1)

Professor Abronsius
Professor Abronsius

Reputation: 33813

Perhaps the following might help. It uses a self-executing anonymous function called from within the main function to return the current slideNum variable... which persists when a new gallery is loaded. This, I appreciate, is probably not very similar to your gallery setup but no doubt can be adapted.

var pause=10;
var slideNum = 0;
var slides;
var tx=NaN;

const clearslides=function( id ){
  document.querySelectorAll('.ss > img').forEach( img=>{
    img.style.display='none';
  })
  slides=document.querySelectorAll('#'+id+' > img');
  return slides;
}

const showSlides=function( id ){
  slideNum--;   // so that when next slideshow is invoked the index does not increment up

  console.clear();
  console.info( 'New Slideshow:%s, Index:%d', id, slideNum );

  if( !isNaN( tx ) )clearTimeout( tx );
  slides=clearslides( id );

  slideNum=function(){
    if( slideNum < 0 || slideNum >= slides.length )slideNum=0;
    clearslides( id );
    slides[ slideNum ].style.display='block';

    console.info( 'Gallery:%s, Index:%d - Title:%s', id, slideNum, slides[ slideNum ].title );

    tx=setTimeout( arguments.callee, 1000 * pause );

    slideNum++;
    return slideNum;
  }();
};
div.ss{margin:1rem auto;}
div > img{display:none}
img{width:300px;height:200px}
a{text-decoration:none;font-family:monospace;}
a:hover{text-decoration:underline;color:red}
a:after{content:'|';margin:0 1rem;}
a:last-of-type:after{content:none}
<a href='#' onclick=showSlides('images-1')>Gallery-1</a>
<a href='#' onclick=showSlides('images-2')>Gallery-2</a>
<a href='#' onclick=showSlides('images-3')>Gallery-3</a>        

<div class='ss' id='images-1'>
  <img src='//picsum.photos/300/200?random=1' title='gallery:1 slide:0' />
  <img src='//picsum.photos/300/200?random=2' title='gallery:1 slide:1' />
  <img src='//picsum.photos/300/200?random=3' title='gallery:1 slide:2' />
</div>

<div class='ss' id='images-2'>
  <img src='//picsum.photos/300/200?random=4' title='gallery:2 slide:0'  />
  <img src='//picsum.photos/300/200?random=5' title='gallery:2 slide:1'  />
  <img src='//picsum.photos/300/200?random=6' title='gallery:2 slide:2'  />
</div>

<div class='ss' id='images-3'>
  <img src='//picsum.photos/300/200?random=7' title='gallery:3 slide:0'  />
  <img src='//picsum.photos/300/200?random=8' title='gallery:3 slide:1'  />
  <img src='//picsum.photos/300/200?random=9' title='gallery:3 slide:2'  />
</div>

Upvotes: 1

Related Questions