Помогите сделать изменение href в лайтбоксе при переключении. Не могу интегрировать с PHP и сладером лайтбокс. Всегда показывает одну картинку $gallery[0]. Не могу найти адекватного способа решения проблемы, а сами понимаете хочется аккуратно.
Ссылка на пример странцы: лайтбокс открывается при клике на большое изображение и всегда выводит одну картинку и только одну и ту же
Из файла со сладером и лайтбоксом:
<?php if (is_array($gallery)) : ?>
<a href="<?php echo filter_var($gallery[0], FILTER_SANITIZE_URL); ?>" data-lightbox="gallery1"><img class="imghead" src="<?php echo filter_var($gallery[0], FILTER_SANITIZE_URL); ?>" alt="Image"></a>
Скрипт слайдера:
function myFunction(imgs) {
// Get the expanded image
var expandImg = document.getElementById("expandedImg");
// Get the image text
var imgText = document.getElementById("imgtext");
// Use the same src in the expanded image as the image being clicked on from the grid
expandImg.src = imgs.src;
// Use the value of the alt attribute of the clickable image as text inside the expanded image
imgText.innerHTML = imgs.alt;
// Show the container element (hidden with CSS)
expandImg.parentElement.style.display = "block";
}
window.addEventListener('load', () => {
var galleryContainer = document.getElementById('gallery-container');
var items = document.querySelectorAll('.gallery-preview');
[].forEach.call(items, preview => {
preview.addEventListener('click', function () {
var image = galleryContainer.querySelector('img');
$(this).parent().parent().children().removeClass('current');
$(this).parent().addClass('current');
if (!image) {
var image = document.createElement('img');
image.setAttribute('src', this.getAttribute('src'));
galleryContainer.appendChild(image);
galleryContainer.setAttribute('style', 'display: block');
return true;
}
image.setAttribute('src', this.getAttribute('src'));
galleryContainer.setAttribute('style', 'display: flex');
});
});
if (items.length > 1) {
document.querySelector('#prev-slide').addEventListener('click', function () {
var next = $('.image-container.current').index() == 0 ?
$('.image-container').length - 1 :
$('.image-container.current').index() - 1;
$('#gallery-container').find('img').attr('src', $('.image-container').eq(next).find('img').attr('src'));
$('.image-container').removeClass('current').eq(next).addClass('current');
})
document.querySelector('#next-slide').addEventListener('click', function () {
var next = $('.image-container.current').index() == $('.image-container').length - 1 ?
0 : $('.image-container.current').index() + 1;
console.log(next);
$('#gallery-container').find('img').attr('src', $('.image-container').eq(next).find('img').attr('src'));
$('.image-container').removeClass('current').eq(next).addClass('current');
})
}
});
Скрипт лайтбокса:
<script>
$.fn.extend({
lightBox: function(){
$(this).each(function(){
$(this).on('click', $.proxy(function(e) {
e.preventDefault();
var link = this;
var obLightBox, prev, next, title, gallery;
if(!!$(this).data('lightbox'))
gallery = $('[data-lightbox="'+$(this).data('lightbox')+'"]');
var setNavActivity = function(index) {
if(index==0)
prev.addClass('lightbox-inactive');
else
prev.removeClass('lightbox-inactive');
if(index==(gallery.length-1))
next.addClass('lightbox-inactive');
else
next.removeClass('lightbox-inactive');
}
var navigate = function(e) {
e.preventDefault();
var cur_index = $(gallery).index(link);
cur_index=$(this).data('nav')=='prev'?cur_index-1:cur_index+1;
if(cur_index<0 || cur_index>=gallery.length)
return;
var img = obLightBox.find('img');
link = gallery[cur_index];
img.prop('src',link.href);
title.html(link.hasAttribute('title')?link.getAttribute('title'):'');
setNavActivity(cur_index);
};
obLightBox = $('<div/>')
.addClass('lightbox')
.append(
$('<img>')
.attr('src',link.href)
.attr('alt',''))
.append(
title = $('<div/>')
.addClass('lightbox-title')
.html(link.hasAttribute('title')?link.getAttribute('title'):''))
.append(
$('<a/>')
.addClass('lightbox-close')
.attr('title',"Close")
.attr('href',"#")
.on('click',function(e){
e.preventDefault();
obLightBox.remove();
}))
.append(
prev = $('<a/>')
.addClass('lightbox-prev')
.addClass('lightbox-inactive')
.attr('title',"Previous")
.attr('href',"#")
.data('nav','prev')
.on('click',navigate))
.append(
next = $('<a/>')
.addClass('lightbox-next')
.addClass('lightbox-inactive')
.attr('title',"Next")
.attr('href',"#")
.data('nav','next')
.on('click',navigate));
if(!!gallery && gallery.length>1) {
setNavActivity($(gallery).index(link));
} else {
prev.remove();
next.remove();
}
$(document.body).append(obLightBox);
}, this));
});
}
});
$('[data-lightbox]').lightBox();
</script>
