//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)">❮</a>
<a class = "next" onclick = "plusSlides(1)">❯</a>
</div>
</div>
Мне было интересно, можно ли отобразить нужное изображение на странице 2 Html на основе того, что щелкнули на странице 1 Html. Я знаю, что решение может состоять в том, чтобы создать HTML-страницу для каждой фотографии, которую я хочу показать при нажатии: я должен просто изменить windows.location addEventListener, а затем в файле JS установить число, соответствующее слайдиндексу, но это было бы действительно хорошо найти решение без дублирования страниц. Я надеюсь, что я ясно
спасибо Архит. У меня нет опыта работы со строками запросов. Не могли бы вы привести пример?
Я нашел хороший вариант. В основном на первой странице 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.
пожалуйста, отформатируйте фрагменты кода как код, чтобы люди могли легко их прочитать
Извини, Сир, я не знал. Я думаю, что исправил это
Я думаю, что лучшим подходом было бы использование строк запроса.