Multiple Slideshows for all Records on one page

2 posts by 2 authors in: Forums > CMS Builder
Last Post: July 28, 2021   (RSS)

By daniel - July 28, 2021

Hi Koen,

I think I see how this can be accomplished.

In your main loop you'll want to create a counter variable that increments each time you display a new slideshow, and use that value to update each class. Something like this:

<?php $count = 0; ?>
<?php foreach ($ra_vw_onderdelenRecords as $record): ?>
  <?php $count++; ?>

  <?php echo htmlencode($record['title']) ?>
  <?php echo htmlencode($record['content']) ?>

  <?php foreach ($record['foto_s'] as $index => $upload): ?>

    <img class="mySlides<?php echo $count; ?>" src="<?php echo $upload['urlPath'] ?>" style="width:100%">
    <img class="mySlides<?php echo $count; ?>" src="<?php echo $upload['urlPath'] ?>" style="width:100%">
    <img class="mySlides<?php echo $count; ?>" src="<?php echo $upload['urlPath'] ?>" style="width:100%">

  <?php endforeach ?>
<?php endforeach ?>

Then within the script, we can use the end result of that counter variable to produce the necessary changes:

<script>
var slideIndex = [<?php
  for ($x = 1; $x <= $count; $x++) {
    if ($x != 1) { echo ', '; }
    echo 1;
  }
?>];
var slideId = [<?php
  for ($x = 1; $x <= $count; $x++) {
    if ($x != 1) { echo ', '; }
    echo '"mySlides' . $x . '"';
  }
?>];
showDivs(1, 0);
showDivs(1, 1);
showDivs(1, 2);
	
function plusDivs(n, no) {
  showDivs(slideIndex[no] += n, no);
}

function showDivs(n, no) {
  var i;
  var x = document.getElementsByClassName(slideId[no]);
  if (n > x.length) {slideIndex[no] = 1}
  if (n < 1) {slideIndex[no] = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  x[slideIndex[no]-1].style.display = "block";  
}
</script>

The one thing I wasn't sure is if the "showDivs()" functions also needed to be modified with each new slideshow, so I did not change it.

Let me know if that helps get your slideshows working, or if you have any other questions!

Thanks,

Daniel
Technical Lead
interactivetools.com