14 Replies Latest reply on Feb 13, 2018 12:59 PM by osgood_

    Slideshow LIGHTBOX

    teodoro8590

      Good morning, I would like to put the slideshow with the photos and the first part works well. But I would also like to put 3 more parts and it does not work well for slides. Do I have to change the JAVASCRIPT? However I put here HTML code and JAVASCRIPT ok?

                    

                    

                    

      ROOM INTERIOR SANS HUBLOT 4 PERSONNES 375€/PERSONNE

       

         
         
         
      X
           
        
        

       

                
        
          Suite 1  
        
          Suite 2  
        
          Suite 3  

                    

                    

      ROOM EXTERIOR AVEC HUBLOT 4 PERSONNES 405€/PERSONNE

       

         
         
         
      X
           
        
        

       

                
        
          Suite 1  
        
          Suite 2  
        
          Suite 3  

                    

                    

      ROOM INTERIOR SANS HUBLOT 4 PERSONNES 375€/PERSONNE

       

         
         
         
      X
           
        
        

       

                
        
          Suite 1  
        
          Suite 2  
        
          Suite 3  

                    

                    

      ROOM INTERIOR SANS HUBLOT 4 PERSONNES 375€/PERSONNE

       

         
         
         
      X
           
        
        

       

                
        
          Suite 1  
        
          Suite 2  
        
          Suite 3  

                    

                    

      ROOM INTERIOR SANS HUBLOT 4 PERSONNES 375€/PERSONNE

       

         
         
         
      X
           
        
        

       

                
        
          Suite 1  
        
          Suite 2  
        
          Suite 3  

      JAVASCRIPT // JavaScript Document function openModal() {   document.getElementById('myModal').style.display = "block"; } function closeModal() {   document.getElementById('myModal').style.display = "none"; } var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) {   showDivs(slideIndex += n); } function currentDiv(n) {   showDivs(slideIndex = n); } function showDivs(n) {   var i;   var x = document.getElementsByClassName("mySlides");   var dots = document.getElementsByClassName("demo");   var captionText = document.getElementById("caption");   if (n > x.length) {slideIndex = 1}   if (n < 1) {slideIndex = x.length}   for (i = 0; i < x.length; i++) {     x[i].style.display = "none";   }   for (i = 0; i < dots.length; i++) {     dots[i].className = dots[i].className.replace(" w3-opacity-off", "");   }   x[slideIndex-1].style.display = "block";   dots[slideIndex-1].className += " w3-opacity-off";   captionText.innerHTML = dots[slideIndex-1].alt; } I await your answer. Thank you.

        • 1. Re: Slideshow LIGHTBOX
          BenPleysier Adobe Community Professional & MVP

          Normally you should not touch the CSS and JS. If you want to change styles, then you should use an overriding stylesheet.

           

          Please upload the site and give us a link to the site so that we can help you.

          1 person found this helpful
          • 2. Re: Slideshow LIGHTBOX
            osgood_ Level 8

            teodoro8590  wrote

             

            Good morning, I would like to put the slideshow with the photos and the first part works well. But I would also like to put 3 more parts and it does not work well for slides.

                          

                          

                         

             

            What do you mean you would like to include 3 more parts? Do you mean you want 4 individual slideshows on the same page?

             

            The script you are using is obviously taken from:

             

            How To Create a Slideshow

            1 person found this helpful
            • 3. Re: Slideshow LIGHTBOX
              teodoro8590 Level 1

              BenPleysier  ha scritto

               

              Normally you should not touch the CSS and JS. If you want to change styles, then you should use an overriding stylesheet.

               

              Please upload the site and give us a link to the site so that we can help you.

              I did not mean to change styles. I intended to put the photos in four parts on the same page as OSGOOD said.

               

               

              Maybe I'll put the site's link here but unfortunately it's not ready yet they have not yet given me the ok to publish. If the site already publishes and surely I put it here link no problem. Unfortunately.

               

               

              Anyway thanks.

              • 4. Re: Slideshow LIGHTBOX
                teodoro8590 Level 1

                osgood_  ha scritto

                 

                What do you mean you would like to include 3 more parts? Do you mean you want 4 individual slideshows on the same page?

                 

                The script you are using is obviously taken from:

                 

                How To Create a Slideshow

                 

                Yes i mean want 4 individual slideshows on the same page?

                • 5. Re: Slideshow LIGHTBOX
                  teodoro8590 Level 1

                  osgood_08

                   

                  Sorry I can not find you wrote to me yesterday, did you delete it?

                  • 6. Re: Slideshow LIGHTBOX
                    osgood_ Level 8

                    Basically what I was explaining is you will have to duplicate the slideshow html code and the slideshow <script></script> and go through the code  and add _2, _3, _4 to the function names and css if you want 4 seperate slide shows.

                     

                    The below code shows an example of 2 slideshows: (I've identified in red what you need to add to the css'html code and where in the duplicated <script> you need to change the function names)

                     

                    <!DOCTYPE html>

                    <html>

                    <head>

                    <meta charset="UTF-8">

                    <title>Slideshow</title>

                    <style>

                    * {box-sizing:border-box}

                     

                    /* Slideshow container */

                    .slideshow-container {

                      max-width: 1000px;

                      position: relative;

                      margin: auto;

                    }

                     

                    /* Hide the images by default */

                    .mySlides, .mySlides_2 {

                        display: none;

                    }

                     

                    /* Next & previous buttons */

                    .prev, .next {

                      cursor: pointer;

                      position: absolute;

                      top: 50%;

                      width: auto;

                      margin-top: -22px;

                      padding: 16px;

                      color: white;

                      font-weight: bold;

                      font-size: 18px;

                      transition: 0.6s ease;

                      border-radius: 0 3px 3px 0;

                    }

                     

                    /* 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);

                    }

                     

                    /* Caption text */

                    .text {

                      color: #f2f2f2;

                      font-size: 15px;

                      padding: 8px 12px;

                      position: absolute;

                      bottom: 8px;

                      width: 100%;

                      text-align: center;

                    }

                     

                    /* Number text (1/3 etc) */

                    .numbertext {

                      color: #f2f2f2;

                      font-size: 12px;

                      padding: 8px 12px;

                      position: absolute;

                      top: 0;

                    }

                     

                    /* The dots/bullets/indicators */

                    .dot {

                      cursor:pointer;

                      height: 15px;

                      width: 15px;

                      margin: 0 2px;

                      background-color: #bbb;

                      border-radius: 50%;

                      display: inline-block;

                      transition: background-color 0.6s ease;

                    }

                     

                    .active, .dot:hover {

                      background-color: #717171;

                    }

                     

                    /* Fading animation */

                    .fade {

                      -webkit-animation-name: fade;

                      -webkit-animation-duration: 1.5s;

                      animation-name: fade;

                      animation-duration: 1.5s;

                    }

                     

                    @-webkit-keyframes fade {

                      from {opacity: .4}

                      to {opacity: 1}

                    }

                     

                    @keyframes fade {

                      from {opacity: .4}

                      to {opacity: 1}

                    }

                     

                    </style>

                    </head>

                    <body>

                     

                     

                     

                    <!-- Slideshow container -->

                    <div class="slideshow-container">

                    <!-- Full-width images with number and caption text -->

                    <div class="mySlides fade">

                    <div class="numbertext">1 / 3</div>

                    <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">

                    <div class="text">Caption Text</div>

                    </div>

                    <div class="mySlides fade">

                    <div class="numbertext">2 / 3</div>

                    <img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">

                    <div class="text">Caption Two</div>

                    </div>

                    <div class="mySlides fade">

                    <div class="numbertext">3 / 3</div>

                    <img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">

                    <div class="text">Caption Three</div>

                    </div>

                    <!-- Next and previous buttons -->

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

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

                    </div>

                    <br>

                     

                    <!-- The dots/circles -->

                    <div style="text-align:center">

                      <span class="dot" onclick="currentSlide(1)"></span>

                      <span class="dot" onclick="currentSlide(2)"></span>

                      <span class="dot" onclick="currentSlide(3)"></span>

                    </div>

                     

                     

                     

                     

                     

                    <!-- Slideshow container -->

                    <div class="slideshow-container">

                    <!-- Full-width images with number and caption text -->

                    <div class="mySlides_2 fade">

                    <div class="numbertext">1 / 3</div>

                    <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">

                    <div class="text">Caption Text</div>

                    </div>

                    <div class="mySlides_2 fade">

                    <div class="numbertext">2 / 3</div>

                    <img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">

                    <div class="text">Caption Two</div>

                    </div>

                    <div class="mySlides_2 fade">

                    <div class="numbertext">3 / 3</div>

                    <img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">

                    <div class="text">Caption Three</div>

                    </div>

                    <!-- Next and previous buttons -->

                    <a class="prev" onclick="plusSlides_2(-1)">&#10094;</a>

                    <a class="next" onclick="plusSlides_2(1)">&#10095;</a>

                    </div>

                    <br>

                     

                    <!-- The dots/circles -->

                    <div style="text-align:center">

                      <span class="dot" onclick="currentSlide_2(1)"></span>

                      <span class="dot" onclick="currentSlide_2(2)"></span>

                      <span class="dot" onclick="currentSlide_2(3)"></span>

                    </div>

                     

                     

                     

                     

                    <script>

                    var slideIndex = 1;

                    showSlides(slideIndex);

                     

                    // Next/previous controls

                    function plusSlides(n) {

                      showSlides(slideIndex += n);

                    }

                     

                    // Thumbnail image controls

                    function currentSlide(n) {

                      showSlides(slideIndex = n);

                    }

                     

                    function showSlides(n) {

                      var i;

                      var slides = document.getElementsByClassName("mySlides");

                      var dots = document.getElementsByClassName("dot");

                      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";

                    }

                     

                    </script>

                     

                     

                     

                     

                     

                    <script>

                    var slideIndex_2 = 1;

                    showSlides_2(slideIndex_2);

                     

                    // Next/previous controls

                    function plusSlides_2(n) {

                      showSlides_2(slideIndex_2 += n);

                    }

                     

                    // Thumbnail image controls

                    function currentSlide_2(n) {

                      showSlides_2(slideIndex_2 = n);

                    }

                     

                    function showSlides_2(n) {

                      var i;

                      var slides = document.getElementsByClassName("mySlides_2");

                      var dots = document.getElementsByClassName("dot");

                      if (n > slides.length) {slideIndex_2 = 1}

                      if (n < 1) {slideIndex_2 = 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_2-1].style.display = "block";

                      dots[slideIndex_2-1].className += " active";

                    }

                     

                    </script>

                     

                    </body>

                    </html>

                    2 people found this helpful
                    • 7. Re: Slideshow LIGHTBOX
                      teodoro8590 Level 1

                      osgood_  ha scritto

                       

                      Basically what I was explaining is you will have to duplicate the slideshow html code and the slideshow <script></script> and go through the code  and add _2, _3, _4 to the function names and css if you want 4 seperate slide shows.

                       

                      The below code shows an example of 2 slideshows: (I've identified in red what you need to add to the css'html code and where in the duplicated <script> you need to change the function names)

                       

                      <!DOCTYPE html>

                      <html>

                      <head>

                      <meta charset="UTF-8">

                      <title>Slideshow</title>

                      <style>

                      * {box-sizing:border-box}

                       

                      /* Slideshow container */

                      .slideshow-container {

                        max-width: 1000px;

                        position: relative;

                        margin: auto;

                      }

                       

                      /* Hide the images by default */

                      .mySlides, .mySlides_2 {

                          display: none;

                      }

                       

                      /* Next & previous buttons */

                      .prev, .next {

                        cursor: pointer;

                        position: absolute;

                        top: 50%;

                        width: auto;

                        margin-top: -22px;

                        padding: 16px;

                        color: white;

                        font-weight: bold;

                        font-size: 18px;

                        transition: 0.6s ease;

                        border-radius: 0 3px 3px 0;

                      }

                       

                      /* 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);

                      }

                       

                      /* Caption text */

                      .text {

                        color: #f2f2f2;

                        font-size: 15px;

                        padding: 8px 12px;

                        position: absolute;

                        bottom: 8px;

                        width: 100%;

                        text-align: center;

                      }

                       

                      /* Number text (1/3 etc) */

                      .numbertext {

                        color: #f2f2f2;

                        font-size: 12px;

                        padding: 8px 12px;

                        position: absolute;

                        top: 0;

                      }

                       

                      /* The dots/bullets/indicators */

                      .dot {

                        cursor:pointer;

                        height: 15px;

                        width: 15px;

                        margin: 0 2px;

                        background-color: #bbb;

                        border-radius: 50%;

                        display: inline-block;

                        transition: background-color 0.6s ease;

                      }

                       

                      .active, .dot:hover {

                        background-color: #717171;

                      }

                       

                      /* Fading animation */

                      .fade {

                        -webkit-animation-name: fade;

                        -webkit-animation-duration: 1.5s;

                        animation-name: fade;

                        animation-duration: 1.5s;

                      }

                       

                      @-webkit-keyframes fade {

                        from {opacity: .4}

                        to {opacity: 1}

                      }

                       

                      @keyframes fade {

                        from {opacity: .4}

                        to {opacity: 1}

                      }

                       

                      </style>

                      </head>

                      <body>

                       

                       

                       

                      <!-- Slideshow container -->

                      <div class="slideshow-container">

                      <!-- Full-width images with number and caption text -->

                      <div class="mySlides fade">

                      <div class="numbertext">1 / 3</div>

                      <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">

                      <div class="text">Caption Text</div>

                      </div>

                      <div class="mySlides fade">

                      <div class="numbertext">2 / 3</div>

                      <img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">

                      <div class="text">Caption Two</div>

                      </div>

                      <div class="mySlides fade">

                      <div class="numbertext">3 / 3</div>

                      <img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">

                      <div class="text">Caption Three</div>

                      </div>

                      <!-- Next and previous buttons -->

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

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

                      </div>

                      <br>

                       

                      <!-- The dots/circles -->

                      <div style="text-align:center">

                        <span class="dot" onclick="currentSlide(1)"></span>

                        <span class="dot" onclick="currentSlide(2)"></span>

                        <span class="dot" onclick="currentSlide(3)"></span>

                      </div>

                       

                       

                       

                       

                       

                      <!-- Slideshow container -->

                      <div class="slideshow-container">

                      <!-- Full-width images with number and caption text -->

                      <div class="mySlides_2 fade">

                      <div class="numbertext">1 / 3</div>

                      <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">

                      <div class="text">Caption Text</div>

                      </div>

                      <div class="mySlides_2 fade">

                      <div class="numbertext">2 / 3</div>

                      <img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">

                      <div class="text">Caption Two</div>

                      </div>

                      <div class="mySlides_2 fade">

                      <div class="numbertext">3 / 3</div>

                      <img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">

                      <div class="text">Caption Three</div>

                      </div>

                      <!-- Next and previous buttons -->

                      <a class="prev" onclick="plusSlides_2(-1)">&#10094;</a>

                      <a class="next" onclick="plusSlides_2(1)">&#10095;</a>

                      </div>

                      <br>

                       

                      <!-- The dots/circles -->

                      <div style="text-align:center">

                        <span class="dot" onclick="currentSlide_2(1)"></span>

                        <span class="dot" onclick="currentSlide_2(2)"></span>

                        <span class="dot" onclick="currentSlide_2(3)"></span>

                      </div>

                       

                       

                       

                       

                      <script>

                      var slideIndex = 1;

                      showSlides(slideIndex);

                       

                      // Next/previous controls

                      function plusSlides(n) {

                        showSlides(slideIndex += n);

                      }

                       

                      // Thumbnail image controls

                      function currentSlide(n) {

                        showSlides(slideIndex = n);

                      }

                       

                      function showSlides(n) {

                        var i;

                        var slides = document.getElementsByClassName("mySlides");

                        var dots = document.getElementsByClassName("dot");

                        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";

                      }

                       

                      </script>

                       

                       

                       

                       

                       

                      <script>

                      var slideIndex_2 = 1;

                      showSlides_2(slideIndex_2);

                       

                      // Next/previous controls

                      function plusSlides_2(n) {

                        showSlides_2(slideIndex_2 += n);

                      }

                       

                      // Thumbnail image controls

                      function currentSlide_2(n) {

                        showSlides_2(slideIndex_2 = n);

                      }

                       

                      function showSlides_2(n) {

                        var i;

                        var slides = document.getElementsByClassName("mySlides_2");

                        var dots = document.getElementsByClassName("dot");

                        if (n > slides.length) {slideIndex_2 = 1}

                        if (n < 1) {slideIndex_2 = 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_2-1].style.display = "block";

                        dots[slideIndex_2-1].className += " active";

                      }

                       

                      </script>

                       

                      </body>

                      </html>

                       

                      I received, excellent. Thank you... It works well but I ask you one thing if I can also do that LIGHTBOX style that I put before in the code, is it possible? I mean I have to edit it in the script with the number 2, right? It can be done? Or that LIGHTBOX model is not suitable?

                      • 8. Re: Slideshow LIGHTBOX
                        teodoro8590 Level 1

                        osgood_  ha scritto

                         

                        Basically what I was explaining is you will have to duplicate the slideshow html code and the slideshow <script></script> and go through the code  and add _2, _3, _4 to the function names and css if you want 4 seperate slide shows.

                         

                        The below code shows an example of 2 slideshows: (I've identified in red what you need to add to the css'html code and where in the duplicated <script> you need to change the function names)

                         

                        <!DOCTYPE html>

                        <html>

                        <head>

                        <meta charset="UTF-8">

                        <title>Slideshow</title>

                        <style>

                        * {box-sizing:border-box}

                         

                        /* Slideshow container */

                        .slideshow-container {

                          max-width: 1000px;

                          position: relative;

                          margin: auto;

                        }

                         

                        /* Hide the images by default */

                        .mySlides, .mySlides_2 {

                            display: none;

                        }

                         

                        /* Next & previous buttons */

                        .prev, .next {

                          cursor: pointer;

                          position: absolute;

                          top: 50%;

                          width: auto;

                          margin-top: -22px;

                          padding: 16px;

                          color: white;

                          font-weight: bold;

                          font-size: 18px;

                          transition: 0.6s ease;

                          border-radius: 0 3px 3px 0;

                        }

                         

                        /* 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);

                        }

                         

                        /* Caption text */

                        .text {

                          color: #f2f2f2;

                          font-size: 15px;

                          padding: 8px 12px;

                          position: absolute;

                          bottom: 8px;

                          width: 100%;

                          text-align: center;

                        }

                         

                        /* Number text (1/3 etc) */

                        .numbertext {

                          color: #f2f2f2;

                          font-size: 12px;

                          padding: 8px 12px;

                          position: absolute;

                          top: 0;

                        }

                         

                        /* The dots/bullets/indicators */

                        .dot {

                          cursor:pointer;

                          height: 15px;

                          width: 15px;

                          margin: 0 2px;

                          background-color: #bbb;

                          border-radius: 50%;

                          display: inline-block;

                          transition: background-color 0.6s ease;

                        }

                         

                        .active, .dot:hover {

                          background-color: #717171;

                        }

                         

                        /* Fading animation */

                        .fade {

                          -webkit-animation-name: fade;

                          -webkit-animation-duration: 1.5s;

                          animation-name: fade;

                          animation-duration: 1.5s;

                        }

                         

                        @-webkit-keyframes fade {

                          from {opacity: .4}

                          to {opacity: 1}

                        }

                         

                        @keyframes fade {

                          from {opacity: .4}

                          to {opacity: 1}

                        }

                         

                        </style>

                        </head>

                        <body>

                         

                         

                         

                        <!-- Slideshow container -->

                        <div class="slideshow-container">

                        <!-- Full-width images with number and caption text -->

                        <div class="mySlides fade">

                        <div class="numbertext">1 / 3</div>

                        <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">

                        <div class="text">Caption Text</div>

                        </div>

                        <div class="mySlides fade">

                        <div class="numbertext">2 / 3</div>

                        <img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">

                        <div class="text">Caption Two</div>

                        </div>

                        <div class="mySlides fade">

                        <div class="numbertext">3 / 3</div>

                        <img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">

                        <div class="text">Caption Three</div>

                        </div>

                        <!-- Next and previous buttons -->

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

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

                        </div>

                        <br>

                         

                        <!-- The dots/circles -->

                        <div style="text-align:center">

                          <span class="dot" onclick="currentSlide(1)"></span>

                          <span class="dot" onclick="currentSlide(2)"></span>

                          <span class="dot" onclick="currentSlide(3)"></span>

                        </div>

                         

                         

                         

                         

                         

                        <!-- Slideshow container -->

                        <div class="slideshow-container">

                        <!-- Full-width images with number and caption text -->

                        <div class="mySlides_2 fade">

                        <div class="numbertext">1 / 3</div>

                        <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">

                        <div class="text">Caption Text</div>

                        </div>

                        <div class="mySlides_2 fade">

                        <div class="numbertext">2 / 3</div>

                        <img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">

                        <div class="text">Caption Two</div>

                        </div>

                        <div class="mySlides_2 fade">

                        <div class="numbertext">3 / 3</div>

                        <img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">

                        <div class="text">Caption Three</div>

                        </div>

                        <!-- Next and previous buttons -->

                        <a class="prev" onclick="plusSlides_2(-1)">&#10094;</a>

                        <a class="next" onclick="plusSlides_2(1)">&#10095;</a>

                        </div>

                        <br>

                         

                        <!-- The dots/circles -->

                        <div style="text-align:center">

                          <span class="dot" onclick="currentSlide_2(1)"></span>

                          <span class="dot" onclick="currentSlide_2(2)"></span>

                          <span class="dot" onclick="currentSlide_2(3)"></span>

                        </div>

                         

                         

                         

                         

                        <script>

                        var slideIndex = 1;

                        showSlides(slideIndex);

                         

                        // Next/previous controls

                        function plusSlides(n) {

                          showSlides(slideIndex += n);

                        }

                         

                        // Thumbnail image controls

                        function currentSlide(n) {

                          showSlides(slideIndex = n);

                        }

                         

                        function showSlides(n) {

                          var i;

                          var slides = document.getElementsByClassName("mySlides");

                          var dots = document.getElementsByClassName("dot");

                          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";

                        }

                         

                        </script>

                         

                         

                         

                         

                         

                        <script>

                        var slideIndex_2 = 1;

                        showSlides_2(slideIndex_2);

                         

                        // Next/previous controls

                        function plusSlides_2(n) {

                          showSlides_2(slideIndex_2 += n);

                        }

                         

                        // Thumbnail image controls

                        function currentSlide_2(n) {

                          showSlides_2(slideIndex_2 = n);

                        }

                         

                        function showSlides_2(n) {

                          var i;

                          var slides = document.getElementsByClassName("mySlides_2");

                          var dots = document.getElementsByClassName("dot");

                          if (n > slides.length) {slideIndex_2 = 1}

                          if (n < 1) {slideIndex_2 = 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_2-1].style.display = "block";

                          dots[slideIndex_2-1].className += " active";

                        }

                         

                        </script>

                         

                        </body>

                        </html>

                         

                        Hello, I copied everything you did and it works fine but there is only one problem. When I click a menu where I put that slideshow and do not immediately appear a picture so I have to click the "dot" and opens the photo, strange. Do I have something wrong?

                        1 person found this helpful
                        • 9. Re: Slideshow LIGHTBOX
                          osgood_ Level 8

                          teodoro8590  wrote

                           

                          Hello, I copied everything you did and it works fine but there is only one problem. When I click a menu where I put that slideshow and do not immediately appear a picture so I have to click the "dot" and opens the photo, strange. Do I have something wrong?

                           

                          What menu are you clicking?

                           

                          If you can upload your page some where and link to it that would be helpful as we can see what is actually happening.

                          • 10. Re: Slideshow LIGHTBOX
                            teodoro8590 Level 1

                            osgood_  ha scritto

                             

                            teodoro8590   wrote

                             

                            Hello, I copied everything you did and it works fine but there is only one problem. When I click a menu where I put that slideshow and do not immediately appear a picture so I have to click the "dot" and opens the photo, strange. Do I have something wrong?

                             

                            What menu are you clicking?

                             

                            If you can upload your page some where and link to it that would be helpful as we can see what is actually happening.

                             

                            Maybe I explained you badly, however, finally it is published on the site but it is still temporary. Meanwhile, I write here the name of the site is http://www.deafcruise2018.com/index_fr.html. Then go to the "tickets" menu and go underneath where I put slideshows and you do not see the photo. You try to click "DOT" and you open the photo, it's weird.

                             

                             

                            Then another thing I tried to remove on css "min-height: 100%;" but it remains the same that flows along even if it is empty. Why?

                            • 11. Re: Slideshow LIGHTBOX
                              osgood_ Level 8

                              teodoro8590  wrote

                               

                              Maybe I explained you badly, however, finally it is published on the site but it is still temporary. Meanwhile, I write here the name of the site is http://www.deafcruise2018.com/index_fr.html. Then go to the "tickets" menu and go underneath where I put slideshows and you do not see the photo. You try to click "DOT" and you open the photo, it's weird.

                               

                               

                              Then another thing I tried to remove on css "min-height: 100%;" but it remains the same that flows along even if it is empty. Why?

                               

                               

                              Move your slideshow.js file link to just before the closing </body></html> tags, as shown below......

                               

                               

                              <script type="text/javascript" title="slideshow" src="js/slideshow.js"></script>

                              </body>

                              </html>

                              1 person found this helpful
                              • 12. Re: Slideshow LIGHTBOX
                                teodoro8590 Level 1

                                osgood_  ha scritto

                                 

                                teodoro8590   wrote

                                 

                                Maybe I explained you badly, however, finally it is published on the site but it is still temporary. Meanwhile, I write here the name of the site is http://www.deafcruise2018.com/index_fr.html. Then go to the "tickets" menu and go underneath where I put slideshows and you do not see the photo. You try to click "DOT" and you open the photo, it's weird.

                                 

                                 

                                Then another thing I tried to remove on css "min-height: 100%;" but it remains the same that flows along even if it is empty. Why?

                                 

                                 

                                Move your slideshow.js file link to just before the closing </body></html> tags, as shown below......

                                 

                                 

                                <script type="text/javascript" title="slideshow" src="js/slideshow.js"></script>

                                </body>

                                </html>

                                 

                                It works well, I really did not know this thing. Thanks so much.

                                 

                                 

                                There is another problem to scroll as I wrote before, I tried to remove in the css "min-height: 100%;" because it is not nice to run along even if it is empty. Try to see on "Accueil" or "Programe" or "Contacts" you scroll down with empty, it's not nice. I tried to remove it "min-height: 100%;" and always remains the same as flowing too much, it's strange. I remember you advised me to add "min-height: 100%;" to scroll along.

                                • 13. Re: Slideshow LIGHTBOX
                                  teodoro8590 Level 1

                                  osgood_

                                   

                                  Did you do something wrong? I meant to say it's to scroll down I'm too much. For the transition is fine as well as before. I was just talking to scroll down I'm too much. I want to block the page from flowing down.

                                  • 14. Re: Slideshow LIGHTBOX
                                    osgood_ Level 8

                                    teodoro8590  wrote

                                     

                                    osgood_

                                     

                                    Did you do something wrong? I meant to say it's to scroll down I'm too much. For the transition is fine as well as before. I was just talking to scroll down I'm too much. I want to block the page from flowing down.

                                     

                                     

                                    Remove the orginal jquery script and try the one below.

                                     

                                    <script>

                                    $(document).ready(function(){

                                    // MAIN NAVIGATION

                                    $('.navigation a').css('cursor' , 'pointer').click(function(){

                                    var navItem = $(this).attr('navItem');

                                    $('.close').css({'right' : '-100%', 'transition' : '1.5s'}).show(function(){

                                    $('.close').hide();

                                    $(navItem).show();

                                    });

                                    if(navItem === ".home") {

                                    $('.home').show().css({'right' : '0', 'transition' : '1s'});

                                    }

                                    else {

                                    $(navItem).css({'right' : '0', 'transition' : '1s'});

                                    }

                                    });

                                    });

                                    </script>

                                     

                                     

                                     

                                     

                                    Also add the class 'close' to the home section:

                                     

                                     

                                    <div class="home close">