Highlighted

Slideshow LIGHTBOX

Community Beginner ,
Feb 08, 2018

Copy link to clipboard

Copied

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.style.display = "none";   }   for (i = 0; i < dots.length; i++) {     dots.className = dots.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.

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.style.display = "none";

  }

  for (i = 0; i < dots.length; i++) {

      dots.className = dots.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.style.display = "none";

  }

  for (i = 0; i < dots.length; i++) {

      dots.className = dots.className.replace(" active", "");

  }

  slides[slideIndex_2-1].style.display = "block";

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

}

</script>

</body>

</html>

Views

927

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Slideshow LIGHTBOX

Community Beginner ,
Feb 08, 2018

Copy link to clipboard

Copied

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.style.display = "none";   }   for (i = 0; i < dots.length; i++) {     dots.className = dots.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.

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.style.display = "none";

  }

  for (i = 0; i < dots.length; i++) {

      dots.className = dots.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.style.display = "none";

  }

  for (i = 0; i < dots.length; i++) {

      dots.className = dots.className.replace(" active", "");

  }

  slides[slideIndex_2-1].style.display = "block";

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

}

</script>

</body>

</html>

Views

928

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Feb 08, 2018 0
Adobe Community Professional ,
Feb 08, 2018

Copy link to clipboard

Copied

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 08, 2018 1
Community Beginner ,
Feb 08, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 08, 2018 0
LEGEND ,
Feb 08, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 08, 2018 1
Community Beginner ,
Feb 08, 2018

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 08, 2018 0
Community Beginner ,
Feb 09, 2018

Copy link to clipboard

Copied

osgood_08

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 09, 2018 0
LEGEND ,
Feb 09, 2018

Copy link to clipboard

Copied

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.style.display = "none";

  }

  for (i = 0; i < dots.length; i++) {

      dots.className = dots.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.style.display = "none";

  }

  for (i = 0; i < dots.length; i++) {

      dots.className = dots.className.replace(" active", "");

  }

  slides[slideIndex_2-1].style.display = "block";

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

}

</script>

</body>

</html>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 09, 2018 1
Community Beginner ,
Feb 09, 2018

Copy link to clipboard

Copied

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.style.display = "none";

  }

  for (i = 0; i < dots.length; i++) {

      dots.className = dots.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.style.display = "none";

  }

  for (i = 0; i < dots.length; i++) {

      dots.className = dots.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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 09, 2018 0
Community Beginner ,
Feb 12, 2018

Copy link to clipboard

Copied

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.style.display = "none";

  }

  for (i = 0; i < dots.length; i++) {

      dots.className = dots.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.style.display = "none";

  }

  for (i = 0; i < dots.length; i++) {

      dots.className = dots.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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 12, 2018 1
LEGEND ,
Feb 13, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 13, 2018 0
Community Beginner ,
Feb 13, 2018

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 13, 2018 0
LEGEND ,
Feb 13, 2018

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 13, 2018 1
Community Beginner ,
Feb 13, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 13, 2018 0
Community Beginner ,
Feb 13, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 13, 2018 0
osgood_ LATEST
LEGEND ,
Feb 13, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 13, 2018 0