Блог

Главная - Вопросы по программированию - (Html / css) Всплывающий слайдер изображения, щелкнув изображение в галерее

(Html / css) Всплывающий слайдер изображения, щелкнув изображение в галерее

#javascript #html #css #tumblr #image-gallery

#javascript #HTML #css — код #tumblr #изображение-галерея

Вопрос:

У меня есть галерея изображений сетки для коллекции проектов. Щелкая по каждому изображению, я хочу, чтобы у него появилось всплывающее слайд-шоу с изображениями, в котором отображаются другие изображения, которых нет в галерее. Таким образом, люди могут видеть более подробную информацию о конкретном проекте.

Возможно ли это сделать с помощью hrml / css / javascript? Я создаю его на Tumblr, поэтому функции ограничены. Ниже приведен самый простой html / css галереи изображений сетки. Как мне следует продолжать с этого момента?

 div.gallery {
  border: 20px solid #ccc;
}

div.gallery:hover {
  border: 20px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
} 
 <div class="responsive">
  <div class="gallery">
    <a target="_blank" href="img_1.jpg">
      <img src="iimg_1.jpg" alt="Cat" width="600" height="600">
    </a>
  </div>
</div>


<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="img_2.jpg">
      <img src=""img_2.jpg"" alt="Forest" width="600" height="600">
    </a>
  </div>
</div>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="img_3.jpg"">
      <img src="img_3.jpg" alt="Lights" width="600" height="600">
    </a>
  </div>
</div>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="img_4.jpg">
      <img src="img_4.jpg" alt="Sea" width="600" height="600">
    </a>
    </div>
</div>

<div class="clearfix"></div>

Ответ №1:

если вы хотите открыть новую галерею, нажав на кнопку / ссылку, вы можете написать функцию JavaScript, которая будет отображать каждый элемент, который вы хотите в DOM.

Итак, нажмите добавить новый элемент в HTML из JS и отобразить предоставленные элементы.

Комментарии:

1. Спасибо! Я успешно создал слайд-шоу в виде всплывающего окна. но когда я нажимаю «далее», слайд-шоу не возвращается к первому изображению и продолжает запускать пустые слайды… это будет другой вопрос…

2. @booboobum не могли бы вы, пожалуйста, создать codepen с вашим кодом, если он не разрешен, и предоставить мне ссылку на это? Я проверю.