#jquery #lightbox #image-gallery #image-slider
Вопрос:
У меня настроена галерея изображений, и я пытаюсь добиться того, чтобы, когда пользователь нажимает на изображение в галерее, открывалось модальное окно лайтбокса, в котором пользователь может прокручивать галерею с помощью кнопок «Следующий» и «предыдущий» в модальном окне. Проблема, с которой я сталкиваюсь, заключается в том, что я не могу заставить jQuery загрузить выбранное изображение.
Все еще новичок в кодировании, поэтому заранее благодарю вас за любую информацию, которую вы можете предоставить 🙂
const images = document.querySelectorAll('.gallery-container .img-fluid');
let i = 0;
$( document ).ready(function() {
$('.lightbox-trigger').click(function(e) {
e.preventDefault();
$('.gallery-container').addClass('lightbox-active');
$('#lightbox').removeClass('lightbox-hidden');
for(i = 0; i<images.length; i ) {
$(".lightbox-image").attr('src', 'images[i]');
}
$('.prev').on('click', function() {
imageIndex = (imageIndex images.length -1) % (images.length);
$("#image").attr('src', images[i]);
})
$(".next").on("click", function(){
imageIndex = (imageIndex 1) % (images.length);
$("#image").attr('src', images[i]);
});
});
$('.closeBtn').click(function() {
// $('#lightbox').hide();
$('.gallery-container').removeClass('lightbox-active');
$('#lightbox').addClass('lightbox-hidden');
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: black;
}
body {
color: white;
font-family: 'Montserrat';
}
/* ///////////////////// NAVBAR //////////////////////// */
.navbar-style {
box-shadow: 0 4px 2px -2px #333;
}
.nav-logo {
width: 10%;
}
.nav-custom img {
width: 64px;
}
.icon-bar {
background: white;
}
/* ///////////////////// NAVBAR //////////////////////// */
/* ///////////////////// MAIN AREA //////////////////////// */
.slogan h1 {
font-weight: 200;
font-size: 1.2rem;
margin-top: 2rem;
margin-left: 2rem;
}
.background-img img {
width: 80%;
}
.button {
margin-top: 2rem;
margin-left: 2rem;
background-color: black;
}
.blurb {
font-family: 'League Script', cursive;
font-weight: 100;
margin-top: 2rem;
margin-left: 2rem;
}
/* ///////////////////// FRONT GALLERY //////////////////////// */
.gallery-container {
display: flex;
justify-content: center;
border: solid 1px white;
margin: 0, auto;
}
.gallery-container img:hover {
transform: scale(1.1);
}
.flex-column {
justify-content: space-between; /* have images appear as a four sided block */
max-width: 250px;
}
/* ---------- LIGHTBOX ---------- */
#lightbox {
position: fixed;
/* ^keeps lightbox window in the current viewport */
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
background: rgba(0,0,0,.7);
}
/* LIGHTBOX CLOSE BUTTON */
#lightbox .closeBtn {
text-align: right;
margin-right: 20px;
font-size: 3rem;
}
.closeBtn {
cursor: pointer;
}
/* LIGHTBOX IMAGE */
#lightbox img {
box-shadow: 0 0 25px #111;
max-width: 300px;
}
#content {
display: flex;
justify-content: center;
}
#content img{
position: fixed;
top: 0;
margin-top: 4rem;
width: 100%;
}
/* BLUR BACKGROUND WHEN LIGHTBOX IS ACTIVE */
.lightbox-active {
filter: blur(5px);
}
/* LIGHTBOX ARROWS */
.arrowBTN {
position: absolute;
text-decoration: none;
color: white;
cursor: pointer;
font-size: 2rem;
text-align: center;
margin-top: 25%;
transform: translateY(-25%);
width: 3rem;
height: 3rem;
border-radius: 50%;
background-color: rgba(255,255,255,0.5);
}
.prev {
left: 0;
margin-left: 1rem;
}
.next {
right: 0;
margin-right: 1rem;
}
#lightbox a {
text-decoration: none;
color: white;
}
#lightbox a:hover {
background-color: rgba(255,255,255, 0.2);
}
.lightbox-hidden {
display: none;
}
.lightbox-show {
opacity: 1;
}
@media screen and (min-width: 1650px) {
.flex-column {
display: flex;
justify-content: space-evenly;
}
}
img {
margin: 5px;
}
/* ///////////////////////////////////// */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="front-gallery">
<div class="container-fluid gallery-container">
<div class="d-flex flex-row">
<!-- //////// 1st COLUMN //////// -->
<div class="d-flex flex-column">
<!-- FIRST IMAGE -->
<a style="display:contents" href="https://cdn.pixabay.com/photo/2017/04/05/17/45/girl-2205813_1280.jpg" class="lightbox-trigger">
<img src="https://cdn.pixabay.com/photo/2017/04/05/17/45/girl-2205813_1280.jpg" alt="woman black and white photo" class="img-fluid image">
</a>
<!-- SECOND IMAGE -->
<a style="display:contents" href="https://cdn.pixabay.com/photo/2014/10/13/18/10/woman-487090_1280.jpg" class="lightbox-trigger">
<img src="https://cdn.pixabay.com/photo/2014/10/13/18/10/woman-487090_1280.jpg" alt="dog" class="img-fluid">
</a>
</div>
<!-- //////// 2nd COLUMN //////// -->
<div class="d-flex flex-column">
<!-- THIRD IMAGE -->
<a style="display:contents" href="https://cdn.pixabay.com/photo/2016/11/29/13/00/black-1869685_1280.jpg" class="lightbox-trigger">
<img src="https://cdn.pixabay.com/photo/2016/11/29/13/00/black-1869685_1280.jpg" alt="woman color photo" class="img-fluid">
</a>
<!-- FOURTH IMAGE -->
<a style="display:contents" href="https://cdn.pixabay.com/photo/2015/03/04/19/42/woman-659352_1280.jpg" class="lightbox-trigger">
<img src="https://cdn.pixabay.com/photo/2015/03/04/19/42/woman-659352_1280.jpg" alt="woman with tattoos" class="img-fluid">
</a>
</div>
<!-- //////// 3rd COLUMN //////// -->
<div class="d-flex flex-column">
<!-- FIFTH IMAGE -->
<a style="display:contents" href="https://cdn.pixabay.com/photo/2015/07/02/10/11/person-828630_1280.jpg" class="lightbox-trigger">
<img src="https://cdn.pixabay.com/photo/2015/07/02/10/11/person-828630_1280.jpg" alt="outline of man photo" class="img-fluid">
</a>
<!-- SIXTH IMAGE -->
<a style="display:contents" href="https://cdn.pixabay.com/photo/2017/05/27/17/52/model-2349037_1280.jpg" class="lightbox-trigger">
<img src="https://cdn.pixabay.com/photo/2017/05/27/17/52/model-2349037_1280.jpg" alt="woman under water" class="img-fluid">
</a>
</div>
<!-- //////// 4th COLUMN //////// -->
<div class="d-flex flex-column">
<!-- SEVENTH IMAGE -->
<a style="display:contents" href="https://cdn.pixabay.com/photo/2016/02/11/19/14/couple-1194312_1280.jpg" class="lightbox-trigger">
<img src="https://cdn.pixabay.com/photo/2016/02/11/19/14/couple-1194312_1280.jpg" alt="couple" class="img-fluid">
</a>
<!-- EIGHTH IMAGE -->
<a style="display:contents" href="https://cdn.pixabay.com/photo/2017/11/03/10/34/studio-2913936_1280.jpg" class="lightbox-trigger">
<img src="https://cdn.pixabay.com/photo/2017/11/03/10/34/studio-2913936_1280.jpg" alt="woman smiling" class="img-fluid">
</a>
</div>
<!-- //////// 5th COLUMN //////// -->
<div class="d-flex flex-column">
<!-- NINTH IMAGE -->
<a style="display:contents" href="https://cdn.pixabay.com/photo/2016/11/14/04/08/selfie-1822563_1280.jpg" class="lightbox-trigger">
<img src="https://cdn.pixabay.com/photo/2016/11/14/04/08/selfie-1822563_1280.jpg" alt="kids taking selfie in field" class="img-fluid">
</a>
<!-- TENTH IMAGE -->
<a style="display:contents" href="https://cdn.pixabay.com/photo/2021/04/02/12/01/woman-6144753_1280.jpg" class="lightbox-trigger">
<img src="https://cdn.pixabay.com/photo/2021/04/02/12/01/woman-6144753_1280.jpg" alt="woman with eye makeup" class="img-fluid">
</a>
</div>
<!-- //////// 6th COLUMN //////// -->
<div class="d-flex flex-column">
<!-- ELEVENTH IMAGE -->
<a style="display:contents" href="https://cdn.pixabay.com/photo/2016/10/27/03/43/radio-1773304_1280.jpg" class="lightbox-trigger">
<img src="https://cdn.pixabay.com/photo/2016/10/27/03/43/radio-1773304_1280.jpg" alt="vintage radio" class="img-fluid">
</a>
<!-- TWELFTH IMAGE -->
<a style="display:contents" href="https://cdn.pixabay.com/photo/2015/06/24/01/16/photographer-819365_1280.jpg" class="lightbox-trigger">
<img src="https://cdn.pixabay.com/photo/2015/06/24/01/16/photographer-819365_1280.jpg" alt="outdoor photographer" class="img-fluid">
</a>
</div>
<!-- //////// 7th COLUMN //////// -->
<div class="d-flex flex-column">
<!-- THITEENTH IMAGE -->
<a style="display:contents" href="https://cdn.pixabay.com/photo/2015/04/12/18/05/man-719228_1280.jpg" class="lightbox-trigger">
<img src="https://cdn.pixabay.com/photo/2015/04/12/18/05/man-719228_1280.jpg" alt="man thinking" class="img-fluid">
</a>
<!-- FOURTEENTH IMAGE -->
<a style="display:contents" href="https://cdn.pixabay.com/photo/2016/11/29/01/34/man-1866572_1280.jpg" class="lightbox-trigger">
<img src="https://cdn.pixabay.com/photo/2016/11/29/01/34/man-1866572_1280.jpg" alt="man with jacket" class="img-fluid">
</a>
</div>
</div> <!-- END FLEX ROW -->
</div> <!-- END CONTAINER -->
</section>
<!-- ////////////////////////////// -->
<div id="lightbox" class="lightbox-hidden">
<p class="closeBtn">amp;times;</p>
<div id="content">
<img class="lightbox-img" id="lightbox-image" src="https://cdn.pixabay.com/photo/2016/11/14/04/08/selfie-1822563_1280.jpg" />
</div>
<a id= "prev" class="prev arrowBTN" aria-label="previous page">amp;#10094;</a>
<a id="next" class="next arrowBTN" aria-label="next page">amp;#10095;</a>
</div>
Ответ №1:
Это то, что вы ищете?
Вы меняли i
переменную на imageIndex
переменную.
const images = document.querySelectorAll('.gallery-container .img-fluid');
let imageIndex = 0;
$(document).ready(function() {
$('.lightbox-trigger').click(function(e) {
e.preventDefault();
$('.gallery-container').addClass('lightbox-active');
$('#lightbox').removeClass('lightbox-hidden');
for (i = 0; i < images.length; i ) {
$(".lightbox-image").attr('src', 'images[i]');
}
$('.prev').on('click', function() {
imageIndex = (imageIndex images.length - 1) % (images.length);
$("#content").empty().append(images[imageIndex]);
})
$(".next").on("click", function() {
imageIndex = (imageIndex 1) % (images.length);
$("#content").empty().append(images[imageIndex]);
});
});
$('.closeBtn').click(function() {
// $('#lightbox').hide();
$('.gallery-container').removeClass('lightbox-active');
$('#lightbox').addClass('lightbox-hidden');
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: black;
}
body {
color: white;
font-family: 'Montserrat';
}
/* ///////////////////// NAVBAR //////////////////////// */
.navbar-style {
box-shadow: 0 4px 2px -2px #333;
}
.nav-logo {
width: 10%;
}
.nav-custom img {
width: 64px;
}
.icon-bar {
background: white;
}
/* ///////////////////// NAVBAR //////////////////////// */
/* ///////////////////// MAIN AREA //////////////////////// */
.slogan h1 {
font-weight: 200;
font-size: 1.2rem;
margin-top: 2rem;
margin-left: 2rem;
}
.background-img img {
width: 80%;
}
.button {
margin-top: 2rem;
margin-left: 2rem;
background-color: black;
}
.blurb {
font-family: 'League Script', cursive;
font-weight: 100;
margin-top: 2rem;
margin-left: 2rem;
}
/* ///////////////////// FRONT GALLERY //////////////////////// */
.gallery-container {
display: flex;
justify-content: center;
border: solid 1px white;
margin: 0, auto;
}
.gallery-container img:hover {
transform: scale(1.1);
}
.flex-column {
justify-content: space-between;
/* have images appear as a four sided block */
max-width: 250px;
}
/* ---------- LIGHTBOX ---------- */
#lightbox {
position: fixed;
/* ^keeps lightbox window in the current viewport */
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
background: rgba(0, 0, 0, .7);
}
/* LIGHTBOX CLOSE BUTTON */
#lightbox .closeBtn {
text-align: right;
margin-right: 20px;
font-size: 3rem;
}
.closeBtn {
cursor: pointer;
}
/* LIGHTBOX IMAGE */
#lightbox img {
box-shadow: 0 0 25px #111;
max-width: 300px;
}
#content {
display: flex;
justify-content: center;
}
#content img {
position: fixed;
top: 0;
margin-top: 4rem;
width: 100%;
}
/* BLUR BACKGROUND WHEN LIGHTBOX IS ACTIVE */
.lightbox-active {
filter: blur(5px);
}
/* LIGHTBOX ARROWS */
.arrowBTN {
position: absolute;
text-decoration: none;
color: white;
cursor: pointer;
font-size: 2rem;
text-align: center;
margin-top: 25%;
transform: translateY(-25%);
width: 3rem;
height: 3rem;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
}
.prev {
left: 0;
margin-left: 1rem;
}
.next {
right: 0;
margin-right: 1rem;
}
#lightbox a {
text-decoration: none;
color: white;
}
#lightbox a:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.lightbox-hidden {
display: none;
}
.lightbox-show {
opacity: 1;
}
@media screen and (min-width: 1650px) {
.flex-column {
display: flex;
justify-content: space-evenly;
}
}
img {
margin: 5px;
}
/* ///////////////////////////////////// */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="front-gallery">
<div class="container-fluid gallery-container">
<div class="d-flex flex-row">
<!-- //////// 1st COLUMN //////// -->
<div class="d-flex flex-column">
<!-- FIRST IMAGE -->
<a style="display:contents" href="https://cdn.pixabay.com/photo/2017/04/05/17/45/girl-2205813_1280.jpg" class="lightbox-trigger">
<img src="https://cdn.pixabay.com/photo/2017/04/05/17/45/girl-2205813_1280.jpg" alt="woman black and white photo" class="img-fluid image">
</a>
<!-- SECOND IMAGE -->
<a style="display:contents" href="https://cdn.pixabay.com/photo/2014/10/13/18/10/woman-487090_1280.jpg" class="lightbox-trigger">
<img src="https://cdn.pixabay.com/photo/2014/10/13/18/10/woman-487090_1280.jpg" alt="dog" class="img-fluid">
</a>
</div>
<!-- //////// 2nd COLUMN //////// -->
<div class="d-flex flex-column">
<!-- THIRD IMAGE -->
<a style="display:contents" href="https://cdn.pixabay.com/photo/2016/11/29/13/00/black-1869685_1280.jpg" class="lightbox-trigger">
<img src="https://cdn.pixabay.com/photo/2016/11/29/13/00/black-1869685_1280.jpg" alt="woman color photo" class="img-fluid">
</a>
<!-- FOURTH IMAGE -->
<a style="display:contents" href="https://cdn.pixabay.com/photo/2015/03/04/19/42/woman-659352_1280.jpg" class="lightbox-trigger">
<img src="https://cdn.pixabay.com/photo/2015/03/04/19/42/woman-659352_1280.jpg" alt="woman with tattoos" class="img-fluid">
</a>
</div>
<!-- //////// 3rd COLUMN //////// -->
<div class="d-flex flex-column">
<!-- FIFTH IMAGE -->
<a style="display:contents" href="https://cdn.pixabay.com/photo/2015/07/02/10/11/person-828630_1280.jpg" class="lightbox-trigger">
<img src="https://cdn.pixabay.com/photo/2015/07/02/10/11/person-828630_1280.jpg" alt="outline of man photo" class="img-fluid">
</a>
<!-- SIXTH IMAGE -->
<a style="display:contents" href="https://cdn.pixabay.com/photo/2017/05/27/17/52/model-2349037_1280.jpg" class="lightbox-trigger">
<img src="https://cdn.pixabay.com/photo/2017/05/27/17/52/model-2349037_1280.jpg" alt="woman under water" class="img-fluid">
</a>
</div>
<!-- //////// 4th COLUMN //////// -->
<div class="d-flex flex-column">
<!-- SEVENTH IMAGE -->
<a style="display:contents" href="https://cdn.pixabay.com/photo/2016/02/11/19/14/couple-1194312_1280.jpg" class="lightbox-trigger">
<img src="https://cdn.pixabay.com/photo/2016/02/11/19/14/couple-1194312_1280.jpg" alt="couple" class="img-fluid">
</a>
<!-- EIGHTH IMAGE -->
<a style="display:contents" href="https://cdn.pixabay.com/photo/2017/11/03/10/34/studio-2913936_1280.jpg" class="lightbox-trigger">
<img src="https://cdn.pixabay.com/photo/2017/11/03/10/34/studio-2913936_1280.jpg" alt="woman smiling" class="img-fluid">
</a>
</div>
<!-- //////// 5th COLUMN //////// -->
<div class="d-flex flex-column">
<!-- NINTH IMAGE -->
<a style="display:contents" href="https://cdn.pixabay.com/photo/2016/11/14/04/08/selfie-1822563_1280.jpg" class="lightbox-trigger">
<img src="https://cdn.pixabay.com/photo/2016/11/14/04/08/selfie-1822563_1280.jpg" alt="kids taking selfie in field" class="img-fluid">
</a>
<!-- TENTH IMAGE -->
<a style="display:contents" href="https://cdn.pixabay.com/photo/2021/04/02/12/01/woman-6144753_1280.jpg" class="lightbox-trigger">
<img src="https://cdn.pixabay.com/photo/2021/04/02/12/01/woman-6144753_1280.jpg" alt="woman with eye makeup" class="img-fluid">
</a>
</div>
<!-- //////// 6th COLUMN //////// -->
<div class="d-flex flex-column">
<!-- ELEVENTH IMAGE -->
<a style="display:contents" href="https://cdn.pixabay.com/photo/2016/10/27/03/43/radio-1773304_1280.jpg" class="lightbox-trigger">
<img src="https://cdn.pixabay.com/photo/2016/10/27/03/43/radio-1773304_1280.jpg" alt="vintage radio" class="img-fluid">
</a>
<!-- TWELFTH IMAGE -->
<a style="display:contents" href="https://cdn.pixabay.com/photo/2015/06/24/01/16/photographer-819365_1280.jpg" class="lightbox-trigger">
<img src="https://cdn.pixabay.com/photo/2015/06/24/01/16/photographer-819365_1280.jpg" alt="outdoor photographer" class="img-fluid">
</a>
</div>
<!-- //////// 7th COLUMN //////// -->
<div class="d-flex flex-column">
<!-- THITEENTH IMAGE -->
<a style="display:contents" href="https://cdn.pixabay.com/photo/2015/04/12/18/05/man-719228_1280.jpg" class="lightbox-trigger">
<img src="https://cdn.pixabay.com/photo/2015/04/12/18/05/man-719228_1280.jpg" alt="man thinking" class="img-fluid">
</a>
<!-- FOURTEENTH IMAGE -->
<a style="display:contents" href="https://cdn.pixabay.com/photo/2016/11/29/01/34/man-1866572_1280.jpg" class="lightbox-trigger">
<img src="https://cdn.pixabay.com/photo/2016/11/29/01/34/man-1866572_1280.jpg" alt="man with jacket" class="img-fluid">
</a>
</div>
</div>
<!-- END FLEX ROW -->
</div>
<!-- END CONTAINER -->
</section>
<!-- ////////////////////////////// -->
<div id="lightbox" class="lightbox-hidden">
<p class="closeBtn">amp;times;</p>
<div id="content">
<img class="lightbox-img" id="lightbox-image" src="https://cdn.pixabay.com/photo/2016/11/14/04/08/selfie-1822563_1280.jpg" />
</div>
<a id="prev" class="prev arrowBTN" aria-label="previous page">amp;#10094;</a>
<a id="next" class="next arrowBTN" aria-label="next page">amp;#10095;</a>
</div>
Комментарии:
1. спасибо вам за комментарий. Я просто попытался заменить i на ImageIndex, но все равно безуспешно. Прямо сейчас, независимо от того, на какое изображение я нажимаю, оно все равно загружает изображение по умолчанию, которое я вставил в ссылку src в разделе lightbox. Чего я хочу, так это чтобы это произошло, когда (например) Я нажимаю на пятое изображение, и это изображение появляется в световом окне. Затем оттуда я могу перейти к предыдущим изображениям с помощью кнопок «Следующий» и «предыдущий» на лайтбоксе.
2. @KurtReyn Не забывай об этом:
let imageIndex = 0;
. Это былоlet i = 0
в верхней части вашего javascript.3. Это ссылка на мой кодовый код codepen.io/kurt-reynolds/pen/GRvodYj?editors=1010
4. Ваш вопрос был таким: » У меня настроена галерея изображений, и я пытаюсь добиться того, чтобы, когда пользователь нажимает на изображение в галерее, открывалось модальное окно лайтбокса, в котором пользователь может прокручивать галерею с помощью кнопок «Следующий» и «предыдущий» в модальном окне. Проблема, с которой я сталкиваюсь, заключается в том, что я не могу заставить jQuery загрузить выбранное изображение. «Так вот на чем я сосредоточился. Если это не помогло, то не голосуйте и не принимайте. Возможно, отредактируйте свой вопрос, чтобы включить в него все, в чем вам нужна помощь, и кто-нибудь другой придет и поможет.
5. Извините, я не хотел вас обидеть. Мое намерение в ответе состояло в том, чтобы попытаться внести ясность в мой первоначальный пост. Я только начал учиться программировать с конца июня. Спасибо вам за потраченное время, и я надеюсь, что вы хорошо проведете остаток дня.
Ответ №2:
поэтому я предполагаю, что изображения, которые вы показываете в своей галерее, являются уменьшенными миниатюрами, а изображение, которое вы хотите отобразить при событии щелчка, — это удаленные изображения, загруженные из базы данных?
Если это так, то недавно у меня было аналогичное требование, и я сделал следующее. Я отобразил URI миниатюры при загрузке страницы, а затем использовал отдельный ajax-запрос для получения соответствующего изображения с высоким разрешением по щелчку мыши с сервера. Это улучшило общую производительность загрузки страниц.
Обратите внимание, что в этом примере используются изображения в кодировке base64, хранящиеся в базе данных. Приведенный ниже код показывает только процесс подключения к JavaScript лайтбокса для реализации вашего собственного потока, в нем не показано, как хранить и отображать изображения base64.
- Добавьте следующий HTML-код для каждого элемента галереи. Обратите внимание на атрибут данных, который я назначаю. В моем случае я использую идентификатор миниатюры для извлечения соответствующего полного изображения из базы данных. Кроме того, обратите внимание на атрибут «галерея данных». Это необходимо для внутримодальной навигации от товара к товару
<a class="image-cell-anchor server-img" data-remote="data:image/jpeg;base64, <!--THUMBNAIL IMAGE-->" data-toggle="lightbox" data-gallery="store-product-gallery" data-title="MyImageTitle" data-footer="" data-type="image" data-imageId="23"> <img class="img-fluid img-thumbnail" src="data:image/jpeg;base64, <!--REMOTE IMAGE-->"> </a>
- Вам нужно подключиться к коду элемента лайтбокса и перехватить процесс. Вам понадобится jQuery, чтобы использовать мой код, в противном случае вы можете просто перекодировать его в чистый JS. Когда документ будет готов, выполните следующие действия.
$(document).on("click", '[data-toggle="lightbox"]', function (event) { event.preventDefault(); var lightBoxImg = $(this); var imgEl = lightBoxImg[0]; var imageID = $(imgEl).data('imageid'); fetchHighResImage(imageID, function (result) { $(imgEl).attr("data-remote", result.ThumbnailUri); $(lightBoxImg).ekkoLightbox({ onShow: function () { var LightBoxObj = this; console.log(LightBoxObj) LightBoxObj.navigateRight = function () { LightBoxObj._toggleLoading(true); if (!LightBoxObj._$galleryItems) return; if (LightBoxObj._$galleryItems.length === 1) return; if (LightBoxObj._galleryIndex === LightBoxObj._$galleryItems.length - 1) { if (LightBoxObj._config.wrapping) LightBoxObj._galleryIndex = 0; else return; } else //circular LightBoxObj._galleryIndex ; var nextRemoteImageID = $(LightBoxObj._$galleryItems[LightBoxObj._galleryIndex]).data('imageid'); fetchHighResImage(nextRemoteImageID, function (result) { $(LightBoxObj._$galleryItems[LightBoxObj._galleryIndex]).attr("data-remote", result.ThumbnailUri); LightBoxObj._config.onNavigate.call(LightBoxObj, 'right', LightBoxObj._galleryIndex); LightBoxObj.navigateTo(LightBoxObj._galleryIndex); LightBoxObj._toggleLoading(false); }); }; LightBoxObj.navigateLeft = function () { LightBoxObj._toggleLoading(true); if (!LightBoxObj._$galleryItems) return; if (LightBoxObj._$galleryItems.length === 1) return; if (LightBoxObj._galleryIndex === 0) { if (LightBoxObj._config.wrapping) LightBoxObj._galleryIndex = LightBoxObj._$galleryItems.length - 1; else return; } else //circular LightBoxObj._galleryIndex--; var prevRemoteImageID = $(LightBoxObj._$galleryItems[LightBoxObj._galleryIndex]).data('imageid'); fetchHighResImage(prevRemoteImageID, function (result) { $(LightBoxObj._$galleryItems[LightBoxObj._galleryIndex]).attr("data-remote", result.ThumbnailUri); LightBoxObj._config.onNavigate.call(LightBoxObj, 'left', LightBoxObj._galleryIndex); LightBoxObj.navigateTo(LightBoxObj._galleryIndex); LightBoxObj._toggleLoading(false); }); }; } }); }); });
Вот моя функция запроса AJAX для получения изображения с высоким разрешением.
function fetchHighResImage(imageID, successCallBack) {
$.ajax({
type: "Post",
cache: false,
url: "/Area/Controller/FetchHighResImageAction",
dataType: 'json',
data: { "imageID": imageID },
success: function (data, status, xml) {
jsonResult = JSON.parse(data);
successCallBack(jsonResult);
},
error: function (xml, status, error) {
console.log(xml)
Command: toastr["warning"]("There has been a critical error loading the image. Contact developer.", "Failure.");
},
complete: function (xml, status) {
}
});
}
Приведенный выше сценарий может быть немного запутанным, но он прост. При начальной загрузке страницы миниатюры будут отображаться для всех элементов галереи. Когда вы нажмете на миниатюру, скрипт получит изображение с полным разрешением с сервера и добавит URI base64 к элементу. При навигации между изображениями в режиме лайтбокса скрипт будет постоянно запрашивать изображение с высоким разрешением при нажатии.
Надеюсь, это вам немного поможет.
Комментарии:
1. Большое вам спасибо за подробное объяснение! Мы очень ценим ваше время и усилия.
2. Без проблем, дайте мне знать, если у вас возникнут какие-либо вопросы.