Any ways to have many different slideshows on a page without a bunch of copied renamed functions for each?

Question

Hey I have a page with a bunch of modal images and when any one of them is clicked it would open the appropriate slideshow of images. But the modal uses js for the slideshow so is there any way to edit my function so every image opens a different slideshow album, without just copying the same function over and over and changing variable names, because that seems like a bad way to do it.

I have a JSfiddle to show what it looks like with 1 image,as well as all my code.

https://jsfiddle.net/nhk3o0m1/26/

HTML:

<h2 style="text-align:center">Modal Albums</h2>

  <div class="row">

      <img src="https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpg" style="max-width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">

  </div>

  <div id="myModal" class="modal">
    <span class="close cursor" onclick="closeModal()">&times;</span>
    <div class="modal-content">

      <div class="mySlides">
        <div class="numbertext">1 / 4</div>
        <img src="http://chasingseals.com/wp-content/uploads/2014/02/greenlandBanner2000x800.jpg" class="img">
      </div>

      <div class="mySlides">
        <div class="numbertext">2 / 4</div>
        <img src="http://www.catholicevangelism.org/wp-content/uploads/2013/06/1200x800.gif" class="img">
      </div>

      <div class="mySlides">
        <div class="numbertext">3 / 4</div>
        <img src="http://www.a1carpet-to.com/wp-content/uploads/2015/08/600x400.png" class="img">
      </div>

      <div class="mySlides">
        <div class="numbertext">4 / 4</div>
        <img src="https://support.kickofflabs.com/wp-content/uploads/2016/06/800x1200.png" class="img">
      </div>

      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>
  </div>

CSS:

   body {
   font-family: Verdana, sans-serif;
   margin: 0;
 }

 * {
   box-sizing: border-box;
 }
 .img {
   max-width:100%;
   max-height: 100%;
   width: auto;
   heigth: auto;
   object-fit: scale-down;
 }
 .row > .column {
   padding: 0 8px;
 }

 .row:after {
   content: "";
   display: table;
   clear: both;
 }

 .column {
   float: left;
   width: 25%;
 }
 /* The Modal (background) */

 .modal {
   display: none;
   position: fixed;
   z-index: 1;
   padding-top: 100px;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
   background: rgba(0, 0, 0, 0.9);
 }
 /* Modal Content */

 .modal-content {
   position: relative;
   background-color: rgba(0, 0, 0, 0.9);
   margin: auto;
   padding: 0;
   width: 90%;
   max-width: 1200px;
 }
 /* The Close Button */

 .close {
   color: white;
   position: absolute;
   top: 10px;
   right: 25px;
   font-size: 35px;
   font-weight: bold;
 }

 .close:hover,
 .close:focus {
   color: #999;
   text-decoration: none;
   cursor: pointer;
 }

 .mySlides {
   display: none;
 }

 .cursor {
   cursor: pointer
 }
 /* Next & previous buttons */

 .prev,
 .next {
   cursor: pointer;
   position: absolute;
   top: 50%;
   width: auto;
   padding: 16px;
   margin-top: -50px;
   color: white;
   font-weight: bold;
   font-size: 20px;
   transition: 0.6s ease;
   border-radius: 0 3px 3px 0;
   user-select: none;
   -webkit-user-select: none;
 }
 /* Position the "next button" to the right */

 .next {
   right: 0;
   border-radius: 3px 0 0 3px;
 }
 /* On hover, add a black background color with a little bit see-through */

 .prev:hover,
 .next:hover {
   background-color: rgba(0, 0, 0, 0.8);
   text-decoration: none;
 }
 /* Number text (1/3 etc) */

 .numbertext {
   color: #f2f2f2;
   font-size: 12px;
   padding: 8px 12px;
   position: absolute;
   top: 0;
 }

 img {
   margin-bottom: -4px;
 }

 t img.hover-shadow {
   transition: all .2s ease-in-out;
 }

 .hover-shadow:hover {
  -webkit-transition: all .2s ease-in;
  -webkit-transform: scale(1.1);
  -ms-transition: all .2s ease-in;
  -ms-transform:scale(1.1);
  -moz-transition:all .2s ease-in;
  -moz-transform: scale(1.1);
  transition: all .2s ease-in;
  transform: scale(1.1);
}
 .hover-shadow{
   -webkit-transition: all .2s ease-in;
  -webkit-transform: scale(1);
  -ms-transition: all .2s ease-in;
  -ms-transform:scale(1);
  -moz-transition:all .2s ease-in;
  -moz-transform: scale(1);
  transition: all .2s ease-in;
  transform: scale(1);
 }

 .modal-content {
   -webkit-animation-name: zoom;
   -webkit-animation-duration: 0.6s;
   animation-name: zoom;
   animation-duration: 0.6s;
 }

 @-webkit-keyframes zoom {
   from {
     -webkit-transform: scale(0)
   }
   to {
     -webkit-transform: scale(1)
   }
 }

 @keyframes zoom {
   from {
     transform: scale(0)
   }
   to {
     transform: scale(1)
   }
 }


.mySlides img {
   height:100%;
   margin:0 auto;
   margin-bottom:50px;
}

.mySlides {
    text-align:center;
    height:80vh;
}

JS:

 function openModal() {
      document.getElementById('myModal').style.display = "block";
    }

    function closeModal() {
      document.getElementById('myModal').style.display = "none";
    }

    var slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
      showSlides(slideIndex += n);
    }

    function currentSlide(n) {
      showSlides(slideIndex = n);
    }

    function showSlides(n) {
      var i;
      var slides = document.getElementsByClassName("mySlides");
      var dots = document.getElementsByClassName("demo");
      var captionText = document.getElementById("caption");
      if (n > slides.length) {slideIndex = 1}
        if (n < 1) {slideIndex = slides.length}
          for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
          }
          for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
          }
          slides[slideIndex-1].style.display = "block";
          dots[slideIndex-1].className += " active";
          captionText.innerHTML = dots[slideIndex-1].alt;
        }

GoofBall101 · Answer 1 · 2017-11-05T23:50:20.333

0

I would handle it like this

Ids for all the myslides.
Input the images addresses while calling a function in the HTML mySlides div and the ID's of the slide
`myFunc(http://image, mySlidesID);
then make the <image> tags SRC="image I Called"

Sorry if I explained it a little awkwardly.

function aFunction(imageURL1,imageURL2,imageURL3,imageURL4, imageID1,imageID2,imageID3, imageID4 ) {

  getElementByID(imageID1) 
  make the src of the image src = imageURL1

}

for more help with JavaScript, I would use W3Schools https://www.w3schools.com/js/default.asp

edited Nov 05 '17 at 23:50

answered Nov 05 '17 at 23:25

GoofBall101

308
3
15

I dont entirely understand you explanation sorry, im new to js. Could you perhaps show me? – BrownBoii333 Nov 05 '17 at 23:41
Okay I see what you mean thank you, but this isn't really scalable right? cuz i'd need to store all the src's and all the id's within the function, so if I needed to add more albums or add more images to an existing album It'd be a hastle and inefficient you know? Thanks a lot for your idea, I really appreciate it but is there any more efficient way? If I am understanding this correctly, pardon me if not – BrownBoii333 Nov 06 '17 at 04:02

Any ways to have many different slideshows on a page without a bunch of copied renamed functions for each?

1 Answers1

Linked