For the product image gallery, I have implemented this code but it seems to be having some issues. The thumbnail images are not moving the main images correctly. Can someone help me identify and solve the problem?
<!-- Apologies! Lightbox functionality is currently not working -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
@foreach (var obj in galleries.Select((item, index) => new { item, index }))
{
<div class="carousel-item @(obj.index==0?"item active":"item")" data-slide-number="@obj.item.GalleryId">
<img src="/ProductFile/Gallery/@obj.item.ImageName" class="d-block w-100" alt="..." data-remote="https://source.unsplash.com/tXqVe7oO-go/" data-type="image" data-toggle="lightbox" data-gallery="example-gallery">
</div>
}
</div>
</div>
<!-- Carousel Navigation -->
<div id="carousel-thumbs" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row mx-0">
@foreach (var item in galleries)
{
<div id="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="355654475a40465059184650595056415a4718755c4150581b7254595950474c7c51">[email protected]</a>" class="thumb col-4 col-sm-2 px-1 py-2" data-target="#myCarousel" data-slide-to="@item.GalleryId">
<img src="/ProductFile/Gallery/@item.ImageName" class="img-fluid" alt="...">
</div>
}
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel-thumbs" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-thumbs" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
The thumbnail of the photos isn't functioning properly as expected. Any suggestions for resolving this issue would be appreciated.
<script>
$('#myCarousel').carousel({
interval: false
});
$('#carousel-thumbs').carousel({
interval: false
});
// handles the carousel thumbnails
// https://stackoverflow.com/questions/25752187/bootstrap-carousel-with-thumbnails-multiple-carousel
$('[id^=carousel-selector-]').click(function () {
var id_selector = $(this).attr('id');
var id = parseInt(id_selector.substr(id_selector.lastIndexOf('-') + 1));
$('#myCarousel').carousel(id);
});
// Only display 3 items in nav on mobile.
if ($(window).width() < 575) {
$('#carousel-thumbs .row div:nth-child(4)').each(function () {
var rowBoundary = $(this);
$('<div class="row mx-0">').insertAfter(rowBoundary.parent()).append(rowBoundary.nextAll().addBack());
});
$('#carousel-thumbs .carousel-item .row:nth-child(even)').each(function () {
var boundary = $(this);
$('<div class="carousel-item">').insertAfter(boundary.parent()).append(boundary.nextAll().addBack());
});
}
// Hide slide arrows if too few items.
if ($('#carousel-thumbs .carousel-item').length < 2) {
$('#carousel-thumbs [class^=carousel-control-]').remove();
$('.machine-carousel-container #carousel-thumbs').css('padding', '0 5px');
}
// when the carousel slides, auto update
$('#myCarousel').on('slide.bs.carousel', function (e) {
var id = parseInt($(e.relatedTarget).attr('data-slide-number'));
$('[id^=carousel-selector-]').removeClass('selected');
$('[id=carousel-selector-' + id + ']').addClass('selected');
});
// when user swipes, go next or previous
$('#myCarousel').swipe({
fallbackToMouseEvents: true,
swipeLeft: function (e) {
$('#myCarousel').carousel('next');
},
swipeRight: function (e) {
$('#myCarousel').carousel('prev');
},
allowPageScroll: 'vertical',
preventDefaultEvents: false,
threshold: 75
});
//$(document).on('click', '[data-toggle="lightbox"]', function(event) {
// event.preventDefault();
// $(this).ekkoLightbox();
//});
$('#myCarousel .carousel-item img').on('click', function (e) {
var src = $(e.target).attr('data-remote');
if (src) $(this).ekkoLightbox();
});
</script>