Index after using the gallery in modal the first time is off?

Index after using the gallery in modal the first time is off? - javascript

I have some code I found that would help make a webpage have a grid of photos and then once clicked they would be able to have a lightbox modal using bootstrap to go through all the photos. However once getting out of the modal and going to a different one by clicking on it would result in them going to the first picture in the column.
HTML
Grid One:
<section id="im-grid" class="image-grid im-image-grid">
<div class="container-xxl">
<div class="row gy-4">
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_1.jpeg" class="img-fluid" alt="Add Part">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_2.jpeg" class="img-fluid" alt="Edit Part">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_3.jpeg" class="img-fluid" alt="Find Parts">
</a>
</figure>
</div>
</div>
<div class="row gy-4">
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_4.jpeg" class="img-fluid" alt="Show Parts">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_5.jpeg" class="img-fluid"
alt="Part Details">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_6.jpeg" class="img-fluid"
alt="Keyboard Shortcuts">
</a>
</figure>
</div>
</div>
<div class="row gy-4">
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_7.jpeg" class="img-fluid"
alt="Part History Part One">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_8.jpeg" class="img-fluid"
alt="Part History Part Two">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_9.jpeg" class="img-fluid"
alt="Export Parts Part One">
</a>
</figure>
</div>
</div>
<div class="row gy-4">
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_10.jpeg" class="img-fluid"
alt="Export Parts Part Two">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_11.jpeg" class="img-fluid"
alt="Export Parts Part Three">
</a>
</figure>
</div>
</div>
</div>
<div class="modal lightbox-modal" id="im-lightbox-modal" tabindex="-1">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
aria-label="Close"></button>
<div class="modal-body im-modal-body">
<div class="container-fluid im-container-fluid p-0">
</div>
</div>
</div>
</div>
</div>
</section>
Grid Two:
<section id="sm-grid" class="image-grid sm-image-grid">
<div class="container-xxl">
<div class="row gy-4">
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/SMGallery_1.jpeg" class="img-fluid" alt="Add Part">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/SMGallery_2.jpeg" class="img-fluid" alt="Edit Part">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/SMGallery_3.jpeg" class="img-fluid" alt="Find Parts">
</a>
</figure>
</div>
</div>
<div class="row gy-4">
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/SMGallery_4.jpeg" class="img-fluid" alt="Show Parts">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/SMGallery_5.jpeg" class="img-fluid" alt="Part Details">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/SMGallery_6.jpeg" class="img-fluid"
alt="Keyboard Shortcuts">
</a>
</figure>
</div>
</div>
<div class="row gy-4">
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/SMGallery_7.jpeg" class="img-fluid"
alt="Part History Part One">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/SMGallery_8.jpeg" class="img-fluid"
alt="Part History Part Two">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/SMGallery_9.jpeg" class="img-fluid"
alt="Export Parts Part One">
</a>
</figure>
</div>
</div>
</div>
<div class="modal lightbox-modal" id="sm-lightbox-modal" tabindex="-1">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
aria-label="Close"></button>
<div class="modal-body sm-modal-body">
<div class="container-fluid sm-container-fluid p-0">
</div>
</div>
</div>
</div>
</div>
</section>
The JavaScript:
Grid One:
const imImageGrid = document.querySelector(".im-image-grid");
const imLinks = imImageGrid.querySelectorAll("a");
const imImgs = imImageGrid.querySelectorAll("img");
const imLightboxModal = document.getElementById("im-lightbox-modal");
const imbsModal = new bootstrap.Modal(imLightboxModal);
const imModalBody = document.querySelector(".im-modal-body .im-container-fluid");
for (const link of imLinks) {
link.addEventListener("click", function (e) {
e.preventDefault();
const imCurrentImg = link.querySelector("img");
const imLightboxCarousel = document.getElementById("im-lightboxCarousel");
if (imLightboxCarousel) {
const imParentCol = link.parentElement.parentElement;
const imIndex = [...imParentCol.parentElement.children].indexOf(imParentCol);
const imbsCarousel = new bootstrap.Carousel(imLightboxCarousel);
imbsCarousel.to(imIndex);
} else {
imCreateCarousel(imCurrentImg);
}
imbsModal.show();
});
}
function imCreateCarousel(img) {
const imMarkup = `
<div id="im-lightboxCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="false">
<div class="carousel-inner">
${imCreateSlides(img)}
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#im-lightboxCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#im-lightboxCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
`;
imModalBody.innerHTML = imMarkup;
}
function imCreateSlides(img) {
let imMarkup = "";
const imCurrentImgSrc = img.getAttribute("src");
for (const img of imImgs) {
const imImgSrc = img.getAttribute("src");
const imImgAlt = img.getAttribute("alt");
imMarkup += `
<div class="carousel-item${imCurrentImgSrc === imImgSrc ? " active" : ""}">
<img src=${imImgSrc} alt=${imImgAlt}>
</div>
`;
}
return imMarkup;
}
Grid Two:
const smImageGrid = document.querySelector(".sm-image-grid");
const smLinks = smImageGrid.querySelectorAll("a");
const smImgs = smImageGrid.querySelectorAll("img");
const smLightboxModal = document.getElementById("sm-lightbox-modal");
const bsSmModal = new bootstrap.Modal(smLightboxModal);
const smModalBody = document.querySelector(".sm-modal-body .sm-container-fluid");
for (const link of smLinks) {
link.addEventListener("click", function (e) {
e.preventDefault();
const smCurrentImg = link.querySelector("img");
const smLightboxCarousel = document.getElementById("sm-lightboxCarousel");
if (smLightboxCarousel) {
const smParentCol = link.parentElement.parentElement;
const smIndex = [...smParentCol.parentElement.children].indexOf(smParentCol);
const bsSmCarousel = new bootstrap.Carousel(smLightboxCarousel);
bsSmCarousel.to(smIndex);
} else {
smCreateCarousel(smCurrentImg);
}
bsSmModal.show();
});
}
function smCreateCarousel(img) {
const smMarkup = `
<div id="sm-lightboxCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="false">
<div class="carousel-inner">
${smCreateSlides(img)}
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#sm-lightboxCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#sm-lightboxCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
`;
smModalBody.innerHTML = smMarkup;
}
function smCreateSlides(img) {
let smMarkup = "";
const smCurrentImgSrc = img.getAttribute("src");
for (const img of smImgs) {
const smImgSrc = img.getAttribute("src");
const smImgAlt = img.getAttribute("alt");
smMarkup += `
<div class="carousel-item${smCurrentImgSrc === smImgSrc ? " active" : ""}">
<img src=${smImgSrc} alt=${smImgAlt}>
</div>
`;
}
return smMarkup;
}
I would just like to be able to exit out of a modal of the photo and then if needed go to a different photo by clicking out of it. Im new to stack overflow so I apologize if the code is

Related

Display sections based on drop down selection [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 years ago.
Improve this question
How can I display sections based on dropdown selection? If I select 2018 to see just that photos which are from 2018? And same for 2017.
Do you have any idea? I checked tutorials but doesn't work. Every answer is appreciated!
Check my code below to understand:
$(document).ready(function() {
$('#selection').on('change', function() {
if (this.value == '2017') {
$("#seventeen").show();
$("#eighteen").hide();
} else if (this.value == '2018') {
$("#eighteen").show();
$("#seventeen").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="section_7" class="media_section">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8">
<div class="section_head_widget animatedParent">
<h2 class="animated fadeInLeft">Media</h2>
<h5 class="animated bounceInUp">photos & videos</h5>
</div>
</div>
<div class="col-xs-12 col-sm-4 text-right">
<div class="btn-group">
<select id='selection'>
<option value="2018" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">2018<span class="fa fa-caret-down"></span></option>
<option value="2017" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">2017</option>
</select>
</div>
</div>
<!--section_head_widget-->
</div>
<!--row-->
<div class="row media_widget">
<div id='eighteen' class="col-xs-12 col-sm-4 col-md-3 animatedParent">
<figure class="animated fadeInUp">
<a data-toggle="modal" data-target="#gal_pop">
<img src="assets/img/media/media_01.jpg" alt="" />
</a>
<!--hyperlink-->
<figcaption>
<h6>Me Gusta</h6>
INNA </figcaption>
</figure>
<!--figure-->
</div>
<!--Column / media item-->
<div id='eighteen' class="col-xs-12 col-sm-4 col-md-3 animatedParent">
<figure class="animated fadeInUp">
<a data-toggle="modal" data-target="#gal_pop2">
<img src="assets/img/media/media_02.jpg" alt="" />
</a>
<!--hyperlink-->
<figcaption>
<h6>poison in news</h6>
35 photos
</figcaption>
</figure>
<!--figure-->
</div>
<!--Column / media item-->
<div id='seventeen' class="col-xs-12 col-sm-4 col-md-3 animatedParent">
<figure class="animated fadeInUp">
<a data-toggle="modal" data-target="#gal_pop4">
<img src="assets/img/media/media_04.jpg" alt="" />
</a>
<!--hyperlink-->
<figcaption>
<h6>poison in news</h6>
95 photos </figcaption>
</figure>
<!--figure-->
</div>
<!--Column / media item-->
<div id='eighteen' class="col-xs-12 col-sm-4 col-md-3 animatedParent">
<figure class="animated fadeInUp">
<a data-toggle="modal" data-target="#gal_pop5">
<img src="assets/img/media/media_05.jpg" alt="" />
</a>
<!--hyperlink-->
<figcaption>
<h6>photos by fans</h6>
70 photos </figcaption>
</figure>
<!--figure-->
</div>
<!--Column / media item-->
</div>
</div>
<!--container-->
</section>
<!--//media_section-->

This is much more generic
give each a class only used by those divs plus the year to each div.
I use <div class="year 2018 ...
hide all when changing
change based on value without using IF
trigger change onload
$(document).ready(function() {
$('#selection').on('change', function() {
$("div.year").hide();
$("div."+this.value).show();
}).change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="section_7" class="media_section">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8">
<div class="section_head_widget animatedParent">
<h2 class="animated fadeInLeft">Media</h2>
<h5 class="animated bounceInUp">photos & videos</h5>
</div>
</div>
<div class="col-xs-12 col-sm-4 text-right">
<div class="btn-group">
<select id='selection'>
<option value="2018" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">2018<span class="fa fa-caret-down"></span></option>
<option value="2017" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">2017</option>
</select>
</div>
</div>
<!--section_head_widget-->
</div>
<!--row-->
<div class="row media_widget">
<div class="year 2018 col-xs-12 col-sm-4 col-md-3 animatedParent">
<figure class="animated fadeInUp">
<a data-toggle="modal" data-target="#gal_pop">
<img src="assets/img/media/media_01.jpg" alt="" />
</a>
<!--hyperlink-->
<figcaption>
<h6>Me Gusta</h6>
INNA </figcaption>
</figure>
<!--figure-->
</div>
<!--Column / media item-->
<div class="year 2018 col-xs-12 col-sm-4 col-md-3 animatedParent">
<figure class="animated fadeInUp">
<a data-toggle="modal" data-target="#gal_pop2">
<img src="assets/img/media/media_02.jpg" alt="" />
</a>
<!--hyperlink-->
<figcaption>
<h6>poison in news</h6>
35 photos
</figcaption>
</figure>
<!--figure-->
</div>
<!--Column / media item-->
<div class="year 2017 col-xs-12 col-sm-4 col-md-3 animatedParent">
<figure class="animated fadeInUp">
<a data-toggle="modal" data-target="#gal_pop4">
<img src="assets/img/media/media_04.jpg" alt="" />
</a>
<!--hyperlink-->
<figcaption>
<h6>poison in news</h6>
95 photos </figcaption>
</figure>
<!--figure-->
</div>
<!--Column / media item-->
<div class="year 2018 col-xs-12 col-sm-4 col-md-3 animatedParent">
<figure class="animated fadeInUp">
<a data-toggle="modal" data-target="#gal_pop5">
<img src="assets/img/media/media_05.jpg" alt="" />
</a>
<!--hyperlink-->
<figcaption>
<h6>photos by fans</h6>
70 photos </figcaption>
</figure>
<!--figure-->
</div>
<!--Column / media item-->
</div>
</div>
<!--container-->
</section>
<!--//media_section-->

Your existing code is close. As pointed out in the comments, id attributes should be unique - only used once on a page. So move the seventeen and eighteen to a class instead of an id.
Then we'll move the show/hide function to a separate function so we can call it at the start to only show the 2018 events.
$(document).ready(function() {
$('#selection').on('change', showYear);
});
function showYear(event) {
var year = event ? event.target.value : "2018";
if (year === '2017') {
$(".seventeen").show();
$(".eighteen").hide();
} else if (year === '2018') {
$(".eighteen").show();
$(".seventeen").hide();
}
}
showYear();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="section_7" class="media_section">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8">
<div class="section_head_widget animatedParent">
<h2 class="animated fadeInLeft">Media</h2>
<h5 class="animated bounceInUp">photos & videos</h5>
</div>
</div>
<div class="col-xs-12 col-sm-4 text-right">
<div class="btn-group">
<select id='selection'>
<option value="2018" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">2018<span class="fa fa-caret-down"></span></option>
<option value="2017" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">2017</option>
</select>
</div>
</div>
<!--section_head_widget-->
</div>
<!--row-->
<div class="row media_widget">
<div class="eighteen col-xs-12 col-sm-4 col-md-3 animatedParent">
<figure class="animated fadeInUp">
<a data-toggle="modal" data-target="#gal_pop">
<img src="assets/img/media/media_01.jpg" alt="" />
</a>
<!--hyperlink-->
<figcaption>
<h6>Me Gusta</h6>
INNA </figcaption>
</figure>
<!--figure-->
</div>
<!--Column / media item-->
<div class="eighteen col-xs-12 col-sm-4 col-md-3 animatedParent">
<figure class="animated fadeInUp">
<a data-toggle="modal" data-target="#gal_pop2">
<img src="assets/img/media/media_02.jpg" alt="" />
</a>
<!--hyperlink-->
<figcaption>
<h6>poison in news</h6>
35 photos
</figcaption>
</figure>
<!--figure-->
</div>
<!--Column / media item-->
<div class="seventeen col-xs-12 col-sm-4 col-md-3 animatedParent">
<figure class="animated fadeInUp">
<a data-toggle="modal" data-target="#gal_pop4">
<img src="assets/img/media/media_04.jpg" alt="" />
</a>
<!--hyperlink-->
<figcaption>
<h6>poison in news</h6>
95 photos </figcaption>
</figure>
<!--figure-->
</div>
<!--Column / media item-->
<div class="eighteen col-xs-12 col-sm-4 col-md-3 animatedParent">
<figure class="animated fadeInUp">
<a data-toggle="modal" data-target="#gal_pop5">
<img src="assets/img/media/media_05.jpg" alt="" />
</a>
<!--hyperlink-->
<figcaption>
<h6>photos by fans</h6>
70 photos </figcaption>
</figure>
<!--figure-->
</div>
<!--Column / media item-->
</div>
</div>
<!--container-->
</section>
<!--//media_section-->

I have tested your code and it is working fine. You have multiple div element with same id (id="eighteen") which is creating problem.
Try out the following code
HTML:
<select name="" id="selection">
<option value="Select">Select</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
</select>
<div id="seventeen" style="display: none;">2017 Photos</div>
<div id="eighteen" style="display: none;">2018 Photos</div>
Javascript
$(document).ready(function(){
$('#selection').on('change', function() {
if ( this.value == '2017')
{
$("#seventeen").show();
$("#eighteen").hide();
}
else if ( this.value == '2018')
{
$("#eighteen").show();
$("#seventeen").hide();
}
});
});

Need caption when preview the image

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- When click on image -->
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<img src="" class="imagepreview" style="width: 100%;">
<figcaption class="img-title"> </figcaption>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="panel panel-default" style="margin-top: 7px;">
<div class="photo-gallary-head panel-heading ">
<h4 title="Photo Gallery" class="photo-gallary-head-name"> Photo Gallery </h4>
</div>
<div class="panel-body">
<div class="img-t humbnail">
<div class="carousel slide" id="myCarousel1" data-ride="carousel">
<!-- Carousel items -->
<div class="carousel-inner">
<!--/item-->
<div class="item active">
<div class="row">
<div class="col-xs-3">
<a href="#x" class="pop"><img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-1.jpg">
<figcaption class="img-title">A caption for the above image.</figcaption></a>
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-2.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-3.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-4.jpg">
</div>
</div>
</div>
<div class="item ">
<div class="row">
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-5.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-6.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-7.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-8.jpg">
</div>
</div>
</div>
<div class="item ">
<div class="row">
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-9.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-10.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-11.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-12.jpg">
</div>
</div>
</div>
<!--/item-->
<div class="item ">
<div class="row">
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-13.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-14.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-15.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-16.jpg">
</div>
</div>
</div>
<div class="item ">
<div class="row">
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-17.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-18.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-19.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-20.jpg">
</div>
</div>
</div>
<!--/item-->
</div>
</div>
<div id="carouselButtons" style="text-align:center; margin-top:20px">
<a class="left1 carousel-control1" href="#myCarousel1
" data-slide="prev" title="Previous"><i class="fa fa-angle-left"></i></a>
<button id="pauseButton" type="button" class="btn btn-default btn-md" title="Play">
<i class="fa fa-play-circle" style="font-size:20px"></i>
</button>
<button id="playButton" type="button" class="btn btn-default btn-md" title="Pause">
<i class="fa fa-pause-circle" style="font-size:20px"></i>
</button>
<a class="right1 carousel-control1" href="#myCarousel1" data-slide="next" title="next"><i class="fa fa-angle-right"></i></a>
</div>
</div>
</div>
</div>
</div>
I have done preview the image with the help of model popup, but need show same image caption when click on image. In this code this is the thumbnail slider with image preview. Here some of the missing file, it is not working. I don't want to show by title but show by caption. This is the thumbnail slider.

You can try to set title or alt tag into image, i think it will take automatically as caption.
Or can you give me your slider jquery url

stop autoslide from boostrap carousel with thumbnails

I am trying to stop autoslide from the bootstrap carousel corresponding to this jsfiddle example.
Whereas
$('.carousel').carousel({
interval: false
});
stops the main carousel, I dident find the way to stop the autosliding from the thumbnail part.
$(document).ready(function() {
var totalItems = $('#carousel .item').length;
var thumbs = 3;
var currentThumbs = 0;
var to = 0;
var thumbActive = 1;
function toggleThumbActive (i) {
$('#carousel-thumbs .item>div').removeClass('active');
$('#carousel-thumbs .item.active>div:nth-child(' + i +')').addClass('active');
}
$('#carousel').on('slide.bs.carousel', function(e) {
//var active = $(e.target).find('.carousel-inner > .item.active');
//var from = active.index();
var from = $('#carousel .item.active').index()+1;
var next = $(e.relatedTarget);
to = next.index()+1;
var nextThumbs = Math.ceil(to/thumbs) - 1;
if (nextThumbs != currentThumbs) {
$('#carousel-thumbs').carousel(nextThumbs);
currentThumbs = nextThumbs;
}
thumbActive = +to-(currentThumbs*thumbs);
//console.log(from + ' => ' + to + ' / ' + currentThumbs);
});
$('#carousel').on('slid.bs.carousel', function(e) {
toggleThumbActive(thumbActive);
});
$('#carousel-thumbs').on('slid.bs.carousel', function(e) {
toggleThumbActive(thumbActive);
});
$("#carousel").on("swiperight",function(){
$('#carousel').carousel('prev');
});
$("#carousel").on("swipeleft",function(){
$('#carousel').carousel('next');
});
$("#carousel-thumbs").on("swiperight",function(){
$('#carousel-thumbs').carousel('prev');
});
$("#carousel-thumbs").on("swipeleft",function(){
$('#carousel-thumbs').carousel('next');
});
});
$('.carousel').carousel({
interval: false
});
#carousel,
#carousel-thumbs {
max-width: 800px;
margin: 15px auto;
}
#carousel-thumbs .item img {
opacity: 0.5;
}
#carousel-thumbs .item.active div.active img {
opacity: 1;
border: 2px solid #000;
}
#carousel-thumbs .item.active div:not(.active) img {
cursor:pointer;
}
#carousel-thumbs .carousel-control {
background-image: none;
}
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">1</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">2</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">3</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">4</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">5</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">6</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">7</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">8</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">9</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control hiden-xs" href="#carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control hiden-xs" href="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div id="carousel-thumbs" class="carousel slide">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="col-xs-4 active"onclick="$('#carousel').carousel(0);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4"onclick="$('#carousel').carousel(1);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4"onclick="$('#carousel').carousel(2);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-4"onclick="$('#carousel').carousel(3);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(4);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(5);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(5);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(5);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-4" onclick="$('#carousel').carousel(6);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(7);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(8);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control hidden-xs" href="#carousel-thumbs" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control hidden-xs" href="#carousel-thumbs" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

Get rid of data-ride="carousel", give your .carousel data-interval="false" attribute.
Quoting W3S
The data-ride="carousel" attribute tells Bootstrap to begin animating
the carousel immediately when the page loads.
If you want it to stop animating, remove .slide class from your your .carousel selector.
The .slide class adds a CSS transition and animation effect, which
makes the items slide when showing a new item. Omit this class if you
do not want this effect.
$(document).ready(function() {
var totalItems = $('#carousel .item').length;
var thumbs = 3;
var currentThumbs = 0;
var to = 0;
var thumbActive = 1;
function toggleThumbActive (i) {
$('#carousel-thumbs .item>div').removeClass('active');
$('#carousel-thumbs .item.active>div:nth-child(' + i +')').addClass('active');
}
$('#carousel').on('slide.bs.carousel', function(e) {
//var active = $(e.target).find('.carousel-inner > .item.active');
//var from = active.index();
var from = $('#carousel .item.active').index()+1;
var next = $(e.relatedTarget);
to = next.index()+1;
var nextThumbs = Math.ceil(to/thumbs) - 1;
if (nextThumbs != currentThumbs) {
$('#carousel-thumbs').carousel(nextThumbs);
currentThumbs = nextThumbs;
}
thumbActive = +to-(currentThumbs*thumbs);
//console.log(from + ' => ' + to + ' / ' + currentThumbs);
});
$('#carousel').on('slid.bs.carousel', function(e) {
toggleThumbActive(thumbActive);
});
$('#carousel-thumbs').on('slid.bs.carousel', function(e) {
toggleThumbActive(thumbActive);
});
$("#carousel").on("swiperight",function(){
$('#carousel').carousel('prev');
});
$("#carousel").on("swipeleft",function(){
$('#carousel').carousel('next');
});
$("#carousel-thumbs").on("swiperight",function(){
$('#carousel-thumbs').carousel('prev');
});
$("#carousel-thumbs").on("swipeleft",function(){
$('#carousel-thumbs').carousel('next');
});
});
$('.carousel').carousel({
interval: false
});
#carousel,
#carousel-thumbs {
max-width: 800px;
margin: 15px auto;
}
#carousel-thumbs .item img {
opacity: 0.5;
}
#carousel-thumbs .item.active div.active img {
opacity: 1;
border: 2px solid #000;
}
#carousel-thumbs .item.active div:not(.active) img {
cursor:pointer;
}
#carousel-thumbs .carousel-control {
background-image: none;
}
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="carousel" class="carousel" data-interval="false" >
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">1</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">2</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">3</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">4</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">5</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">6</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">7</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">8</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">9</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control hiden-xs" href="#carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control hiden-xs" href="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div id="carousel-thumbs" class="carousel slide">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="col-xs-4 active"onclick="$('#carousel').carousel(0);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4"onclick="$('#carousel').carousel(1);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4"onclick="$('#carousel').carousel(2);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-4"onclick="$('#carousel').carousel(3);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(4);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(5);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(5);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(5);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-4" onclick="$('#carousel').carousel(6);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(7);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(8);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control hidden-xs" href="#carousel-thumbs" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control hidden-xs" href="#carousel-thumbs" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

Scroll Down Arrow Javascript

I'm working on a canvas drawing app and I want to have a scroll down arrow show up in a div with a group of images to show the user that they have to scroll down to see the rest of the images, but also I want the user to be able to actually scroll down when touching the arrow. Could someone help me with the script to go about this ? thank you very much.
//////////////HTML/////////////////////////
<div id="branddraw">
<div class="drawings col-md-2">
<div class="pre-scrollable">
<div class="thumb">
<a class="thumbnail" href="#" id="img1">
<img class="img-responsive" src="./assets/colour_imgs/Kcoloring/img1.png" alt="">
</a>
</div>
<div class="thumb">
<a class="thumbnail" href="#" id="img2">
<img class="img-responsive" src="./assets/colour_imgs/Kcoloring/img2.png" alt="">
</a>
</div>
<div class="thumb">
<a class="thumbnail" href="#" id="img3">
<img class="img-responsive" src="./assets/colour_imgs/Kcoloring/img3.png" alt="">
</a>
</div>
<div class="thumb">
<a class="thumbnail" href="#" id="img4">
<img class="img-responsive" src="./assets/colour_imgs/Kcoloring/img4.png" alt="">
</a>
</div>
<div class="thumb">
<a class="thumbnail" href="#" id="img5">
<img class="img-responsive" src="./assets/colour_imgs/Kcoloring/img5.png" alt="">
</a>
</div>
<div class="thumb">
<a class="thumbnail" href="#" id="img6">
<img class="img-responsive" src="./assets/colour_imgs/Kcoloring/img6.png" alt="">
</a>
</div>
</div>
</div>
</div>

Modal Lightbox Gallery and Carousel Slider incompatible?

It seems quite challenging to add both the Bootstrap Carousel Slider and
Lightbox Gallery in a single page without significant issues.
Problem: When clicking on the lightbox image gallery it opens up the picture gallery and at the same time the Carousel slider image gets hijacked by the gallery images. The culprit seems to be either the classes: .item, img, or .inner-carousel
Is it possible to add both modal lighbox and carousel slider to a single page without any issues?
To recreate the issue: Click on the image gallery, the modal will pop up, close the window, and now the carousel slider has been replaced by the gallery images. http://jsfiddle.net/2aasoyej/
HTML:
<div class="container">
<div class="row">
<h1>Bootstrap 3 lightbox hidden gallery using modal</h1>
<hr>
<div class="row">
<div class="col-12 col-md-4 col-sm-6">
<a title="Image 1" href="#">
<img class="thumbnail img-responsive" id="image-1" src="http://dummyimage.com/600x350/ccc/969696&text=0xD10x810xD00xB50xD10x800xD10x8B0xD00xB9">
</a>
</div>
<div class="col-12 col-md-4 col-sm-6">
<a title="Image 2" href="#">
<img class="thumbnail img-responsive" id="image-2" src="http://dummyimage.com/600x350/2255EE/969696&text=0xD10x810xD00xB80xD00xBD0xD00xB80xD00xB9">
</a>
</div>
<div class="col-12 col-md-4 col-sm-6">
<a title="Image 3" href="#">
<img class="thumbnail img-responsive" id="image-3" src="http://dummyimage.com/600x350/449955/FFF&text=0xD00xB70xD00xB50xD00xBB0xD00xB50xD00xBD0xD10x8B0xD00xB9">
</a>
</div>
</div>
<hr>
</div>
</div>
<div class="hidden" id="img-repo">
<!-- #image-1 -->
<div class="item" id="image-1">
<img class="thumbnail img-responsive" title="Image 11" src="http://dummyimage.com/600x350/ccc/969696">
</div>
<div class="item" id="image-1">
<img class="thumbnail img-responsive" title="Image 12" src="http://dummyimage.com/600x600/ccc/969696">
</div>
<div class="item" id="image-1">
<img class="thumbnail img-responsive" title="Image 13" src="http://dummyimage.com/300x300/ccc/969696">
</div>
<!-- #image-2 -->
<div class="item" id="image-2">
<img class="thumbnail img-responsive" title="Image 21" src="http://dummyimage.com/600x350/2255EE/969696">
</div>
<div class="item" id="image-2">
<img class="thumbnail img-responsive" title="Image 21" src="http://dummyimage.com/600x600/2255EE/969696">
</div>
<div class="item" id="image-2">
<img class="thumbnail img-responsive" title="Image 23" src="http://dummyimage.com/300x300/2255EE/969696">
</div>
<!-- #image-3-->
<div class="item" id="image-3">
<img class="thumbnail img-responsive" title="Image 31" src="http://dummyimage.com/600x350/449955/FFF">
</div>
<div class="item" id="image-3">
<img class="thumbnail img-responsive" title="Image 32" src="http://dummyimage.com/600x600/449955/FFF">
</div>
<div class="item" id="image-3">
<img class="thumbnail img-responsive" title="Image 33" src="http://dummyimage.com/300x300/449955/FFF">
</div>
</div>
<div class="modal" id="modal-gallery" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal">×</button>
<h3 class="modal-title"></h3>
</div>
<div class="modal-body">
<div id="modal-carousel" class="carousel">
<div class="carousel-inner">
</div>
<a class="carousel-control left" href="#modal-carousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="carousel-control right" href="#modal-carousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Header Carousel -->
<header id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');">
<center>
<div class="carousel-title">
<h1>Certified General Contractor</h1>
</div>
</center>
</div>
<div class="carousel-caption">
<h2>For all your South Florida construction needs</h2>
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');">
<center>
<div class="carousel-title">
<h1>Commercial Contruction</h1>
</div>
</center>
</div>
<div class="carousel-caption">
<h2>Build with a company you can trust</h2>
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');">
<center>
<div class="carousel-title">
<h1>Home Renovation</h1>
</div>
</center>
</div>
<div class="carousel-caption">
<h2>Remodel your home with the best in the field</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev" style="font-size:70px;"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next" style="font-size:70px;"></span>
</a>
JS:
var $item = $('.carousel .item');
var $wHeight = $(window).height();
$item.eq(0).addClass('active');
$item.height($wHeight);
$item.addClass('full-screen');
$('.carousel img').each(function() {
var $src = $(this).attr('src');
var $color = $(this).attr('data-color');
$(this).parent().css({
'background-image' : 'url(' + $src + ')',
'background-color' : $color
});
$(this).remove();
});
$(window).on('resize', function (){
$wHeight = $(window).height();
$item.height($wHeight);
});
$('.carousel').carousel({
interval: 6000,
pause: "false"
});

In the $(".row .thumbnail").click(function() you are querying $('.carousel-inner') which infact matches both carousels' .carousel-inner
$(".row .thumbnail").click(function(){
var content = $(".carousel-inner");
..and then you call content.empty() and content.append(repoCopy). This does affect both carousels, too, of course.
You need to be more precise here:
$(".row .thumbnail").click(function(){
var content = $("#modal-carousel .carousel-inner");
Here's the updated fiddle: http://jsfiddle.net/2aasoyej/1/
Udated fiddle that properly disables the interval for the modal carousel, as noted in comments below: http://jsfiddle.net/2aasoyej/4/

Develop Reference

JavaScript is the programming language of the Web.

Index after using the gallery in modal the first time is off? - javascript

Related

Display sections based on drop down selection [closed]

Need caption when preview the image

stop autoslide from boostrap carousel with thumbnails

Scroll Down Arrow Javascript

Modal Lightbox Gallery and Carousel Slider incompatible?

Categories

Resources