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();
}
});
});
Related
i have this good loking box grid
However, after adding a data filter and toggling between filters, the images appear in the same exact location and size as the grid that I designed. Is it feasible to have a data filter that displays all filtered images in one size?
this is my grid code
<div class="container">
<div class="text-center">
<button class="btn btn-default filter-button" data-filter="all">All</button>
<button class="btn btn-default filter-button" data-filter="bootstrap">BootStrap</button>
<button class="btn btn-default filter-button" data-filter="bootstrax">BootStrax</button>
<button class="btn btn-default filter-button" data-filter="purecss">Pure CSS</button>
</div>
<div class="container container-box">
<style>
.container-box{
width: 600px; }
</style>
<div class="row">
<div class="col-12"><img width="600" class="img-fluid pb-3 filter bootstrax "
src="./images/01.jpg" alt=""></div>
</div>
<div class="row g-3">
<div class="col-4"><img width="200" class="img-fluid filter bootstrap"
src="./images/02.jpg" alt=""></div>
<div class="col-4"><img width="200" class="img-fluid filter purecss"
src="./images/03.jpg" alt=""></div>
<div class="col-4"><img width="200" class="img-fluid filter bootstrax"
src="./images/04.jpg" alt=""></div>
</div>
</div>
</div>
$(document).ready(function() {
$(".filter-button").click(function(e) {
var value = $(this).attr("data-filter");
if (value == "all") {
$(".filter").show("1000");
} else {
$(".filter").filter("." + value).show("3000");
$(".filter").not("." + value).hide("3000");
}
});
if ($(".filter-button").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");
});
Is it possible to achieve that outcome in js, css, and html? Alternatively, if somebody has a better suggestion, please enlighten me.
You can simply use isotop js library by adding the following cdn to your script area :
<script src="https://unpkg.com/isotope-layout#3/dist/isotope.pkgd.min.js"></script>
You can still have the nested gallery structure and use the data filter by using isotope, also the filtered images will show properly one beside the other, and of course you will still have the same grid structure that will not be affected.
<div class="container text-center pt-5">
<div class="row">
<div class="col-md-12">
<div class="filters">
<h4>Featured categories</h4>
<ul>
<li data-filter=".idea">Furniture <img class="dot" src="./images/dot.svg"
alt=""></li>
<li data-filter=".ui">lighting <img class="dot" src="./images/dot.svg"
alt=""></li>
<li data-filter=".ux">Accessories <img class="dot" src="./images/dot.svg"
alt=""></li>
<li data-filter=".code">Tailor-made objects <img class="dot"
src="./images/dot.svg" alt=""></li>
<li class="is-checked fp" data-filter="*">All</li>
</ul>
</div>
</div>
<div class="col-md-12">
<div class="rows grid data-isotope='{ "itemSelector": ".grid-item", "masonry":
{ "columnWidth": 200 } }'">
<div class="col-md-12 grid-item code">
<img class="img-fluid" src="./images/01.jpg" alt="">
</div>
<div class="col-md-4 grid-item ux ">
<img class="img-fluid img-grid" src="./images/02.jpg" alt="">
</div>
<div class="col-md-4 grid-item ui">
<img class="img-fluid img-grid" src="./images/03.jpg" alt="">
</div>
<div class="col-md-4 grid-item idea">
<img class="img-fluid img-grid" src="./images/04.jpg" alt="">
</div>
<div class="col-md-4 grid-item ux ">
<img class="img-fluid img-grid" src="./images/02.jpg" alt="">
</div>
<div class="col-md-4 grid-item ui">
<img class="img-fluid img-grid" src="./images/03.jpg" alt="">
</div>
<div class="col-md-4 grid-item idea">
<img class="img-fluid img-grid" src="./images/04.jpg" alt="">
</div>
<div class="col-md-4 grid-item ux ">
<img class="img-fluid img-grid" src="./images/02.jpg" alt="">
</div>
<div class="col-md-4 grid-item ui">
<img class="img-fluid img-grid" src="./images/03.jpg" alt="">
</div>
<div class="col-md-4 grid-item idea">
<img class="img-fluid img-grid" src="./images/04.jpg" alt="">
</div>
</div>
</div>
and use the following script as well
var $grid = $('.grid').isotope({
// options
itemSelector: '.grid-item',
layoutMode: 'fitRows',
});
// change is-checked class on buttons
var $buttonGroup = $('.filters');
$buttonGroup.on( 'click', 'li', function( event ) {
$buttonGroup.find('.is-checked').removeClass('is-checked');
var $button = $( event.currentTarget );
$button.addClass('is-checked');
var filterValue = $button.attr('data-filter');
$grid.isotope({ filter: filterValue });
});
Best of luck
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
I'm a novice coder and working on a personal website and was really hoping to use the isotope filter function in the portfolio section of my site. I've been having trouble with it however and was wondering if anyone might be able to provide guidance? I'm not sure whether it's my html or jquery at this point. Very much appreciated!
Thank you,
Joanna
HTML:
<!--PORTFOLIO-->
<section id="portfolio-section" class="text-left">
<div class='container'>
<div class="row">
<div class="col-md-12">
<div class="portfolio">
<div class='container'>
<div class="page-header text-center wow fadeInDown" data-wow-delay="0.4s">
<h2>Portfolio</h2>
<h4>Increasing the accessibility & usefulness of data to decision-makers</h4>
</div>
</div>
<div class="portfolio_content_area">
<div class="portfolio_menu">
<center>
<ul id="filters">
<li class="active_prot_menu"><img src='images/data.png' height='13'> Data Visualisation & Reporting ▪ </li>
<li><img src='images/course.png' height='14'> Coursework ▪ </li>
<li><img src='images/art.png' height='14'> Artwork</li>
</ul>
</center></div>
<div class="portfolio_content" id="portfolio">
<div class='row' id="portfolio">
<div class="col-xs-12 col-sm-4 nopadding">
<div class="pcontainer"><div class="datavis">
<img src="images/1-dv.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><a href="portfolio/tableau.html" target="_blank"><img src='images/data_white.png' height='17'><h1>LensShift</h1>
<p>Data visualisation of the depth and breadth of the LensShift Taxonomy.<br>By collaborating with my colleagues, I ensure the quality of data is appropriate for effective and creative visualisation.</p></a></details>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 nopadding">
<div class="pcontainer"><div class="datavis">
<img src="images/2-siobn.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><a href="portfolio/SIOBN_Michaelmas17-18_Impact_Report.pdf" target="_blank"><img src='images/data_white.png' height='17'><h1>SIOBN</h1>
<p>Monitoring & evaluating the Social Impact Oxford Business Network's (SIOBN) initiatives. Providing ongoing reporting to stakeholders on the relevance of activities.</p></a></details>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 nopadding">
<div class="pcontainer"><div class="course">
<img src="images/3-BSC.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><a href="portfolio/3-bsc.html" target="_blank"><img src='images/course_white.png' height='21'><h1>Skoll Academy</h1>
<p>Strategic consulting project with Big Society Capital investigating social investment models to address domestic violence in the UK.</p></a></details>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 nopadding">
<div class="pcontainer"><div class="course">
<img src="images/4-EY.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><a href="portfolio/4-EY.html" target="_blank"><img src='images/course_white.png' height='21'><h1>Leadership</h1>
<p>A case study on the motivation and integration of EY's GigNow workforce.</p></a></details>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 nopadding">
<div class="pcontainer"><div class="course">
<img src="images/5-MedData.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><a href="portfolio/5-MedData.html" target="_blank"><img src='images/course_white.png' height='21'><h1>Global Health Challenge</h1>
<p>A case study on using MedData™ to lower the burden of chronic diseases.</p></a></details>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 nopadding">
<div class="pcontainer"><div class="art">
<img src="images/6-insta.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><a href="https://www.instagram.com/joannamakescards_/" target="_blank"><img src='images/art_white.png' height='22'><h1>Art</h1>
<p>Stationery, Design, Lettering</p></a></details>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</center>
</div>
</div>
</div>
</div>
</div>
</section>
jQuery:
$(window).load(function() {
$('.portfolio_menu ul li').click(function(){
$('.portfolio_menu ul li').removeClass('active_prot_menu');
$(this).addClass('active_prot_menu');
});
var $container = $('#portfolio');
$container.isotope({
itemSelector: '.col-sm-4',
layoutMode: 'fitRows'
});
$('#filters').on( 'click', 'a', function() {
var filterValue = $(this).attr('data-filter');
$container.isotope({ filter: filterValue });
return false;
});
});
<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
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/