Vanilla Js - как показать конкретное изображение ползунка на основе щелкнутого элемента на предыдущей странице

//JS page one
    let box = document.getElementsByClassName("box");

    //click event
    box[0].addEventListener("click", fn1);
    box[1].addEventListener("click", fn2);
    box[2].addEventListener("click", fn3);
    box[3].addEventListener("click", fn4);

  //show description at click and hide "click for info"
    function fn1() {
    window.location = 'carousel.html';
    }
    function fn2() {
    window.location = 'carousel.html#2';
    }
    function fn3() {
    window.location = 'carousel.html';
    }
    function fn4() {
    window.location = 'carousel.html';
    }
    
   //JS page two
      /*lightbox code*/ 
      let 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) {
        let i;
        let slides = document.getElementsByClassName("mySlides");
        if (n > slides.length) {slideIndex = 1}
        if (n < 1) {slideIndex = slides.length}
        for (i = 0; i < slides.length; i++) {
          slides[i].style.display = "none";
        }
        slides[slideIndex-1].style.display = "block";
      }
<!--HTML PAGE ONE-->
    <div id = "container">
      <!--one-->
      <div class = "box">
        <img title = "paint one" class = "image" src = "images/paintings/1.jpg"> 
        <p class = "showText"></p>
      </div>
     <!--two-->
      <div class = "box">
        <img title = "paint two" class = "image" src = "images/paintings/2.jpg"> 
        <p class = "showText"></p>
      </div>
      <!--three-->
      <div class = "box">
        <img title = "paint one" class = "image" src = "images/paintings/3.jpg"> 
       <p class = "showText"></p>
      </div>
     <!--four-->
      <div class = "box">
        <img title = "paint two" class = "image" src = "images/paintings/4.jpg"> 
        <p class = "showText"></p>
      </div>
    </div>
    
     <!--HTML PAGE 2 - CAROUSEL-->
    <div id = "lightbox">
    <div class = "slideshow-container">

  <!-- Full-width images with number and caption text -->
  <div class = "mySlides fade">
    <div class = "numbertext">1 / 4</div>
    <img class = "image" src = "images/paintings/1.jpg">
    <div class = "text">Caption Text</div>
  </div>

  <div class = "mySlides fade">
    <div class = "numbertext">2 / 4</div>
    <img class = "image" src = "images/paintings/2.jpg">
    <div class = "text">Caption Two</div>
  </div>

  <div class = "mySlides fade">
    <div class = "numbertext">3 / 4</div>
    <img class = "image" src = "images/paintings/3.jpg">
    <div class = "text">Caption Three</div>
  </div>

  <div class = "mySlides fade">
    <div class = "numbertext">4 / 4</div>
    <img class = "image" src = "images/paintings/4.jpg">
    <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>
   </div>

Мне было интересно, можно ли отобразить нужное изображение на странице 2 Html на основе того, что щелкнули на странице 1 Html. Я знаю, что решение может состоять в том, чтобы создать HTML-страницу для каждой фотографии, которую я хочу показать при нажатии: я должен просто изменить windows.location addEventListener, а затем в файле JS установить число, соответствующее слайдиндексу, но это было бы действительно хорошо найти решение без дублирования страниц. Я надеюсь, что я ясно

Я думаю, что лучшим подходом было бы использование строк запроса.

Archit Gargi 09.01.2023 17:27

спасибо Архит. У меня нет опыта работы со строками запросов. Не могли бы вы привести пример?

Luca 09.01.2023 17:36
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
57
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я нашел хороший вариант. В основном на первой странице Html я присвоил идентификатор каждому изображению, а на первой странице js в окнах fn1, fn2, fn3 и fn4 я добавил хэш относительного идентификатора, например: (window.location = 'carousel.html#1 '). Затем на странице js 2 я добавил следующий код:

  window.addEventListener('load', (event) => {

if (location.hash === "#1") {
  currentSlide(1)
}
if (location.hash === "#2") {
   currentSlide(2)
}

if (location.hash === "#3") {
   currentSlide(3)
  }
  if (location.hash === "#4") {
    currentSlide(4)
  }

})

чтобы избежать возможной медленной загрузки в файле css, я добавил загружаемый gif в качестве фонового изображения в класс .image.

пожалуйста, отформатируйте фрагменты кода как код, чтобы люди могли легко их прочитать

Seer 10.01.2023 08:33

Извини, Сир, я не знал. Я думаю, что исправил это

Luca 10.01.2023 14:15

Другие вопросы по теме