小贝子编程

沙箱中的沙箱模态



快速提示:这是一个项目，我想说(在0到100的范围内)我已经设法完成了92分。因此不需要处理整个代码。(如果需要的话，你可以这么做。)

我可以称它为:一个图像滑动器，一个图像库，一个静态滑动器，一个静态旋转木马，或者，一个静态图像滑动器旋转木马库(不管这意味着什么)。

只是觉得image sandbox可以节省一些命名的压力。

我目前是一个小团队开发一个网站，严重需要这个组件的一部分。(就像我之前说的，我快完成了，只是需要帮助来完成。)

------------------------------- 那么它是什么呢?-------------------------------

我制作了两个沙箱，默认情况下一个是可见而另一个是隐藏。第一个有一个主显示器，显示悬停的缩略图。当你点击主显示器时，它会显示一个有另一个沙盒的模式(与默认的沙盒有很大不同)。

------------------------------- 所以目前是怎样的?-------------------------------

目前，当我点击第一个沙箱的显示图像时，模态的主显示显示了一个不同的图像，而不是我点击的最后一张图片，在第一个沙盒

------------------------------- 你想要什么?-------------------------------

我想要的图像，这是在第一个沙箱主显示器上活动的在模态的主显示中自动显示默认图像为当你点击它。

即点击主显示的第一个沙箱后，显示视图中的最后一个图像，也应该是模态主显示的默认值． 当然，相应的缩略图应该是活动的。

请看我写的代码:

/* ========== begin ========== MODAL INITIALISATION SCRIPT ========== begin ========== */
let modalBtn = document.getElementById('featured')
let modal = document.getElementById('sandbox_modal')
modalBtn.addEventListener('click', () => {
modal.classList.add('sandbox_modal_on')
})
window.onclick = (e) => {
if (e.target.matches('#sandbox_modal')) {
modal.classList.remove('sandbox_modal_on')
}
}
/* ========== end ========== MODAL INITIALISATION SCRIPT ========== end ========== */
/* ========== begin ========== IMAGE SANDBOX SCRIPT (DEFAULT) ========== begin ========== */
let thumbnails = document.getElementsByClassName('thumbnail')
let activeImages = document.getElementsByClassName('active')
for (var i = thumbnails.length - 1; i >= 0; i--) {
let thumbnail = thumbnails[i]
thumbnail.addEventListener('mouseenter', function() {
if (activeImages.length > 0) {
activeImages[0].classList.remove('active')
}
this.classList.add('active')
document.getElementById('featured').src = this.src
})
}
/* eventListener to run the script at the start and hdie left button automatically */
window.addEventListener("load", change);
var slidesAmount = document.querySelectorAll('#slider .thumbnail').length;
var slidesPerScreen = 4;
var currentSlideCounter = 1;
var maxSlideCounter = slidesAmount - slidesPerScreen + 1;
let buttonLeft = document.getElementById('slide_left')
let buttonRight = document.getElementById('slide_right')
let container = document.getElementById('slider')
buttonLeft.addEventListener('click', function() {
container.scrollLeft -= 70;
if (currentSlideCounter > 1) {
currentSlideCounter -= 1;
}
change();
})
buttonRight.addEventListener('click', function() {
container.scrollLeft += 70;
if (currentSlideCounter < maxSlideCounter) {
currentSlideCounter += 1;
}
change();
})
function change() {
switch (currentSlideCounter) {
case 1:
document.querySelector('#slide_left').classList.add('changes');
if (maxSlideCounter == 2) {
document.querySelector('#slide_right').classList.remove('changes');
}
break;
case maxSlideCounter:
document.querySelector('#slide_right').classList.add('changes');
if (maxSlideCounter == 2) {
document.querySelector('#slide_left').classList.remove('changes');
}
break;
default:
document.querySelectorAll('.slide_arrow').forEach(el => el.classList.remove('changes'));
break;
}
/* this fixes the issue you addressed */
if (slidesAmount <= slidesPerScreen) {
document.querySelectorAll('.slide_arrow').forEach(el => el.classList.add('changes'));
}
}
/* ========== end ========== IMAGE SANDBOX SCRIPT (DEFAULT) ========== end ========== */
/* ========== begin ========== IMAGE SANDBOX SCRIPT (MODAL) ========== begin ========== */
let leftArrow = document.querySelector("#img_slide_left");
let rightArrow = document.querySelector("#img_slide_right");
let slidesContainer = document.querySelector("#img_slides");
let applyThumbnail = function(dataIdx) {
document.querySelector("#img_thumbnails > img.active").classList.remove("active");
document.querySelector(`#img_thumbnails > [data-index='${parseInt(dataIdx)}']`).classList.add("active");
};
let thumbnailClick = function(dataIdx) {
document.querySelector("#img_thumbnails > img.active").classList.remove("active");
document.querySelector(`#img_thumbnails > [data-index='${parseInt(dataIdx)}']`).classList.add("active");
document.querySelector(`#img_slides > img.active`).classList.remove("active");
document.querySelector(`#img_slides > [data-index='${parseInt(dataIdx)}']`).classList.add("active");
};
leftArrow.addEventListener("click", function() {
const currentActive = document.querySelector("#img_slides > img.active");
const prevSibling = currentActive.previousElementSibling;
currentActive.classList.remove("active");
if (prevSibling) {
// Select Prev Image
prevSibling.classList.add("active");
applyThumbnail(prevSibling.getAttribute("data-index"));
} else {
// Select Last Image
const last = document.querySelector("#img_slides > :last-child");
last.classList.add("active");
applyThumbnail(last.getAttribute("data-index"));
}
});
rightArrow.addEventListener("click", function() {
const currentActive = document.querySelector("#img_slides > img.active");
const nextSibling = currentActive.nextElementSibling;
currentActive.classList.remove("active");
if (nextSibling) {
// Select Next Image
nextSibling.classList.add("active");
applyThumbnail(nextSibling.getAttribute("data-index"));
} else {
// Select First Image
const first = document.querySelector("#img_slides > :first-child");
first.classList.add("active");
applyThumbnail(first.getAttribute("data-index"));
}
});
document.querySelectorAll(".imgThumbnail").forEach(function(elem) {
elem.addEventListener("click", function() {
thumbnailClick(this.getAttribute("data-index"));
});
});
/* ========== end ========== IMAGE SANDBOX SCRIPT (MODAL) ========== end ========== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #bbbbbb;
height: 100vh;
display: grid;
align-items: center;
justify-items: center;
font-family: "Helvetica";
}

/* ========== begin ========== MODAL INITIALISATION STYLING ========== begin ========== */
div#sandbox_modal {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #000d;
display: grid;
/*align-items: center;*/
justify-items: center;
opacity: 0;
visibility: hidden;
transition-property: opacity visibility;
transition-duration: 750ms;
transition-timing-function: ease;
}
div#sandbox_modal.sandbox_modal_on {
opacity: 1;
visibility: visible;
}
div#sandbox_modal div#sandbox_modal_body {
height: 100%;
width: fit-content;
background-color: #ddddddcc;
display: grid;
align-items: center;
}

/* ========== end ========== MODAL INITIALISATION STYLING ========== end ========== */

/* ========== begin ========== IMAGE SANDBOX STYLING ========== begin ========== */
div#product_img_bx {}
img#featured {
width: 400px;
height: 250px;
cursor: zoom-in;
border: 2px solid #ffffff;
}
div#slide_wrapper {
width: inherit;
display: flex;
justify-content: space-between;
height: fit-content;
margin-top: 10px;
}
div#slider {
width: 270px;
display: flex;
height: fit-content;
flex-wrap: nowrap;
overflow: hidden;
/*background-color: #444444;*/
}
img.thumbnail {
min-width: 60px;
height: 40px;
cursor: pointer;
opacity: 0.5;
border: 2px solid #ffffff;
}
img.thumbnail:not(:last-child) {
margin-right: 10px;
}
img.thumbnail:hover,
img.thumbnail.active {
opacity: 1;
}
div#slide_wrapper>div.slide_arrow {
height: 30px;
width: 30px;
align-self: center;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background-color: #000;
font-size: 15px;
border-radius: 50%;
}
div#slide_wrapper>div.slide_arrow:hover {
cursor: pointer;
}

/* this CSS line applies changes with the JS script */
div.slide_arrow.changes {
visibility: hidden;
}

/* ========== end ========== IMAGE SANDBOX STYLING ========== end ========== */

/* ========== begin ========== IMAGE SANDBOX (MODAL) STYLING ========== begin ========== */
div#img_slides_wrapper {
width: 400px;
height: 250px;
display: flex;
border: 2px solid #efefef;
justify-content: space-between;
margin-bottom: 20px;
position: relative;
}
div#img_slides_wrapper div#img_slides {
overflow: hidden;
display: flex;
background-color: #0ff3;
}
img.imgSlide {
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
position: absolute;
top: 0;
left: 0;
transition-property: opacity;
transition-duration: 750ms;
transition-timing-function: ease;
}
img.imgSlide.active {
opacity: 1;
}
img.imgThumbnail {
width: 50px;
}
div.img_slide_arrow {
color: transparent;
height: inherit;
width: 40px;
position: absolute;
z-index: 2;
}
div.img_slide_arrow:hover {
cursor: pointer;
}
div.img_slide_arrow:hover>span {
font-size: 20px;
color: #ffffff;
height: 40px;
width: 40px;
display: grid;
justify-items: center;
align-items: center;
background-color: #00000033;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
div.img_slide_arrow#img_slide_right {
right: 0;
}
div.img_slide_arrow#img_slide_left span {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
div.img_slide_arrow#img_slide_right span {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
right: 0;
}
div#img_thumbnails {
width: 400px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
div#img_thumbnails img.imgThumbnail {
background-color: #888;
margin: 5px;
}
div#img_thumbnails img.imgThumbnail:hover {
cursor: pointer;
}
div#img_thumbnails img.imgThumbnail.active {
border: 2px solid #0ff;
}

/* ========== end ========== IMAGE SANDBOX (MODAL) STYLING ========== end ========== */
<!-- ========== begin ========== IMAGE SANDBOX ========== begin ========== -->
<div id="product_img_bx">
<img src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" id="featured" />
<div id="slide_wrapper">
<div id="slide_left" class="slide_arrow"><span>&#10094;</span></div>
<div id="slider">
<img src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail active" />
<img src="https://images.pexels.com/photos/783243/pexels-photo-783243.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail" />
<img src="https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail" />
<img src="https://images.pexels.com/photos/428340/pexels-photo-428340.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail" />
<img src="https://images.pexels.com/photos/9558760/pexels-photo-9558760.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail" />
<img src="https://images.pexels.com/photos/5701644/pexels-photo-5701644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail" />
<img src="https://images.pexels.com/photos/1639729/pexels-photo-1639729.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail" />
<img src="https://images.pexels.com/photos/4965343/pexels-photo-4965343.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail" />
</div>
<div id="slide_right" class="slide_arrow"><span>&#10095;</span></div>
</div>
</div>
<!-- ========== end ========== IMAGE SANDBOX ========== end ========== -->
<!-- ========== begin ========== IMAGE SANDBOX (MODAL) ========== begin ========== -->
<div id="sandbox_modal">
<div id="sandbox_modal_body">
<div id="main_wrapper">
<div id="img_slides_wrapper">
<div id="img_slide_left" class="img_slide_arrow"><span>&#10094;</span></div>
<div id="img_slides">
<img data-index="0" class="imgSlide active" src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
<img data-index="1" class="imgSlide" src="https://images.pexels.com/photos/783243/pexels-photo-783243.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
<img data-index="2" class="imgSlide" src="https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
<img data-index="3" class="imgSlide" src="https://images.pexels.com/photos/428340/pexels-photo-428340.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
<img data-index="4" class="imgSlide" src="https://images.pexels.com/photos/9558760/pexels-photo-9558760.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
<img data-index="5" class="imgSlide" src="https://images.pexels.com/photos/5701644/pexels-photo-5701644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
<img data-index="6" class="imgSlide" src="https://images.pexels.com/photos/1639729/pexels-photo-1639729.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
<img data-index="7" class="imgSlide" src="https://images.pexels.com/photos/4965343/pexels-photo-4965343.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
</div>
<div id="img_slide_right" class="img_slide_arrow"><span>&#10095;</span></div>
</div>
<div id="img_thumbnails">
<img data-index="0" class="imgThumbnail active" src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
<img data-index="1" class="imgThumbnail" src="https://images.pexels.com/photos/783243/pexels-photo-783243.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
<img data-index="2" class="imgThumbnail" src="https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
<img data-index="3" class="imgThumbnail" src="https://images.pexels.com/photos/428340/pexels-photo-428340.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
<img data-index="4" class="imgThumbnail" src="https://images.pexels.com/photos/9558760/pexels-photo-9558760.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
<img data-index="5" class="imgThumbnail" src="https://images.pexels.com/photos/5701644/pexels-photo-5701644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
<img data-index="6" class="imgThumbnail" src="https://images.pexels.com/photos/1639729/pexels-photo-1639729.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
<img data-index="7" class="imgThumbnail" src="https://images.pexels.com/photos/4965343/pexels-photo-4965343.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
</div>
</div>
</div>
</div>
<!-- ========== end ========== IMAGE SANDBOX (MODAL) ========== end ========== -->

如果有人能帮我，我将非常感激。

从HTML中删除data-index，并由javascript中的//init部分生成。

我的javascript很乱。但是如果它工作，它工作.

/* ========== begin ========== MODAL INITIALISATION SCRIPT ========== begin ========== */
let modalBtn = document.getElementById("featured");
let modal = document.getElementById("sandbox_modal");
modalBtn.addEventListener("click", function () {
var idx = this.getAttribute("data-index");
modal.classList.add("sandbox_modal_on");
document.querySelector(`#img_slides > .active`).classList.remove("active");
document
.querySelector(`#img_slides > :nth-child(${idx})`)
.classList.add("active");
document.querySelector(".imgThumbnail.active")?.classList.remove("active");
document
.querySelector(`#img_thumbnails > :nth-child(${idx})`)
.classList.add("active");
});
window.onclick = (e) => {
if (e.target.matches("#sandbox_modal")) {
modal.classList.remove("sandbox_modal_on");
}
};
/* ========== end ========== MODAL INITIALISATION SCRIPT ========== end ========== */
/* ========== begin ========== IMAGE SANDBOX SCRIPT (DEFAULT) ========== begin ========== */
let thumbnails = document.getElementsByClassName("thumbnail");
let activeImages = document.getElementsByClassName("active");
for (var i = thumbnails.length - 1; i >= 0; i--) {
let thumbnail = thumbnails[i];
thumbnail.addEventListener("mouseenter", function () {
if (activeImages.length > 0) {
activeImages[0].classList.remove("active");
}
this.classList.add("active");
document.getElementById("featured").src = this.src;
document
.getElementById("featured")
.setAttribute("data-index", this.getAttribute("data-index"));
});
}
/* eventListener to run the script at the start and hdie left button automatically */
window.addEventListener("load", change);
var slidesAmount = document.querySelectorAll("#slider .thumbnail").length;
var slidesPerScreen = 4;
var currentSlideCounter = 1;
var maxSlideCounter = slidesAmount - slidesPerScreen + 1;
let buttonLeft = document.getElementById("slide_left");
let buttonRight = document.getElementById("slide_right");
let container = document.getElementById("slider");
buttonLeft.addEventListener("click", function () {
container.scrollLeft -= 70;
if (currentSlideCounter > 1) {
currentSlideCounter -= 1;
}
change();
});
buttonRight.addEventListener("click", function () {
container.scrollLeft += 70;
if (currentSlideCounter < maxSlideCounter) {
currentSlideCounter += 1;
}
change();
});
function change() {
switch (currentSlideCounter) {
case 1:
document.querySelector("#slide_left").classList.add("changes");
if (maxSlideCounter == 2) {
document.querySelector("#slide_right").classList.remove("changes");
}
break;
case maxSlideCounter:
document.querySelector("#slide_right").classList.add("changes");
if (maxSlideCounter == 2) {
document.querySelector("#slide_left").classList.remove("changes");
}
break;
default:
document
.querySelectorAll(".slide_arrow")
.forEach((el) => el.classList.remove("changes"));
break;
}
/* this fixes the issue you addressed */
if (slidesAmount <= slidesPerScreen) {
document
.querySelectorAll(".slide_arrow")
.forEach((el) => el.classList.add("changes"));
}
}
/* ========== end ========== IMAGE SANDBOX SCRIPT (DEFAULT) ========== end ========== */
/* ========== begin ========== IMAGE SANDBOX SCRIPT (MODAL) ========== begin ========== */
let leftArrow = document.querySelector("#img_slide_left");
let rightArrow = document.querySelector("#img_slide_right");
let slidesContainer = document.querySelector("#img_slides");
let applyThumbnail = function (dataIdx) {
document
.querySelector("#img_thumbnails > img.active")
.classList.remove("active");
document
.querySelector(`#img_thumbnails > [data-index='${parseInt(dataIdx)}']`)
.classList.add("active");
};
let thumbnailClick = function (dataIdx) {
document
.querySelector("#img_thumbnails > img.active")
?.classList.remove("active");
document
.querySelector(`#img_thumbnails > [data-index='${parseInt(dataIdx)}']`)
.classList.add("active");
document.querySelector(`#img_slides > img.active`).classList.remove("active");
document
.querySelector(`#img_slides > [data-index='${parseInt(dataIdx)}']`)
.classList.add("active");
};
leftArrow.addEventListener("click", function () {
const currentActive = document.querySelector("#img_slides > img.active");
const prevSibling = currentActive.previousElementSibling;
currentActive.classList.remove("active");
if (prevSibling) {
// Select Prev Image
prevSibling.classList.add("active");
applyThumbnail(prevSibling.getAttribute("data-index"));
} else {
// Select Last Image
const last = document.querySelector("#img_slides > :last-child");
last.classList.add("active");
applyThumbnail(last.getAttribute("data-index"));
}
});
rightArrow.addEventListener("click", function () {
const currentActive = document.querySelector("#img_slides > img.active");
const nextSibling = currentActive.nextElementSibling;
currentActive.classList.remove("active");
if (nextSibling) {
// Select Next Image
nextSibling.classList.add("active");
applyThumbnail(nextSibling.getAttribute("data-index"));
} else {
// Select First Image
const first = document.querySelector("#img_slides > :first-child");
first.classList.add("active");
applyThumbnail(first.getAttribute("data-index"));
}
});
document.querySelectorAll(".imgThumbnail").forEach(function (elem) {
elem.addEventListener("click", function () {
thumbnailClick(this.getAttribute("data-index"));
});
});
/* ========== end ========== IMAGE SANDBOX SCRIPT (MODAL) ========== end ========== */
// Init
var itemCount = document.querySelectorAll("#img_slides > img").length;
for (var i = 1; i <= itemCount; i++) {
document
.querySelector(`#slider :nth-child(${i})`)
.setAttribute("data-index", i);
document
.querySelector(`#img_slides :nth-child(${i})`)
.setAttribute("data-index", i);
document
.querySelector(`#img_thumbnails :nth-child(${i})`)
.setAttribute("data-index", i);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #bbbbbb;
height: 100vh;
display: grid;
align-items: center;
justify-items: center;
font-family: "Helvetica";
}
/* ========== begin ========== MODAL INITIALISATION STYLING ========== begin ========== */
div#sandbox_modal {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #000d;
display: grid;
/*align-items: center;*/
justify-items: center;
opacity: 0;
visibility: hidden;
transition-property: opacity visibility;
transition-duration: 750ms;
transition-timing-function: ease;
}
div#sandbox_modal.sandbox_modal_on {
opacity: 1;
visibility: visible;
}
div#sandbox_modal div#sandbox_modal_body {
height: 100%;
width: fit-content;
background-color: #ddddddcc;
display: grid;
align-items: center;
}
/* ========== end ========== MODAL INITIALISATION STYLING ========== end ========== */
/* ========== begin ========== IMAGE SANDBOX STYLING ========== begin ========== */
div#product_img_bx {
}
img#featured {
width: 400px;
height: 250px;
cursor: zoom-in;
border: 2px solid #ffffff;
}
div#slide_wrapper {
width: inherit;
display: flex;
justify-content: space-between;
height: fit-content;
margin-top: 10px;
}
div#slider {
width: 270px;
display: flex;
height: fit-content;
flex-wrap: nowrap;
overflow: hidden;
/*background-color: #444444;*/
}
img.thumbnail {
min-width: 60px;
height: 40px;
cursor: pointer;
opacity: 0.5;
border: 2px solid #ffffff;
}
img.thumbnail:not(:last-child) {
margin-right: 10px;
}
img.thumbnail:hover,
img.thumbnail.active {
opacity: 1;
}
div#slide_wrapper > div.slide_arrow {
height: 30px;
width: 30px;
align-self: center;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background-color: #000;
font-size: 15px;
border-radius: 50%;
}
div#slide_wrapper > div.slide_arrow:hover {
cursor: pointer;
}
/* this CSS line applies changes with the JS script */
div.slide_arrow.changes {
visibility: hidden;
}
/* ========== end ========== IMAGE SANDBOX STYLING ========== end ========== */
/* ========== begin ========== IMAGE SANDBOX (MODAL) STYLING ========== begin ========== */
div#img_slides_wrapper {
width: 400px;
height: 250px;
display: flex;
border: 2px solid #efefef;
justify-content: space-between;
margin-bottom: 20px;
position: relative;
}
div#img_slides_wrapper div#img_slides {
overflow: hidden;
display: flex;
background-color: #0ff3;
}
img.imgSlide {
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
position: absolute;
top: 0;
left: 0;
transition-property: opacity;
transition-duration: 750ms;
transition-timing-function: ease;
}
img.imgSlide.active {
opacity: 1;
}
img.imgThumbnail {
width: 50px;
}
div.img_slide_arrow {
color: transparent;
height: inherit;
width: 40px;
position: absolute;
z-index: 2;
}
div.img_slide_arrow:hover {
cursor: pointer;
}
div.img_slide_arrow:hover > span {
font-size: 20px;
color: #ffffff;
height: 40px;
width: 40px;
display: grid;
justify-items: center;
align-items: center;
background-color: #00000033;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
div.img_slide_arrow#img_slide_right {
right: 0;
}
div.img_slide_arrow#img_slide_left span {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
div.img_slide_arrow#img_slide_right span {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
right: 0;
}
div#img_thumbnails {
width: 400px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
div#img_thumbnails img.imgThumbnail {
background-color: #888;
margin: 5px;
}
div#img_thumbnails img.imgThumbnail:hover {
cursor: pointer;
}
div#img_thumbnails img.imgThumbnail.active {
border: 2px solid #0ff;
}
/* ========== end ========== IMAGE SANDBOX (MODAL) STYLING ========== end ========== */
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<!-- ========== begin ========== IMAGE SANDBOX ========== begin ========== -->
<div id="product_img_bx">
<img
src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt=""
id="featured"
data-index="0"
/>
<div id="slide_wrapper">
<div id="slide_left" class="slide_arrow"><span>&#10094;</span></div>
<div id="slider">
<img
src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt=""
class="thumbnail active"
/>
<img
src="https://images.pexels.com/photos/783243/pexels-photo-783243.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt=""
class="thumbnail"
/>
<img
src="https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt=""
class="thumbnail"
/>
<img
src="https://images.pexels.com/photos/428340/pexels-photo-428340.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt=""
class="thumbnail"
/>
<img
src="https://images.pexels.com/photos/9558760/pexels-photo-9558760.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt=""
class="thumbnail"
/>
<img
src="https://images.pexels.com/photos/5701644/pexels-photo-5701644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt=""
class="thumbnail"
/>
<img
src="https://images.pexels.com/photos/1639729/pexels-photo-1639729.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt=""
class="thumbnail"
/>
<img
src="https://images.pexels.com/photos/4965343/pexels-photo-4965343.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt=""
class="thumbnail"
/>
</div>
<div id="slide_right" class="slide_arrow"><span>&#10095;</span></div>
</div>
</div>
<!-- ========== end ========== IMAGE SANDBOX ========== end ========== -->
<!-- ========== begin ========== IMAGE SANDBOX (MODAL) ========== begin ========== -->
<div id="sandbox_modal">
<div id="sandbox_modal_body">
<div id="main_wrapper">
<div id="img_slides_wrapper">
<div id="img_slide_left" class="img_slide_arrow">
<span>&#10094;</span>
</div>
<div id="img_slides">
<img
class="imgSlide active"
src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt=""
/>
<img
class="imgSlide"
src="https://images.pexels.com/photos/783243/pexels-photo-783243.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt=""
/>
<img
class="imgSlide"
src="https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt=""
/>
<img
class="imgSlide"
src="https://images.pexels.com/photos/428340/pexels-photo-428340.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt=""
/>
<img
class="imgSlide"
src="https://images.pexels.com/photos/9558760/pexels-photo-9558760.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt=""
/>
<img
class="imgSlide"
src="https://images.pexels.com/photos/5701644/pexels-photo-5701644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt=""
/>
<img
class="imgSlide"
src="https://images.pexels.com/photos/1639729/pexels-photo-1639729.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt=""
/>
<img
class="imgSlide"
src="https://images.pexels.com/photos/4965343/pexels-photo-4965343.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt=""
/>
</div>
<div id="img_slide_right" class="img_slide_arrow">
<span>&#10095;</span>
</div>
</div>
<div id="img_thumbnails">
<img
class="imgThumbnail active"
src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt=""
/>
<img
class="imgThumbnail"
src="https://images.pexels.com/photos/783243/pexels-photo-783243.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt=""
/>
<img
class="imgThumbnail"
src="https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt=""
/>
<img
class="imgThumbnail"
src="https://images.pexels.com/photos/428340/pexels-photo-428340.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt=""
/>
<img
class="imgThumbnail"
src="https://images.pexels.com/photos/9558760/pexels-photo-9558760.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt=""
/>
<img
class="imgThumbnail"
src="https://images.pexels.com/photos/5701644/pexels-photo-5701644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt=""
/>
<img
class="imgThumbnail"
src="https://images.pexels.com/photos/1639729/pexels-photo-1639729.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt=""
/>
<img
class="imgThumbnail"
src="https://images.pexels.com/photos/4965343/pexels-photo-4965343.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt=""
/>
</div>
</div>
</div>
</div>
<!-- ========== end ========== IMAGE SANDBOX (MODAL) ========== end ========== -->
<script src="./script.js"></script>
</body>
</html>

感谢David Y.他鼓励我尝试自己解决问题。

在向他(和StackOverflow)寻求帮助的时候，我坦率地认为他不会很快回复，所以在那段时间里，我开始整理解决这个问题的方法。显然，解决这个问题的方法已经嵌入了David Y.曾经贴在我上一个问题的答案中。

首先，我创建了一个名为& thumbnailHover">的新函数，将必要的选择器复制到该函数中，在底部调用该函数，就像他所做的那样，并将HTML数据索引放置到第一个沙盒的缩略图

img标签中。

/* ========== begin ========== MODAL INITIALISATION SCRIPT ========== begin ========== */
let modalBtn = document.getElementById('featured')
let modal = document.getElementById('sandbox_modal')
modalBtn.addEventListener('click', () => {
modal.classList.add('sandbox_modal_on')
})
window.onclick = (e) => {
if (e.target.matches('#sandbox_modal')) {
modal.classList.remove('sandbox_modal_on')
}
}
/* ========== end ========== MODAL INITIALISATION SCRIPT ========== end ========== */
/* ========== begin ========== IMAGE SANDBOX SCRIPT (DEFAULT) ========== begin ========== */
let thumbnails = document.getElementsByClassName('thumbnail')
let activeImages = document.getElementsByClassName('active')
for (var i = thumbnails.length - 1; i >= 0; i--) {
let thumbnail = thumbnails[i]
thumbnail.addEventListener('mouseenter', function() {
if (activeImages.length > 0) {
activeImages[0].classList.remove('active')
}
this.classList.add('active')
document.getElementById('featured').src = this.src
})
}
/* eventListener to run the script at the start and hide left button automatically */
window.addEventListener("load", change);
var slidesAmount = document.querySelectorAll('#slider .thumbnail').length;
var slidesPerScreen = 4;
var currentSlideCounter = 1;
var maxSlideCounter = slidesAmount - slidesPerScreen + 1;
let buttonLeft = document.getElementById('slide_left')
let buttonRight = document.getElementById('slide_right')
let container = document.getElementById('slider')
buttonLeft.addEventListener('click', function() {
container.scrollLeft -= 70;
if (currentSlideCounter > 1) {
currentSlideCounter -= 1;
}
change();
})
buttonRight.addEventListener('click', function() {
container.scrollLeft += 70;
if (currentSlideCounter < maxSlideCounter) {
currentSlideCounter += 1;
}
change();
})
function change() {
switch (currentSlideCounter) {
case 1:
document.querySelector('#slide_left').classList.add('changes');
if (maxSlideCounter == 2) {
document.querySelector('#slide_right').classList.remove('changes');
}
break;
case maxSlideCounter:
document.querySelector('#slide_right').classList.add('changes');
if (maxSlideCounter == 2) {
document.querySelector('#slide_left').classList.remove('changes');
}
break;
default:
document.querySelectorAll('.slide_arrow').forEach(el => el.classList.remove('changes'));
break;
}
if (slidesAmount <= slidesPerScreen) {
document.querySelectorAll('.slide_arrow').forEach(el => el.classList.add('changes'));
}
}
/* ========== end ========== IMAGE SANDBOX SCRIPT (DEFAULT) ========== end ========== */
/* ========== begin ========== IMAGE SANDBOX (MODAL) SCRIPT ========== begin ========== */
let leftArrow = document.querySelector("#img_slide_left");
let rightArrow = document.querySelector("#img_slide_right");
let slidesContainer = document.querySelector("#img_slides");
let applyThumbnail = function(dataIdx) {
document.querySelector("#img_thumbnails > img.active").classList.remove("active");
document.querySelector(`#img_thumbnails > [data-index='${parseInt(dataIdx)}']`).classList.add("active");
};
let thumbnailHover = function(dataIdx) {
document.querySelector("#img_thumbnails > img.active").classList.remove("active");
document.querySelector(`#img_thumbnails > [data-index='${parseInt(dataIdx)}']`).classList.add("active");
document.querySelector(`#img_slides > img.active`).classList.remove("active");
document.querySelector(`#img_slides > [data-index='${parseInt(dataIdx)}']`).classList.add("active");
document.querySelector(`#slider > img.active`).classList.remove("active");
document.querySelector(`#slider > [data-index='${parseInt(dataIdx)}']`).classList.add("active");
};
let thumbnailClick = function(dataIdx) {
document.querySelector("#img_thumbnails > img.active").classList.remove("active");
document.querySelector(`#img_thumbnails > [data-index='${parseInt(dataIdx)}']`).classList.add("active");
document.querySelector(`#img_slides > img.active`).classList.remove("active");
document.querySelector(`#img_slides > [data-index='${parseInt(dataIdx)}']`).classList.add("active");
};
leftArrow.addEventListener("click", function() {
const currentActive = document.querySelector("#img_slides > img.active");
const prevSibling = currentActive.previousElementSibling;
currentActive.classList.remove("active");
if (prevSibling) {
// Select Prev Image
prevSibling.classList.add("active");
applyThumbnail(prevSibling.getAttribute("data-index"));
} else {
// Select Last Image
const last = document.querySelector("#img_slides > :last-child");
last.classList.add("active");
applyThumbnail(last.getAttribute("data-index"));
}
});
rightArrow.addEventListener("click", function() {
const currentActive = document.querySelector("#img_slides > img.active");
const nextSibling = currentActive.nextElementSibling;
currentActive.classList.remove("active");
if (nextSibling) {
// Select Next Image
nextSibling.classList.add("active");
applyThumbnail(nextSibling.getAttribute("data-index"));
} else {
// Select First Image
const first = document.querySelector("#img_slides > :first-child");
first.classList.add("active");
applyThumbnail(first.getAttribute("data-index"));
}
});
document.querySelectorAll("#img_thumbnails .imgThumbnail").forEach(function(elem) {
elem.addEventListener("click", function() {
thumbnailClick(this.getAttribute("data-index"));
});
});
document.querySelectorAll("#slider .thumbnail").forEach(function(elem) {
elem.addEventListener("mouseenter", function() {
thumbnailHover(this.getAttribute("data-index"));
});
});
/* ========== end ========== IMAGE SANDBOX (MODAL) SCRIPT ========== end ========== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #bbbbbb;
height: 100vh;
display: grid;
align-items: center;
justify-items: center;
font-family: "Helvetica";
}

/* ========== begin ========== MODAL INITIALISATION STYLING ========== begin ========== */
div#sandbox_modal {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #000d;
display: grid;
/*align-items: center;*/
justify-items: center;
opacity: 0;
visibility: hidden;
transition-property: opacity visibility;
transition-duration: 750ms;
transition-timing-function: ease;
}
div#sandbox_modal.sandbox_modal_on {
opacity: 1;
visibility: visible;
}
div#sandbox_modal div#sandbox_modal_body {
height: 100%;
width: fit-content;
background-color: #ddddddcc;
display: grid;
align-items: center;
}

/* ========== end ========== MODAL INITIALISATION STYLING ========== end ========== */

/* ========== begin ========== IMAGE SANDBOX STYLING ========== begin ========== */
div#product_img_bx {}
img#featured {
width: 400px;
height: 250px;
cursor: zoom-in;
border: 2px solid #ffffff;
}
div#slide_wrapper {
width: inherit;
display: flex;
justify-content: space-between;
height: fit-content;
margin-top: 10px;
}
div#slider {
width: 270px;
display: flex;
height: fit-content;
flex-wrap: nowrap;
overflow: hidden;
/*background-color: #444444;*/
}
img.thumbnail {
min-width: 60px;
height: 40px;
cursor: pointer;
opacity: 0.5;
border: 2px solid #ffffff;
}
img.thumbnail:not(:last-child) {
margin-right: 10px;
}
img.thumbnail:hover,
img.thumbnail.active {
opacity: 1;
}
div#slide_wrapper>div.slide_arrow {
height: 30px;
width: 30px;
align-self: center;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background-color: #000;
font-size: 15px;
border-radius: 50%;
}
div#slide_wrapper>div.slide_arrow:hover {
cursor: pointer;
}

/* this CSS line applies changes with the JS script */
div.slide_arrow.changes {
visibility: hidden;
}

/* ========== end ========== IMAGE SANDBOX STYLING ========== end ========== */

/* ========== begin ========== IMAGE SANDBOX (MODAL) STYLING ========== begin ========== */
div#img_slides_wrapper {
width: 400px;
height: 250px;
display: flex;
border: 2px solid #efefef;
justify-content: space-between;
margin-bottom: 20px;
position: relative;
}
div#img_slides_wrapper div#img_slides {
overflow: hidden;
display: flex;
background-color: #0ff3;
}
img.imgSlide {
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
position: absolute;
top: 0;
left: 0;
transition-property: opacity;
transition-duration: 750ms;
transition-timing-function: ease;
}
img.imgSlide.active {
opacity: 1;
}
img.imgThumbnail {
width: 50px;
}
div.img_slide_arrow {
color: transparent;
height: inherit;
width: 40px;
position: absolute;
z-index: 2;
}
div.img_slide_arrow:hover {
cursor: pointer;
}
div.img_slide_arrow:hover>span {
font-size: 20px;
color: #ffffff;
height: 40px;
width: 40px;
display: grid;
justify-items: center;
align-items: center;
background-color: #00000033;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
div.img_slide_arrow#img_slide_right {
right: 0;
}
div.img_slide_arrow#img_slide_left span {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
div.img_slide_arrow#img_slide_right span {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
right: 0;
}
div#img_thumbnails {
width: 400px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
div#img_thumbnails img.imgThumbnail {
background-color: #888;
margin: 5px;
}
div#img_thumbnails img.imgThumbnail:hover {
cursor: pointer;
}
div#img_thumbnails img.imgThumbnail.active {
border: 2px solid #0ff;
}

/* ========== end ========== IMAGE SANDBOX (MODAL) STYLING ========== end ========== */
<!-- ========== begin ========== IMAGE SANDBOX ========== begin ========== -->
<div id="product_img_bx">
<img src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" id="featured" />
<div id="slide_wrapper">
<div id="slide_left" class="slide_arrow"><span>&#10094;</span></div>
<div id="slider">
<img data-index="0" src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail active" />
<img data-index="1" src="https://images.pexels.com/photos/783243/pexels-photo-783243.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail" />
<img data-index="2" src="https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail" />
<img data-index="3" src="https://images.pexels.com/photos/428340/pexels-photo-428340.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail" />
<img data-index="4" src="https://images.pexels.com/photos/9558760/pexels-photo-9558760.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail" />
<img data-index="5" src="https://images.pexels.com/photos/5701644/pexels-photo-5701644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail" />
<img data-index="6" src="https://images.pexels.com/photos/1639729/pexels-photo-1639729.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail" />
<img data-index="7" src="https://images.pexels.com/photos/4965343/pexels-photo-4965343.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail" />
</div>
<div id="slide_right" class="slide_arrow"><span>&#10095;</span></div>
</div>
</div>
<!-- ========== end ========== IMAGE SANDBOX ========== end ========== -->
<!-- ========== begin ========== IMAGE SANDBOX (MODAL) ========== begin ========== -->
<div id="sandbox_modal">
<div id="sandbox_modal_body">
<div id="main_wrapper">
<div id="img_slides_wrapper">
<div id="img_slide_left" class="img_slide_arrow"><span>&#10094;</span></div>
<div id="img_slides">
<img data-index="0" class="imgSlide active" src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
<img data-index="1" class="imgSlide" src="https://images.pexels.com/photos/783243/pexels-photo-783243.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
<img data-index="2" class="imgSlide" src="https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
<img data-index="3" class="imgSlide" src="https://images.pexels.com/photos/428340/pexels-photo-428340.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
<img data-index="4" class="imgSlide" src="https://images.pexels.com/photos/9558760/pexels-photo-9558760.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
<img data-index="5" class="imgSlide" src="https://images.pexels.com/photos/5701644/pexels-photo-5701644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
<img data-index="6" class="imgSlide" src="https://images.pexels.com/photos/1639729/pexels-photo-1639729.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
<img data-index="7" class="imgSlide" src="https://images.pexels.com/photos/4965343/pexels-photo-4965343.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
</div>
<div id="img_slide_right" class="img_slide_arrow"><span>&#10095;</span></div>
</div>
<div id="img_thumbnails">
<img data-index="0" class="imgThumbnail active" src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
<img data-index="1" class="imgThumbnail" src="https://images.pexels.com/photos/783243/pexels-photo-783243.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
<img data-index="2" class="imgThumbnail" src="https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
<img data-index="3" class="imgThumbnail" src="https://images.pexels.com/photos/428340/pexels-photo-428340.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
<img data-index="4" class="imgThumbnail" src="https://images.pexels.com/photos/9558760/pexels-photo-9558760.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
<img data-index="5" class="imgThumbnail" src="https://images.pexels.com/photos/5701644/pexels-photo-5701644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
<img data-index="6" class="imgThumbnail" src="https://images.pexels.com/photos/1639729/pexels-photo-1639729.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
<img data-index="7" class="imgThumbnail" src="https://images.pexels.com/photos/4965343/pexels-photo-4965343.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
</div>
</div>
</div>
</div>
<!-- ========== end ========== IMAGE SANDBOX (MODAL) ========== end ========== -->

Thank you David Y.

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium