Добавление функции масштабирования к слайдеру - PullRequest
0 голосов
/ 26 марта 2020

У меня есть этот код, который я взял из W3School, и слайдер галереи изображений. Я ищу, чтобы добавить функцию для увеличения основного изображения. По сути, я хотел бы нажать на кнопку «Развернуть», и над всем появляется новый div с полным окном просмотра и отображением изображения в большем размере.

Кто-нибудь может помочь?

Вот мой html

image

Вот мой CSS


/* Position the image container (needed to position the left and right arrows) */
.slider {
  position: relative;
  width:800px;
    height:720px;
    margin:0px auto;
    border-radius:3px;s

}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Fit box for the image and style for stretch */
.mySlides img{
  width:800px;
  height:600px; 
  object-fit: cover;

}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous and expand buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
#expand
{
    width:18px;
    position:absolute;
    top:6px;
  right:6px;
  z-index: 1;
}



/* Six columns side by side */
.thumbs{
  height:100px;
    width:800px;
    float:left;
  overflow-y:hidden;
  overflow-x: scroll;
    margin-top:10px;
    white-space:nowrap;
}

.thumbs_style
{
    display:inline-block;
}

.thumbs_style img
{
    width:105px;
    height:80px;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

Вот мой JS

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("demo");
  if (n > slides.length) { slideIndex = 1 }
  if (n < 1) { slideIndex = slides.length }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
  captionText.innerHTML = dots[slideIndex - 1].alt;
}```

1 Ответ

0 голосов
/ 29 марта 2020

Придумал способ сделать это, сосредоточившись в основном на изменении z-index и свойств отображения. Лучшее решение, которое может предложить мой новичок **. Если у кого-нибудь есть предложения по улучшению моих кодов, я буду благодарен.

Вот мой HTML:

</section>

image

`` `

Вот мой CSS:

.slider {
  position: relative;
  width: 80vh;
  height: 75vh;
  margin: 0px auto;
}

.slider-exp {
  position: relative;
  width: 135vh;
  height: 90vh;
  margin: 0px auto;
  padding-top: 4vh;
}

/* Hide the images by default */
.mySlides {
  position: relative;
  display: none;
  z-index: 0;
}

/* Fit box for the image and style for stretch */
.lrg-img {
  width: 80vh;
  height: 60vh;
  object-fit: cover;
  margin: 0px auto;
  border-radius: 3px;
}

.exp-size {
  position: relative;
  width: 135vh;
  height: 90vh;
  margin: 0px auto;

}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous, expand  and close buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  margin-top: -30px;
  top: 30vh;
  width: auto;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
  z-index: 1;
  text-shadow: 1px 1px 2px rgb(0, 0, 0);
}

.prev-exp,
.next-exp {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  display: none;
  text-shadow: 1px 1px 2px rgb(0, 0, 0);
  z-index: 4;

}

.prev-exp {
  left: 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,
.prev-exp:hover,
.next-exp:hover,
#close-btn:hover,
#expand-btn:hover {
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-filter: drop-shadow(1px 1px rgba(0, 0, 0, 0));
  filter: drop-shadow(1px 1px rgba(0, 0, 0, 0));
}



#expand-btn,
#close-btn {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #fff;
  width: 18px;
  position: absolute;
  top: 0px;
  right: 0;
  z-index: 1;
  border-radius: 0 3px 0 3px;
  padding: 16px;
  -webkit-filter: drop-shadow(1px 1px 2px rgb(0, 0, 0));
  filter: drop-shadow(1px 1px 2px rgb(0, 0, 0));
}

#close-btn {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #333;
  z-index: 4 !important;
  top: 4vh;
  right: 0;
  border-radius: 0 3px 0 3px;
  display: none;
}

/* Thumbs style*/
.thumbs {
  height: 11vh;
  width: 80vh;
  float: left;
  overflow-y: hidden;
  overflow-x: scroll;
  margin-top: 0rem;
  white-space: nowrap;
  z-index: 0;
}

/* width */
.thumbs::-webkit-scrollbar {
  height: 4px;
  border-radius: 50%;
}

/* Track */
.thumbs::-webkit-scrollbar-track {
  background: #fff;
}

/* Handle */
.thumbs::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
.thumbs::-webkit-scrollbar-thumb:hover {
  background: #666;
}

.thumbs_style {
  display: inline-block;
}

.thumbs_style img {
  width: 10vh;
  height: 8vh;
  border-radius: 3px;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
  border: 2px solid rgba(0, 0, 0, 0.4);
}


.active,
.demo:hover {
  opacity: 1;
  border: 2px solid #ffbc00;
}

/* Expand-Window style */

#expand-window {
  display: none;
  position: fixed;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;

}

.hide {
  display: block;
}

Вот мой Javascript:

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("demo");
  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";

}

// EXPAND FUNCTION
// Open the expanded slider
document.querySelector('#expand-btn').addEventListener('click', function () {
  let expandables = document.querySelectorAll('.expandables')
  let hide = document.querySelectorAll('.hide')
  let show = document.querySelectorAll('.show')
  let expSize = document.querySelectorAll('.lrg-img')
  for (i = 0; i < expandables.length; i++) {
    expandables[i].style.zIndex = "3";
  }
  for (i = 0; i < hide.length; i++) {
    hide[i].style.display = "none";
  }
  for (i = 0; i < show.length; i++) {
    show[i].style.display = "block";
  }
  for (i = 0; i < expSize.length; i++) {
    expSize[i].classList.add("exp-size");
  }
  document.querySelector('.slider').classList.add("slider-exp");

  // document.querySelector('#close-btn').style.display = "block";
  // document.querySelector("#expand-window").style.display = "block";
});

// Close the expanded slider
document.querySelector('#close-btn').addEventListener('click', function () {
  let expandables = document.querySelectorAll('.expandables')
  let hide = document.querySelectorAll('.hide')
  let show = document.querySelectorAll('.show')
  let expSize = document.querySelectorAll('.lrg-img')
  for (i = 0; i < expandables.length; i++) {
    expandables[i].style.zIndex = "0";
  }
  for (i = 0; i < hide.length; i++) {
    hide[i].style.display = "block";
  }
  for (i = 0; i < show.length; i++) {
    show[i].style.display = "none";
  }
  for (i = 0; i < expSize.length; i++) {
    expSize[i].classList.remove("exp-size");
  }
  document.querySelector('.slider').classList.remove("slider-exp");

  document.querySelector("#expand-window").style.display = "none";

});```
...