bootstrap modal photo gallery - javascript

I don't like admitting this, but I copied some code and I can't get it to work like it is supposed to work. I've got a few images that I want to be displayed in a bootstrap modal and to be able to scroll through them. Below is my html code as well as my javascript code. I have the jquery and bootstrap all linked up correctly.
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-10">
<ul>
<li class="cards col-lg-3 col-md-3 col-sm-3 col-xs-4">
<img class="img-responsive" src="img/gallery4.jpg">
</li>
<li class="cards col-lg-3 col-md-3 col-sm-3 col-xs-4">
<img class="img-responsive" src="img/gallery5.jpg">
</li>
<li class="cards col-lg-3 col-md-3 col-sm-3 col-xs-4">
<img class="img-responsive" src="img/gallery6.jpg">
</li>
</ul>
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body"> </div>
</div>
</div>
</div>
And now the javascript code:
$(document).ready(function(){
$('li img').on('click',function(){
var src = $(this).attr('src');
var img = '<img src="' + src + '" class="img-responsive"/>';
var index = $(this).parent('li').index();
var html = '';
html += img;
html += '<div style="height:25px;clear:both;display:block;">';
html += '<a class="controls next" href="'+ (index+2) + '"> <b>next</b> »</a>';
html += '<a class="controls previous" href="' + (index) + '">« <b>prev</b></a>';
html += '</div>';
$('#myModal').modal();
$('#myModal').on('shown.bs.modal', function(){
$('#myModal .modal-body').html(html);
$('a.controls').trigger('click');
})
$('#myModal').on('hidden.bs.modal', function(){
$('#myModal .modal-body').html('');
});
});
})
$(document).on('click', 'a.controls', function(){
var index = $(this).attr('href');
var src = $('ul.row li:nth-child('+ index +') img').attr('src');
$('.modal-body img').attr('src', src);
var newPrevIndex = parseInt(index) - 1;
var newNextIndex = parseInt(newPrevIndex) + 2;
if($(this).hasClass('previous')){
$(this).attr('href', newPrevIndex);
$('a.next').attr('href', newNextIndex);
}else{
$(this).attr('href', newNextIndex);
$('a.previous').attr('href', newPrevIndex);
}
var total = $('ul.row li').length + 1;
//hide next button
if(total === newNextIndex){
$('a.next').hide();
}else{
$('a.next').show()
}
//hide previous button
if(newPrevIndex === 0){
$('a.previous').hide();
}else{
$('a.previous').show()
}
return false;
});


<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<h1>Bootstrap 3 Lightbox image gallery using Modal</h1>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 1" href="#"><img class="thumbnail img-responsive" src="images.jpg"></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 2" href="#"><img class="thumbnail img-responsive" src="images.jpg"></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 3" href="#"><img class="thumbnail img-responsive" src="images.jpg"></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 4" href="#"><img class="thumbnail img-responsive" src="images.jpg"></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 5" href="#"><img class="thumbnail img-responsive" src="images.jpg"></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 6" href="#"><img class="thumbnail img-responsive" src="images.jpg"></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 8" href="#"><img class="thumbnail img-responsive" src="images.jpg"></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 9" href="#"><img class="thumbnail img-responsive" src="images.jpg"></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 10" href="#"><img class="thumbnail img-responsive" src="images.jpg"></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 11" href="#"><img class="thumbnail img-responsive" src="images.jpg"></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 12" href="#"><img class="thumbnail img-responsive" src="images.jpg"></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 13" href="#"><img class="thumbnail img-responsive" src="images.jpg"></a></div>
<hr>
<hr>
</div>
</div>
<div tabindex="-1" class="modal fade" id="myModal" 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">Heading</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<style>
.modal-dialog {width:600px;}
.thumbnail {margin-bottom:6px;}
</style>
<script>
$(document).ready(function() {
$('.thumbnail').click(function(){
$('.modal-body').empty();
var title = $(this).parent('a').attr("title");
$('.modal-title').html(title);
$($(this).parents('div').html()).appendTo('.modal-body');
$('#myModal').modal({show:true});
});
});
</script>

Related

why can't I use the same javascript toggle button twice?

I'm attempting to utilize this javascript toggle button in two separate parts on the same page, but I'm having trouble. I tried altering the id as well, but it didn't work. Is it impossible to complete it, or am I overlooking something? I am not an expert in javascript and am a complete novice, so any help would be greatly appreciated.
function toggleText() {
var showMoreText = document.getElementById("more");
var buttonText = document.querySelector("#moreButton span");
var moreIcon = document.querySelector("#moreButton img");
if (startpoint.style.display === "none") {
showMoreText.style.display = "none";
startpoint.style.display = "table-cell";
buttonText.innerHTML = "Show More";
buttonText.classList.remove('less');
moreIcon.classList.remove('less');
} else {
showMoreText.style.display = "table-cell";
startpoint.style.display = "none";
buttonText.innerHTML = "Show Less";
buttonText.classList.add('less');
moreIcon.classList.add('less');
}
}
function toggleText2() {
var showMoreText2 = document.getElementById("more2");
var buttonText2 = document.querySelector("#moreButton2 span");
var moreIcon2 = document.querySelector("#moreButton2 img");
if (startpoint.style.display === "none") {
showMoreText.style.display = "none";
startpoint.style.display = "table-cell";
buttonText.innerHTML = "Show More";
buttonText.classList.remove('less2');
moreIcon.classList.remove('less2');
} else {
showMoreText.style.display = "table-cell";
startpoint.style.display = "none";
buttonText.innerHTML = "Show Less";
buttonText.classList.add('less2');
moreIcon.classList.add('less2');
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="container-fluid clientbox text-center">
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div id="startpoint"></div>
<div id="more">
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class=" col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
</div>
</div>
<button onclick="toggleText()" id="moreButton">
<span class="pink">Show More</span>
<img class="more" src="./images/load-more.png" alt="">
</button>
</div>
</div>
<br>
<br>
<br>
<br>
<div class="container-fluid clientbox text-center">
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div id="startpoint2"></div>
<div id="more2">
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class=" col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
</div>
</div>
<button onclick="toggleText2()" id="moreButton2">
<span class="pink2">Show More</span>
<img class="more2" src="./images/load-more.png" alt="">
</button>
</div>
</div>

The correct way to do that:
document.querySelectorAll('button.moreButton').forEach(bt =>
{
let
moreItem = bt.closest('div.row').querySelector('div.more_items')
, spPink = bt.querySelector('span.pink')
;
bt.onclick =_=>
{
spPink.textContent = moreItem.classList.toggle('noDisplay') ? 'Show More' : 'Show Less'
}
})
.more_items.noDisplay {
display: none;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="container-fluid clientbox text-center">
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="more_items">
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class=" col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
</div>
</div>
<button class="moreButton">
<span class="pink">Show Less</span>
<img class="more" src="./images/load-more.png" alt="">
</button>
</div>
</div>
<br>
<br>
<div class="container-fluid clientbox text-center">
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="more_items">
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class=" col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
</div>
</div>
<button class="moreButton">
<span class="pink">Show Less</span>
<img class="more" src="./images/load-more.png" alt="">
</button>
</div>
</div>

You had some issues with the naming of your variables etc. (things coming up as undefined).
function toggleText() {
var showMoreText = document.getElementById("more");
var buttonText = document.querySelector("#moreButton span");
var moreIcon = document.querySelector("#moreButton img");
if (startpoint.style.display === "none") {
showMoreText.style.display = "none";
startpoint.style.display = "table-cell";
buttonText.innerHTML = "Show More";
buttonText.classList.remove('less');
moreIcon.classList.remove('less');
} else {
showMoreText.style.display = "table-cell";
startpoint.style.display = "none";
buttonText.innerHTML = "Show Less";
buttonText.classList.add('less');
moreIcon.classList.add('less');
}
}
function toggleText2() {
var showMoreText2 = document.getElementById("more2");
var buttonText2 = document.querySelector("#moreButton2 span");
var moreIcon2 = document.querySelector("#moreButton2 img");
if (startpoint.style.display === "none") {
showMoreText2.style.display = "none";
startpoint.style.display = "table-cell";
buttonText2.innerHTML = "Show More";
buttonText2.classList.remove('less2');
moreIcon2.classList.remove('less2');
} else {
showMoreText2.style.display = "table-cell";
startpoint.style.display = "none";
buttonText2.innerHTML = "Show Less";
buttonText2.classList.add('less2');
moreIcon2.classList.add('less2');
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="container-fluid clientbox text-center">
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div id="startpoint"></div>
<div id="more">
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class=" col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
</div>
</div>
<button onclick="toggleText()" id="moreButton">
<span class="pink">Show More</span>
<img class="more" src="./images/load-more.png" alt="">
</button>
</div>
</div>
<br>
<br>
<br>
<br>
<div class="container-fluid clientbox text-center">
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div id="startpoint2"></div>
<div id="more2">
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class=" col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
</div>
</div>
<button onclick="toggleText2()" id="moreButton2">
<span class="pink2">Show More</span>
<img class="more2" src="./images/load-more.png" alt="">
</button>
</div>
</div>
With that said, there are much cleaner ways of constructing this logic. For instance, you could parse the event and look for a certain parent or child to toggle. That way, you can utilize the same function as long as it's surrounded by the same html structure. You'd have to exchange the id's for classes however.

gallery selector using bootstrap does not work

Below is the HTML followed by JavaScript file called filter.js.
I am developing a gallery page on my website and i believe i am missing some selector id or something because when i check the page, none of the pictures change and none of the categories work. please can someone help me see what i'm missing. Thank You
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
<script src="js/filter.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"
id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!--Start about area -->
<div class="about_area">
<div class="container">
<div class="row">
<div class="gallery col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h1 class="gallery-title">Gallery</h1>
</div>
<div align="center">
<button class="btn btn-default filter-button" data-filter="all">All</button>
<button class="btn btn-default filter-button" data-filter="hdpe">HDPE Pipes</button>
<button class="btn btn-default filter-button" data-filter="sprinkle">Sprinkle Pipes</button>
<button class="btn btn-default filter-button" data-filter="spray">Spray Nozzle</button>
<button class="btn btn-default filter-button" data-filter="irrigation">Irrigation
Pipes</button>
</div>
<br/>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<!--end about area -->
This is the javascript below
$(document).ready(function(){
$(".filter-button").click(function(){
var value = $(this).attr('data-filter');
if(value == "all")
{
// $('.filter').removeClass('hidden');
$('.filter').show('1000');
}else{
// $('.filter[filter-item="'+value+'"]').removeClass('hidden');
// $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
$(".filter").not('.'+value).hide('3000');
$('.filter').filter('.'+value).show('3000');
}
});
if ($(".filter-button").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");
});

"Can anyone Spot Error?" There is None atleast not in the code you posted , just Make sure you have the bootstrap and jquery working. The Rest of it seems to be working fine, i have changed the images so that you could see that the code is working
$(document).ready(function() {
$(".filter-button").click(function() {
var value = $(this).attr("data-filter");
if (value == "all") {
// $('.filter').removeClass('hidden');
$(".filter").show("1000");
} else {
// $('.filter[filter-item="'+value+'"]').removeClass('hidden');
// $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
$(".filter")
.not("." + value)
.hide("3000");
$(".filter")
.filter("." + value)
.show("3000");
}
});
if ($(".filter-button").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");
});
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
<style>
img {
width: 365px;
height: 365px;
}
</style>
</head>
<body>
<div class="about_area">
<div class="container">
<div class="row">
<div class="gallery col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h1 class="gallery-title">Gallery</h1>
</div>
<div align="center">
<button class="btn btn-default filter-button" data-filter="all">
All
</button>
<button class="btn btn-default filter-button" data-filter="hdpe">
HDPE Pipes
</button>
<button
class="btn btn-default filter-button"
data-filter="sprinkle"
>
Sprinkle Pipes
</button>
<button class="btn btn-default filter-button" data-filter="spray">
Spray Nozzle
</button>
<button
class="btn btn-default filter-button"
data-filter="irrigation"
>
Irrigation Pipes
</button>
</div>
<br />
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"
>
<img
src="https://www.apollopipes.com/media/product/18068_hdpe.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle"
>
<img
src="https://5.imimg.com/data5/VT/SC/MY-8859326/hdpe-sprinkler-pipe-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"
>
<img
src="https://www.fastflowpipes.com/wp-content/uploads/2014/10/19737_HDPE-PIPES.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"
>
<img
src="https://apollo-singapore.akamaized.net/v1/files/xbjlgpzdkcfh3-PK/image;s=850x0"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray"
>
<img
src="https://5.imimg.com/data5/LH/MW/MY-3212000/airless-spray-pipe-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"
>
<img
src="https://5.imimg.com/data5/CX/SG/MY-24086146/agricultural-drip-irrigation-pipes-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray"
>
<img
src="https://5.imimg.com/data5/LH/MW/MY-3212000/airless-spray-pipe-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"
>
<img
src="https://5.imimg.com/data5/CX/SG/MY-24086146/agricultural-drip-irrigation-pipes-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"
>
<img
src="https://5.imimg.com/data5/CX/SG/MY-24086146/agricultural-drip-irrigation-pipes-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"
>
<img
src="https://www.apollopipes.com/media/product/18068_hdpe.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray"
>
<img
src="https://5.imimg.com/data5/LH/MW/MY-3212000/airless-spray-pipe-500x500.jpg/"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle"
>
<img
src="https://5.imimg.com/data5/VT/SC/MY-8859326/hdpe-sprinkler-pipe-500x500.jpg"
class="img-responsive"
/>
</div>
</div>
</div>
</div>
<!--end about area -->
<!--The JS File -->
<script src="./index.js"></script>
</body>
</html>

$(document).ready(function() {
$(".filter-button").click(function() {
var value = $(this).attr("data-filter");
if (value == "all") {
// $('.filter').removeClass('hidden');
$(".filter").show("1000");
} else {
// $('.filter[filter-item="'+value+'"]').removeClass('hidden');
// $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
$(".filter")
.not("." + value)
.hide("3000");
$(".filter")
.filter("." + value)
.show("3000");
}
});
if ($(".filter-button").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");
});
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
<style>
img {
width: 365px;
height: 365px;
}
</style>
</head>
<body>
<div class="about_area">
<div class="container">
<div class="row">
<div class="gallery col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h1 class="gallery-title">Gallery</h1>
</div>
<div align="center">
<button class="btn btn-default filter-button" data-filter="all">
All
</button>
<button class="btn btn-default filter-button" data-filter="hdpe">
HDPE Pipes
</button>
<button
class="btn btn-default filter-button"
data-filter="sprinkle"
>
Sprinkle Pipes
</button>
<button class="btn btn-default filter-button" data-filter="spray">
Spray Nozzle
</button>
<button
class="btn btn-default filter-button"
data-filter="irrigation"
>
Irrigation Pipes
</button>
</div>
<br />
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"
>
<img
src="https://www.apollopipes.com/media/product/18068_hdpe.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle"
>
<img
src="https://5.imimg.com/data5/VT/SC/MY-8859326/hdpe-sprinkler-pipe-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"
>
<img
src="https://www.fastflowpipes.com/wp-content/uploads/2014/10/19737_HDPE-PIPES.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"
>
<img
src="https://apollo-singapore.akamaized.net/v1/files/xbjlgpzdkcfh3-PK/image;s=850x0"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray"
>
<img
src="https://5.imimg.com/data5/LH/MW/MY-3212000/airless-spray-pipe-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"
>
<img
src="https://5.imimg.com/data5/CX/SG/MY-24086146/agricultural-drip-irrigation-pipes-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray"
>
<img
src="https://5.imimg.com/data5/LH/MW/MY-3212000/airless-spray-pipe-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"
>
<img
src="https://5.imimg.com/data5/CX/SG/MY-24086146/agricultural-drip-irrigation-pipes-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"
>
<img
src="https://5.imimg.com/data5/CX/SG/MY-24086146/agricultural-drip-irrigation-pipes-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"
>
<img
src="https://www.apollopipes.com/media/product/18068_hdpe.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray"
>
<img
src="https://5.imimg.com/data5/LH/MW/MY-3212000/airless-spray-pipe-500x500.jpg/"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle"
>
<img
src="https://5.imimg.com/data5/VT/SC/MY-8859326/hdpe-sprinkler-pipe-500x500.jpg"
class="img-responsive"
/>
</div>
</div>
</div>
</div>
<!--end about area -->
<!--The JS File -->
<script src="./index.js"></script>
</body>
</html>

how to remove functionality of "ALL" button i want to show only rest categories instead of all. by default all images should now show when run the code.

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

How to add navigation to a modal

I want to add next and previous buttons on my modal footer that will navigate to next image in the div tag. I tried different options but it isn't working.
$(document).ready(function() {
$('.thumbnail').click(function($e) {
$e.preventDefault();
$('.modal-body').empty();
var title = $(this).parent('a').attr("title");
$('.modal-title').html(title);
$($(this).parents('div').html()).appen `enter code here`
dTo('.modal-body');
$('#myModal').modal({
show: true
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="col-md-6 class_b" id="class_b">
<h3>Screenshot Gallery</h3>
<div class="row" style="margin-top:40px;">
<div class="col-lg-4 col-sm-4 col-xs-6">
<a title="Image 1" href="#"><img class="thumbnail img-responsive" src="http://placehold.it/300x150/4286f4/ffffff?text=screenshot"></a>
</div>
<div class="col-lg-4 col-sm-4 col-xs-6">
<a title="Image 2" href="#"><img class="thumbnail img-responsive" src="http://placehold.it/300x150/4286f4/ffffff?text=screenshot"></a>
</div>
<div class="col-lg-4 col-sm-4 col-xs-6">
<a title="Image 3" href="#"><img class="thumbnail img-responsive" src="http://placehold.it/300x150/4286f4/ffffff?text=screenshot"></a>
</div>
<div class="col-lg-4 col-sm-4 col-xs-6">
<a title="Image 4" href="#"><img class="thumbnail img-responsive" src="http://placehold.it/300x150/4286f4/ffffff?text=screenshot"></a>
</div>
<div class="col-lg-4 col-sm-4 col-xs-6">
<a title="Image 5" href="#"><img class="thumbnail img-responsive" src="http://placehold.it/300x150/4286f4/ffffff?text=screenshot"></a>
</div>
<div class="col-lg-4 col-sm-4 col-xs-6">
<a title="Image 6" href="#"><img class="thumbnail img-responsive" src="http://placehold.it/300x150/4286f4/ffffff?text=screenshot"></a>
</div>
</div>
</div>
<div tabindex="-1" class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" onclick="$('.modal').hide();">×</button>
<h3 class="modal-title">Heading</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-prev">Prev</button>
<button type="button" class="btn btn-default btn-next">Next</button>
<button class="btn btn-default" onclick="$('.modal').hide();">Close</button>
</div>
</div>
</div>
</div>
JSFiddle

You have some errors in your JQuery code, on this line:
$($(this).parents('div').html()).appen`enter code here`dTo('.modal-body');
Here is the updated JQuery function:
$(document).ready(function() {
$('.thumbnail').click(function($e){
$e.preventDefault();
$('.modal').show();
$('.modal-body').empty();
var title = $(this).parent('a').attr('title');
$('.modal-title').html(title);
//The next line does what I think you want it to do, and is a replacement for the faulty code line
$(this).parent('a').parent('div').clone().appendTo('.modal-body');
$('#myModal').modal({show:true});
});
$('.btn-prev').click(function(){
var current = $('.modal-body').find('a').attr('title');
$('a[title="' + current + '"]').parent('div').prev('div').children('a').children('.thumbnail').trigger('click');
});
$('.btn-next').click(function(){
var current = $('.modal-body').find('a').attr('title');
$('a[title="' + current + '"]').parent('div').next('div').children('a').children('.thumbnail').trigger('click');
});
});
CodePen example: https://codepen.io/JamesDouglas/pen/vmPWoJ

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/

Categories

Resources