Develop Reference

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

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

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();
}
});
});

How to get a button side to an image

I have a page in which i want to display the button just side to an image ,therefore it looks like image button and so an as a loop where the implies to download but i am not good at css and I tried as below but it does not fix to my requirement.Can any one please adjust my code.Thanks in advance.
<section id="content" class="smPaddingTop60">
<div class="content-wrap">
<div class="container clearfix">
<div class="nobottommargin">
<div>
<div class="pressImg col-xs-12 col-sm-6 col-md-3">
<img img-cache ng-src="images/press/launchad_winners.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<button class=" col-xs-12 col-sm-6 col-md-3 btn btn-success" data-ng-click="closePotentialModel()">
<a target="_BLANK" href="https://app.hubspot.com/meetings/troy-martin"><span style="color:white;">Schedule a Meeting</span></a>
</button>
<hr>
<div class="imgContainer">
<img img-cache class="image_fade mgnbtm" ng-src="images/press/logo.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<hr>
<div class="imgContainer">
<img img-cache ng-src="images/press/xpertdox_logo_text.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<hr>
<div class="imgContainer">
<img img-cache class="image_fade mgnbtm" ng-src="images/press/logo_text_blue.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
</div>
</div>
</div>
</div>

maybe this?
img.the-image-class + .the-button-class {
display: block;
margin-top: -20px; /* to move button 20px above from original position */
}

Look at output i think html was not formatted well.
<section id="content" class="smPaddingTop60">
<div class="content-wrap">
<div class="container clearfix">
<div class="row">
<div class="pressImg col-xs-6 col-sm-6 col-md-6">
<img img-cache ng-src="images/press/launchad_winners.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<div class="col-xs-6 col-sm-6 col-md-6 ">
<button class="btn btn-sm btn-success" data-ng-click="closePotentialModel()">
<a target="_BLANK" href="https://app.hubspot.com/meetings/troy-martin"><span style="color:white;">Schedule a Meeting</span></a>
</button>
</div>
</div>
<hr />
<div class="imgContainer">
<img img-cache class="image_fade mgnbtm" ng-src="images/press/logo.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<hr />
<div class="imgContainer">
<img img-cache ng-src="images/press/xpertdox_logo_text.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<hr />
<div class="imgContainer">
<img img-cache class="image_fade mgnbtm" ng-src="images/press/logo_text_blue.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
</div>
</div>
</section>

May be like this,
<section id="content" class="smPaddingTop60">
<div class="content-wrap">
<div class="container clearfix">
<div class="nobottommargin">
<div class="clearfix">
<div class="pressImg col-xs-12 col-sm-6 col-md-3">
<img img-cache ng-src="images/press/launchad_winners.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<button class=" col-xs-12 col-sm-6 col-md-3 btn btn-success" data-ng-click="closePotentialModel()">
<a target="_BLANK" href="https://app.hubspot.com/meetings/troy-martin"><span style="color:white;">Schedule a Meeting</span></a>
</button>
</div>
<hr>
<div class="imgContainer">
<img img-cache class="image_fade mgnbtm" ng-src="images/press/logo.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<hr>
<div class="imgContainer">
<img img-cache ng-src="images/press/xpertdox_logo_text.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners" >
</div>
<hr>
<div class="imgContainer">
<img img-cache class="image_fade mgnbtm" ng-src="images/press/logo_text_blue.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners" >
</div>
</div>
</div>
</div>
</section>

Bootstrap Column filter using Javascript

I have a bootstrap columns as below (4 columns per row and many rows likewise), I need to filter the columns based on the label (General,Movie,Drama,etc...), something like this http://codepen.io/bmodena/pen/Fybdu . I need a javascript to do this. I can change the HTML code also as if required. I am kind of very beginner to JS.
Please help
<div class="col-sm-8" style="padding-left:0px;">
<div class="panel panel-primary">
<div class="panel-heading">
<h1 class="panel-title" style="font-size:20px;">Things</h1>
</div><br>
<div class="panel-body">
<div class="row" style="padding:10px;">
<div class="col-xs-5 col-sm-3 col-md-3">
<img src="/media/item1.jpg" class="img-responsive" alt="Image">
<br><p><b>Item1</b>
<br><span class="label label-success">Gereral</span>
</p>
</div>
<div class="col-xs-5 col-sm-3 col-md-3">
<img src="/media/item2.jpg" class="img-responsive" alt="Image">
<br><p><b>item2</b>
<br><span class="label label-success">Movie</span>
</p>
</div>
<div class="col-xs-5 col-sm-3 col-md-3">
<img src="/media/item3.jpg" class="img-responsive" alt="Image">
<br><p><b>items3</b>
<br><span class="label label-success">Gereral</span>
</p>
</div>
<div class="col-xs-5 col-sm-3 col-md-3">
<img src="/media/item4.jpg" class="img-responsive" alt="Image">
<br><p><b>items4</b>
<br><span class="label label-success">Drama</span>
</p>
</div>
</div><br>
<div class="row">
<div class="col-xs-5 col-sm-3 col-md-3">
<img src="/media/item5.jpg" class="img-responsive" alt="Image">
<br><p><b>items5</b>
<br><span class="label label-success">NEWS</span>
</p>
</div>
</div>
</div>
</div>

It should be simple using jQuery. Use selector to hide and show.
<div class="col-sm-8" style="padding-left:0px;">
<div class="panel panel-primary">
<div class="panel-heading">
<h1 class="panel-title" style="font-size:20px;">Things</h1>
</div>
<br>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-info" data-set="all">All</button>
<button class="btn btn-info" data-set="general">General</button>
<button class="btn btn-info" data-set="movie">Movie</button>
<button class="btn btn-info" data-set="news">News</button>
<button class="btn btn-info" data-set="drama">Drama</button>
</div>
</div>
<hr/>
<div class="row" style="padding:10px;">
<div class="col-xs-5 col-sm-3 col-md-3" data-group="general">
<img src="/media/item1.jpg" class="img-responsive" alt="Image">
<a href="/items1">
<br>
<p><b>Item1</b></a>
<br><span class="label label-success">Gereral</span>
</div>
<div class="col-xs-5 col-sm-3 col-md-3" data-group="movie">
<img src="/media/item2.jpg" class="img-responsive" alt="Image">
<a href="/items2">
<br>
<p><b>item2</b></a>
<br><span class="label label-success">Movie</span>
</div>
<div class="col-xs-5 col-sm-3 col-md-3" data-group="general">
<img src="/media/item3.jpg" class="img-responsive" alt="Image">
<a href="/items3">
<br>
<p><b>items3</b></a>
<br><span class="label label-success">Gereral</span>
</div>
<div class="col-xs-5 col-sm-3 col-md-3" data-group="drama">
<img src="/media/item4.jpg" class="img-responsive" alt="Image">
<a href="/items4">
<br>
<p><b>items4</b></a>
<br><span class="label label-success">Drama</span>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-5 col-sm-3 col-md-3" data-group="news">
<img src="/media/item5.jpg" class="img-responsive" alt="Image">
<a href="/items">
<br>
<p><b>items5</b></a>
<br><span class="label label-success">NEWS</span>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(e) {
$("[data-set]").click(function(e) {
if (this.dataset.set == "all") {
$("[data-group]").show();
return false;
}
var $currentLists = $("[data-group=" + this.dataset.set + "]");
$("[data-group]").not($currentLists).hide();
$currentLists.show();
});
});
</script>
jsfiddle link

Give lightbox effect to images

I want to put a lightbox effect on every image. When I click an image, it must be enlarged (on the same page) and when I click at any part of the webpage except the image, the image must close.
<div class="row jumbotron">
<div class="text-center">
<h1>Gallery</h1>
</div>
<div class="row">
<div class="col-md-4">
<div class="well">
<img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
</div>
</div>
<div class="col-md-4">
<div class="well">
<img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
</div>
</div>
<div class="col-md-4">
<div class="well">
<img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="well">
<img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
</div>
</div>
<div class="col-md-4">
<div class="well">
<img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
</div>
</div>
<div class="col-md-4">
<div class="well">
<img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="well">
<img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
</div>
</div>
</div>
</div>

Nice and easy with bootstrap.
<div class="col-sm-4">
<img src="*insert image*" class="img-responsive" data-toggle="modal" data-target=".lightbox"/>
<div class="modal lightbox" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<img src="*insert image*" class="img-responsive"/>
</div>
</div>
</div>
</div>