How to add navigation to a modal

How to add navigation to a modal - javascript

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

Related

Scrolling is locking on mobile devices

I got an issue with my website when I am trying to scroll website on mobile devices sometimes its locking and even when you slide finger on device website is not moving properly. On desktop scrolling working fine. I tried to find the solution but cant figure out what is wrong.
You can test it with developers tools on 375 px resolution or in mobile devices here
Bootstrap 4 template: NOW UI Kit by Creative Tim
I thought problem is with cookie script but when I disable it by commenting in HTML problem is not solving. I tried to comment parts of my JS file but still not working.
There is my JS Script:
var selectedClass = "";
$(".filter").click(function () {
selectedClass = $(this).attr("data-rel");
$("#gallery").fadeTo(100, 0.1);
$("#gallery div").not("." + selectedClass).fadeOut().removeClass('animation');
setTimeout(function () {
$("." + selectedClass).fadeIn().addClass('animation');
$("#gallery").fadeTo(300, 1);
}, 300);
});
$( "#scrollDown" ).click(function() {
$( "html, body" ).animate({
scrollTop: 600
}, 600, function() {
// Animation complete.
});
});
//Gallery Animations
baguetteBox.run('.grid-gallery', { animation: 'slideIn' });
//Anchor Function
function scrollToAnchor(aid){
let aTag = $("a[name='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top}, 900);
}
//Menu Anchors Animations
$("#lexuslink").click(function() {
scrollToAnchor('lexus');
});
$("#fiatlink").click(function() {
scrollToAnchor('fiat');
});
$("#merclink").click(function() {
scrollToAnchor('merc');
});
$("#homelink").click(function(){
$('html, body').animate({scrollTop: 0}, 900)
});
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
let hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});
}
});
});
//E-mail Validation Function
$(".test").hide();
function validateForm() {
const name = document.getElementById('name').value;
if (name == "") {
document.querySelector('.status').innerHTML = "Wypełnij wszystkie pola.";
return false;
}
const email = document.getElementById('email').value;
if (email == "") {
document.querySelector('.status').innerHTML = "Wpisz swój adres email";
return false;
} else {
const re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (!re.test(email)) {
document.querySelector('.status').innerHTML = "Wpisz poprawny e-mail.";
return false;
}
}
const subject = document.getElementById('subject').value;
if (subject == "") {
document.querySelector('.status').innerHTML = "Wpisz temat wiadomości.";
return false;
}
const message = document.getElementById('message').value;
if (message == "") {
document.querySelector('.status').innerHTML = "Message cannot be empty";
return false;
}
document.querySelector('.status').innerHTML = "Wysyłanie...";
document.getElementById('contact-form').submit();
}
There is my HTML File:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="keywords" content="samochody,do,ślubu,wynajem,lexus,fiat,zabytkowe,klasyczne,mercedes,fiat">
<meta name="author" content="Daniel Mydlarz">
<title>Samochody do ślubu - Oświęcim i okolice</title>
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/now-ui-kit.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="sass/baguetteBox.min.css">
<link rel="stylesheet" type="text/css" href="sass/style.css">
<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link href="https://fonts.googleapis.com/css?family=Mansalva|Princess+Sofia&display=swap&subset=latin-ext"
rel="stylesheet">
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="code.js"></script>
</head>
<body class="landing-page sidebar-collapse">
<nav class="navbar navbar-expand-lg bg-primary fixed-top navbar-transparent" color-on-scroll="300">
<div class="container">
<div class="dropdown button-dropdown d-lg-none">
<a href="#pablo" class="dropdown-toggle" id="navbarDropdown" data-toggle="dropdown">
<span class="button-bar"></span>
<span class="button-bar"></span>
<span class="button-bar"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-header">MENU</a>
<a class="dropdown-item" href="#lexus">Samochody</a>
<a class="dropdown-item" href="#galeria">Galeria</a>
<a class="dropdown-item" href="#oferta">Oferta</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#kontakt">Kontakt</a>
</div>
</div>
<div class="navbar-translate">
<a class="align-baseline nav-link d-lg-none d-xl-none d-md-none float-left" rel="tooltip"
title="Zadzwon teraz aby dowiedziec sie wiecej" data-placement="bottom" href="tel:792-877-785"
target="_blank">
<i class="fa fa-phone" style="font-size:34px;color: white"></i>
</a>
<button class="navbar-toggler navbar-toggler" type="button" data-toggle="collapse"
data-target="#navigation" aria-controls="navigation-index" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-bar top-bar"></span>
<span class="navbar-toggler-bar middle-bar"></span>
<span class="navbar-toggler-bar bottom-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse fx-start" id="navigation"
data-nav-image="./assets/img/blurred-image-1.jpg">
<ul class="navbar-nav">
<li class="nav-item">
HOME
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdownbtn" href="" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Samochody
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuMenu">
<a href="#lexus" class="dropdown-item" id="lexuslink" name="itmlexus"
type="button">Lexus</a>
Fiat
<a href="#merc" class="dropdown-item" id="merclink" name="itmmerc"
type="button">Mercedes</a>
</div>
</li>
<li class="nav-item">
Galeria
</li>
<li class="nav-item">
Oferta
</li>
<li class="nav-item">
Kontakt
</li>
<li class="nav-item position-right10">
<a class="nav-link" rel="tooltip" title="Zadzwon teraz aby dowiedziec sie wiecej"
data-placement="bottom" href="tel:792-877-785" target="_blank">
<i class="fa fa-phone" style="font-size:34px;color: white"></i>
</a>
</li>
<li class="nav-item position-right">
<a class="nav-link" rel="tooltip" title="Sprawdź nas na Facebook'u" data-placement="bottom"
href="https://www.facebook.com/Samochody-do-Ślubu-Oświęcim-i-okolice-586389625167858"
target="_blank">
<i class="fa fa-facebook-official" style="font-size:34px;color:white"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Navbar -->
<div class="wrapper">
<div class="container-fluid p-0" style="overflow:hidden">
<div class="wrapper">
<div class="page-header page-header-small">
<div class="page-header-image" data-parallax="true"
style="background-image: url('img/slub-bg2.jpg')">
</div>
<div class="content-center welcome-text">
<div class="container-fluid landing-text">
<h1 class="h1-respononsive h1-title weird-font">Nowoczesne i klasyczne samochody do ślubu
</h1>
<h3 class="h3-responsive h3-title">Pozwól sobie na odrobinę luksusu...
</h3>
<i class="fa fa-angle-double-down fa-4x arrow-down pb-2" id="scrollDown"
aria-hidden="true"></i>
</div>
</div>
</div>
<main>
<section>
<a name="lexus"></a>
<div class="section pt-2 section-about-us">
<div class="container">
<div class="row" id="lexus">
<div class="col-md-8 ml-auto mr-auto text-center">
<h2 class="h2-responsive
font-weight-bold title my-4 border-top border-bottom py-2">
Nowoczesny Lexus</h2>
<div class="container-lexus-photo pb-4">
<img src="./img/bg-2.jpg" alt="Lexus" class="img-fluid">
</div>
</div>
</div>
<a name="fiat" />
<div class="row" id="fiat">
<div class="col-md-8 ml-auto mr-auto text-center">
<h2 class="h2-responsive
font-weight-bold title my-4 border-top border-bottom py-2">
Zabytkowy Fiat 126p</h2>
<div class="container-lexus-photo pb-4">
<img src="./img/fiat1.jpg" alt="Fiat 126p" class="img-fluid">
</div>
</div>
</div>
<a name="merc" />
<div class="row" id="merc">
<div class="col-md-8 ml-auto mr-auto text-center">
<h2 class="h2-responsive
font-weight-bold title my-4 border-top border-bottom py-2">
Klasyczny Mercedes</h2>
<div class="container-lexus-photo pb-4">
<img src="./img/merc1.jpg" alt="Mercedes" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- GALERIA -->
<h2 class="h2-responsive font-weight-bold text-center border-top border-bottom py-2" id="galeria">
Galeria
</h2>
<section class="gallery-block grid-gallery">
<div class="container">
<div class="btn-group-ctn">
<button type="button" class="btn btn-info filter" data-rel="all">Wszystkie</button>
<button type="button" class="btn btn-info filter" data-rel="1">Lexus</button>
<button type="button" class="btn btn-info filter" data-rel="3">Mercedes</button>
<button type="button" class="btn btn-info filter" data-rel="2">Fiat 126p</button>
</div>
<div class="row gallery" id="gallery">
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/1.jpg">
<img class="img-fluid image scale-on-hover" src="./img/1.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/2.jpg">
<img class="img-fluid image scale-on-hover" src="./img/2.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/3.jpg">
<img class="img-fluid image scale-on-hover" src="./img/3.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/4.jpg">
<img class="img-fluid image scale-on-hover" src="./img/4.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/5.jpg">
<img class="img-fluid image scale-on-hover" src="./img/5.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/6.jpg">
<img class="img-fluid image scale-on-hover" src="./img/6.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/7.jpg">
<img class="img-fluid image scale-on-hover" src="./img/7.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/8.jpg">
<img class="img-fluid image scale-on-hover" src="./img/8.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 2">
<a class="lightbox" href="./img/fiat01.jpg">
<img class="img-fluid image scale-on-hover" src="./img/fiat01.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 2">
<a class="lightbox" href="./img/fiat02.jpg">
<img class="img-fluid image scale-on-hover" src="./img/fiat02.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 2">
<a class="lightbox" href="./img/fiat03.jpg">
<img class="img-fluid image scale-on-hover" src="./img/fiat03.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 2">
<a class="lightbox" href="./img/fiat04.jpg">
<img class="img-fluid image scale-on-hover" src="./img/fiat04.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 2">
<a class="lightbox" href="./img/fiat05.jpg">
<img class="img-fluid image scale-on-hover" src="./img/fiat05.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 2">
<a class="lightbox" href="./img/fiat06.jpg">
<img class="img-fluid image scale-on-hover" src="./img/fiat06.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 3">
<a class="lightbox" href="./img/merc2.jpg">
<img class="img-fluid image scale-on-hover" src="./img/merc2.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 3">
<a class="lightbox" href="./img/merc3.jpg">
<img class="img-fluid image scale-on-hover" src="./img/merc3.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 3">
<a class="lightbox" href="./img/merc4.jpg">
<img class="img-fluid image scale-on-hover" src="./img/merc4.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 3">
<a class="lightbox" href="./img/merc5.jpg">
<img class="img-fluid image scale-on-hover" src="./img/merc5.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 3">
<a class="lightbox" href="./img/merc6.jpg">
<img class="img-fluid image scale-on-hover" src="./img/merc6.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 3">
<a class="lightbox" href="./img/merc7.jpg">
<img class="img-fluid image scale-on-hover" src="./img/merc7.jpg">
</a>
</div>
</div>
</div>
</section>
</main>
</div>
<h2 id="oferta" class="h2-responsive font-weight-bold text-center border-top border-bottom py-2 my-5">
Oferta</h2>
<section class="pricing py-5">
<div class="container">
<div class="row center-offer">
<!-- Free Tier -->
<div class="col-lg-8">
<div class="card mb-5 mb-lg-0">
<div class="card-body">
<h6 class="card-price text-center"><span class="period">od</span> 399 <span
class="period">zł</span>
</h6>
<ul class="fa-ul">
<h4 class="text-muted mt-1">Cena zawiera:</h4>
<li>
Wybrany samochód</li>
<li>
Dojazd do domu
Pani młodej oraz Pana młodego</li>
<li>
Dojazd do kościoła
pary młodej
</li>
<li>
Przejazd na
weselną sale
</li>
</ul>
<a href="#kontakt" class="btn btn-block btn-primary text-uppercase">Zapytaj o
wolne terminy</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="mb-4 pt-5 px-1" id="kontakt">
<div class="container">
<!--Section heading-->
<h2 class="h2-responsive font-weight-bold text-center my-4 border-top border-bottom py-2">
Skontaktuj się z nami</h2>
<!--Section description-->
<p class="text-center w-responsive mx-auto mb-5">Masz jakieś pytania? Chcesz dobrać indywidualną
ofertę?
</p>
<div class="row">
<!--Grid column-->
<div class="col-md-9 mb-md-0 mb-5 contact-form">
<form id="contact-form" name="contact-form" action="mail.php" method="POST">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="name" name="name" class="form-control">
<label for="name" class="">Twoje imię</label>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="email" name="email" class="form-control">
<label for="email" class="">Twój e-mail</label>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row">
<div class="col-md-12">
<div class="md-form mb-0">
<input type="text" id="subject" name="subject" class="form-control">
<label for="subject" class="">Temat</label>
</div>
</div>
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-12">
<div class="md-form">
<textarea type="text" id="message"
placeholder="Witam, interesuję mnie wynajem samochodu w terminie ..."
name="message" rows="2" class="form-control md-textarea"></textarea>
<label for="message">Twoja wiadomość</label>
</div>
</div>
</div>
<!--Grid row-->
</form>
<div class="text-center text-md-left">
<a class="btn btn-submit" onclick="validateForm()">Wyślij</a>
</div>
<div class="status"></div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-3 text-center kontakt-info">
<ul class="list-unstyled mb-0">
<li>
<i class="fa fa-map-marker fa-2x" aria-hidden="true"></i>
<p>32-600 Oświęcim, <br>
ul. Zagrodowa 31B</p>
</li>
<li><i class="fa fa-phone mt-4 fa-2x" style="color: black"></i>
<p>+48 792-877-785</p>
</li>
<li>
<i class="fa fa-envelope mt-4 fa-2x" aria-hidden="true" style="color: black"></i>
<p>kodiaqrentacar#gmail.com</p>
</li>
</ul>
</div>
<!--Grid column-->
</div>
</div>
</section>
</div>
<!-- Plugins -->
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/cookie-bar/cookiebar-latest.min.js?theme=white&always=1"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.11.0/baguetteBox.js" async></script>
<!-- Core JS Files -->
<script src="assets/js/core/jquery.min.js" type="text/javascript"></script>
<script src="assets/js/core/popper.min.js" type="text/javascript"></script>
<script src="assets/js/core/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.6/js/mdb.min.js"></script>
<!-- Plugin for Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ -->
<script src="assets/js/plugins/bootstrap-switch.js"></script>
<!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
<script src="assets\js\plugins/nouislider.min.js" type="text/javascript"></script>
<!-- Plugin for the DatePicker, full documentation here: https://github.com/uxsolutions/bootstrap-datepicker -->
<script src="assets/js/plugins/bootstrap-datepicker.js" type="text/javascript"></script>
<!-- Google Maps Plugin -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
<!-- Control Center for Now Ui Kit: parallax effects, scripts for the example pages etc -->
<script src="assets/js/now-ui-kit.js?v=1.3.0" type="text/javascript"></script>
</body>
</html>
Maybe someone had similar problem, hope to see some tips from you guys. If you need another script just tell me hope we solve this together.
Best Regards Daniel.

you need to remove below css code form your css file.
.wrapper {
overflow-x: hidden;
}
and also need to update your font size for the element #kontakt p in media query of 576px right now it is 1.1rem you need to reduce it 0.9rem.
I hope after done this two minor changes your scrolling problem will be solved.

How can I filter the card bootstrap HTMLDivElement properly?

I am creating a filtering function. With this function we want to filter the application cards, but I cannot display the element properly. The function does not show part of the filtered card, button, picture or text. I know that by placing "#myDIV *" in the .filter function it will search all the elements, even knowing this, I have not found the right way to do it.
Can anybody help me?
I have tried with the code below:
$(document).ready(function () {
$("#myInput").on("keyup", function () {
var value = $(this).val().toLowerCase();
$("#myDIV *").filter(function () {
if ($(this).text().toLowerCase() != "abrir") {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
}
});
});
});
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon.png">
<title>SGR - Desktop</title>
<!-- Custom CSS -->
<!-- Custom CSS -->
<link href="/assets/css/font-awesome.css" rel="stylesheet" />
<link href="/assets/libs/toastr/build/toastr.min.css" rel="stylesheet">
<link href="/assets/libs/select2/dist/css/select2.min.css" rel="stylesheet">
<link href="/dist/css/style.min.css" rel="stylesheet">
<link href="/dist/css/core.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- ============================================================== -->
<!-- Preloader - style you can find in spinners.css -->
<!-- ============================================================== -->
<div class="preloader">
<div class="lds-ripple">
<div class="lds-pos"></div>
<div class="lds-pos"></div>
</div>
</div>
<div id="main-wrapper">
<div class="page-wrapper">
<div class="page-breadcrumb">
<div class="row">
<div class="col-12 d-flex no-block align-items-center">
<div class="header-title">
<h1>
Home
<small>
<i class="fa fa-angle-right"></i>
Desktop
</small>
</h1>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
</style>
<input class="form-control col-md-3 col-sm-4 col-xs-6" id="myInput" type="text" placeholder="Search..">
<br />
<br />
<div class="container">
<div id="myDIV" class="row">
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="emulador project64">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">emulador project64</h5>
<p class="card-text">project64.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="overwatch">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">overwatch</h5>
<p class="card-text">overwatch.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="YouTube">
<img class="card-img-top" src="../../assets/images/YouTube.png">
<div class="card-body">
<h5 class="card-title">YouTube</h5>
<p class="card-text">Google Inc.</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Canal de Denuncias">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Canal de Denuncias</h5>
<p class="card-text">https://www.canaldedenuncia.cl/cda/metro/cdpages/Inicio.aspx</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Cipher">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Cipher</h5>
<p class="card-text">www.cipher.cl</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Terraria">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Terraria</h5>
<p class="card-text">shared/terraria.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Revista Andén">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Revista Andén</h5>
<p class="card-text">http://nt25_intranet/archivos/revistas/2017-03/revista.pdf</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Smov2">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Smov2</h5>
<p class="card-text">\\NT1_METRO\Aplicacion\Operaciones\smov2\SMOV 2.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Concursos internos">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Concursos internos</h5>
<p class="card-text">https://metro.openagora.cl/</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="The Clinic">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">The Clinic</h5>
<p class="card-text">www.theclinic.cl</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Hotmail">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Hotmail</h5>
<p class="card-text">http://www.hotmail.com</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Gmail">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Gmail</h5>
<p class="card-text">http://www.gmail.com</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="CNN">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">CNN</h5>
<p class="card-text">www.cnn.org</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Metro Familia">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Metro Familia</h5>
<p class="card-text">http://andensocial.metro.cl/aplicaciones-generales/metro-en-familia</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="League of Legends">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">League of Legends</h5>
<p class="card-text">lollauncher.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Minecraft Java Edition">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Minecraft Java Edition</h5>
<p class="card-text">minecraft.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Webmail Metro">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Webmail Metro</h5>
<p class="card-text">https://mail.metro.cl/owa/auth/logon.aspx?replaceCurrent=1&url=https%3a%2f%2fmail.metro.cl%2fowa%2f</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Autoconsulta ESS">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Autoconsulta ESS</h5>
<p class="card-text">http://172.16.20.60:84/sse_generico/espanol/generico_login.jsp?estado=0</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Andén Social">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Andén Social</h5>
<p class="card-text">http://andensocial.metro.cl</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Sitio Conductores">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Sitio Conductores</h5>
<p class="card-text">http://operaciones.metrosantiago.cl/</p>
Abrir
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer text-center">
<div class="modal" id="loginModal"><div class="modal-dialog modal-lg"><div class="modal-content"> <div id="login"></div>
</div></div></div>
</footer>
</div>
</div>
<script src="/assets/libs/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="/assets/libs/popper.js/dist/umd/popper.min.js"></script>
<script src="/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
<script src="/assets/extra-libs/sparkline/sparkline.js"></script>
<!--Wave Effects -->
<script src="/dist/js/waves.js"></script>
<!--Menu sidebar -->
<script src="/dist/js/sidebarmenu.js"></script>
<!--Custom JavaScript -->
<script src="/dist/js/custom.min.js"></script>
<script src="/dist/js/core.js"></script>
<script src="/assets/libs/toastr/build/toastr.min.js"></script>
<script src="/assets/libs/select2/dist/js/select2.full.min.js"></script>
<script src="/assets/libs/select2/dist/js/select2.min.js"></script>
<script src="/assets/libs/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="/assets/libs/bootbox/bootbox.js"></script>
<!--This page JavaScript -->
<!-- <script src="~/dist/js/pages/dashboards/dashboard1.js"></script> -->
<!-- Charts js Files -->
<!--Success Modal Templates-->
<div class="modal fade modal-message modal-success" id="modal-success"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"> <i class="far fa-check-circle"></i>
</div><div class="modal-title"> Correcto
</div><div class="modal-body"> La solicitud se efectuó con éxito
</div><div class="modal-footer"><button class="btn btn-success " data-dismiss="modal" type="button">Aceptar</button></div></div></div></div>
<!--End Success Modal Templates-->
<!--Info Modal Templates-->
<div class="modal fade modal-message modal-info" id="modal-info"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"> <i class="fa fa-envelope"></i>
</div><div class="modal-title"> Información
</div><div class="modal-body"> Se le notifica información importante
</div><div class="modal-footer"><button class="btn btn-info " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Info Modal Templates-->
<!--Danger Modal Templates-->
<div class="modal fade modal-message modal-danger" id="modal-danger"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"> <i class="glyphicon glyphicon-fire"></i>
</div><div class="modal-title"> Error
</div><div class="modal-body"> Se ha producido un error
</div><div class="modal-footer"><button class="btn btn-danger " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Danger Modal Templates-->
<!--Warning Modal Templates-->
<div class="modal fade modal-message modal-warning" id="modal-warning"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"> <i class="fa fa-warning"></i>
</div><div class="modal-title"> Alerta
</div><div class="modal-body"> Algo ha salido mal
</div><div class="modal-footer"><button class="btn btn-warning " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Warning Modal Templates-->
<!--Confirm Modal Templates-->
<div id="core_modalconfirmdialog" style="display:none;">
<div class="row">
<div class="col-md-12">
<div class="modal-header">
<i class="fa fa-warning"></i>
</div>
<div class="modal-body">
Mensaje
</div>
<div class="modal-body">
Mensaje que iría en el centro
</div>
</div>
</div>
</div>
<!--Confirm Modal Templates-->
</body>
</html>

You can first hide all cards while typing and only show the ones based on the search query. To simplify your filter a bit you could use includes as well.
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("div[class^=col]")
.hide()
.filter(function() {
var cardTitle = $(this).find('.card-title').text().toLowerCase();
return cardTitle.includes(value);
})
.show();
});
});
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon.png">
<title>SGR - Desktop</title>
<!-- Custom CSS -->
<!-- Custom CSS -->
<link href="/assets/css/font-awesome.css" rel="stylesheet" />
<link href="/assets/libs/toastr/build/toastr.min.css" rel="stylesheet">
<link href="/assets/libs/select2/dist/css/select2.min.css" rel="stylesheet">
<link href="/dist/css/style.min.css" rel="stylesheet">
<link href="/dist/css/core.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- ============================================================== -->
<!-- Preloader - style you can find in spinners.css -->
<!-- ============================================================== -->
<div class="preloader">
<div class="lds-ripple">
<div class="lds-pos"></div>
<div class="lds-pos"></div>
</div>
</div>
<div id="main-wrapper">
<div class="page-wrapper">
<div class="page-breadcrumb">
<div class="row">
<div class="col-12 d-flex no-block align-items-center">
<div class="header-title">
<h1>
Home
<small>
<i class="fa fa-angle-right"></i>
Desktop
</small>
</h1>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
</style>
<input class="form-control col-md-3 col-sm-4 col-xs-6" id="myInput" type="text" placeholder="Search..">
<br />
<br />
<div class="container">
<div id="myDIV" class="row">
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="emulador project64">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">emulador project64</h5>
<p class="card-text">project64.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="overwatch">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">overwatch</h5>
<p class="card-text">overwatch.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="YouTube">
<img class="card-img-top" src="../../assets/images/YouTube.png">
<div class="card-body">
<h5 class="card-title">YouTube</h5>
<p class="card-text">Google Inc.</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Canal de Denuncias">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Canal de Denuncias</h5>
<p class="card-text">https://www.canaldedenuncia.cl/cda/metro/cdpages/Inicio.aspx</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Cipher">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Cipher</h5>
<p class="card-text">www.cipher.cl</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Terraria">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Terraria</h5>
<p class="card-text">shared/terraria.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Revista Andén">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Revista Andén</h5>
<p class="card-text">http://nt25_intranet/archivos/revistas/2017-03/revista.pdf</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Smov2">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Smov2</h5>
<p class="card-text">\\NT1_METRO\Aplicacion\Operaciones\smov2\SMOV 2.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Concursos internos">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Concursos internos</h5>
<p class="card-text">https://metro.openagora.cl/</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="The Clinic">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">The Clinic</h5>
<p class="card-text">www.theclinic.cl</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Hotmail">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Hotmail</h5>
<p class="card-text">http://www.hotmail.com</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Gmail">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Gmail</h5>
<p class="card-text">http://www.gmail.com</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="CNN">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">CNN</h5>
<p class="card-text">www.cnn.org</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Metro Familia">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Metro Familia</h5>
<p class="card-text">http://andensocial.metro.cl/aplicaciones-generales/metro-en-familia</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="League of Legends">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">League of Legends</h5>
<p class="card-text">lollauncher.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Minecraft Java Edition">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Minecraft Java Edition</h5>
<p class="card-text">minecraft.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Webmail Metro">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Webmail Metro</h5>
<p class="card-text">https://mail.metro.cl/owa/auth/logon.aspx?replaceCurrent=1&url=https%3a%2f%2fmail.metro.cl%2fowa%2f</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Autoconsulta ESS">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Autoconsulta ESS</h5>
<p class="card-text">http://172.16.20.60:84/sse_generico/espanol/generico_login.jsp?estado=0</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Andén Social">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Andén Social</h5>
<p class="card-text">http://andensocial.metro.cl</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Sitio Conductores">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Sitio Conductores</h5>
<p class="card-text">http://operaciones.metrosantiago.cl/</p>
Abrir
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer text-center">
<div class="modal" id="loginModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div id="login"></div>
</div>
</div>
</div>
</footer>
</div>
</div>
<script src="/assets/libs/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="/assets/libs/popper.js/dist/umd/popper.min.js"></script>
<script src="/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
<script src="/assets/extra-libs/sparkline/sparkline.js"></script>
<!--Wave Effects -->
<script src="/dist/js/waves.js"></script>
<!--Menu sidebar -->
<script src="/dist/js/sidebarmenu.js"></script>
<!--Custom JavaScript -->
<script src="/dist/js/custom.min.js"></script>
<script src="/dist/js/core.js"></script>
<script src="/assets/libs/toastr/build/toastr.min.js"></script>
<script src="/assets/libs/select2/dist/js/select2.full.min.js"></script>
<script src="/assets/libs/select2/dist/js/select2.min.js"></script>
<script src="/assets/libs/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="/assets/libs/bootbox/bootbox.js"></script>
<!--This page JavaScript -->
<!-- <script src="~/dist/js/pages/dashboards/dashboard1.js"></script> -->
<!-- Charts js Files -->
<!--Success Modal Templates-->
<div class="modal fade modal-message modal-success" id="modal-success">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"> <i class="far fa-check-circle"></i>
</div>
<div class="modal-title"> Correcto
</div>
<div class="modal-body"> La solicitud se efectuó con éxito
</div>
<div class="modal-footer"><button class="btn btn-success " data-dismiss="modal" type="button">Aceptar</button></div>
</div>
</div>
</div>
<!--End Success Modal Templates-->
<!--Info Modal Templates-->
<div class="modal fade modal-message modal-info" id="modal-info">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"> <i class="fa fa-envelope"></i>
</div>
<div class="modal-title"> Información
</div>
<div class="modal-body"> Se le notifica información importante
</div>
<div class="modal-footer"><button class="btn btn-info " data-dismiss="modal" type="button">Ok</button></div>
</div>
</div>
</div>
<!--End Info Modal Templates-->
<!--Danger Modal Templates-->
<div class="modal fade modal-message modal-danger" id="modal-danger">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"> <i class="glyphicon glyphicon-fire"></i>
</div>
<div class="modal-title"> Error
</div>
<div class="modal-body"> Se ha producido un error
</div>
<div class="modal-footer"><button class="btn btn-danger " data-dismiss="modal" type="button">Ok</button></div>
</div>
</div>
</div>
<!--End Danger Modal Templates-->
<!--Warning Modal Templates-->
<div class="modal fade modal-message modal-warning" id="modal-warning">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"> <i class="fa fa-warning"></i>
</div>
<div class="modal-title"> Alerta
</div>
<div class="modal-body"> Algo ha salido mal
</div>
<div class="modal-footer"><button class="btn btn-warning " data-dismiss="modal" type="button">Ok</button></div>
</div>
</div>
</div>
<!--End Warning Modal Templates-->
<!--Confirm Modal Templates-->
<div id="core_modalconfirmdialog" style="display:none;">
<div class="row">
<div class="col-md-12">
<div class="modal-header">
<i class="fa fa-warning"></i>
</div>
<div class="modal-body">
Mensaje
</div>
<div class="modal-body">
Mensaje que iría en el centro
</div>
</div>
</div>
</div>
<!--Confirm Modal Templates-->
</body>
</html>

$('#box').keyup(function(){
var valThis = $(this).val().toLowerCase();
if(valThis === ""){
$('.library_card > div').show();
} else {
$('.library_card > div').each(function(){
var text = $(this).text().toLowerCase();
(text.indexOf(valThis) >= 0) ? $(this).show() : $(this).hide();
});
};
});
// #box-- inpuut type text id
// .library_card -- div class

I found this way to solve the problem and prevent the cards from being displayed incorrectly:
$(document).ready(function () {
$("#myInput").on("keyup", function () {
var value = $(this).val().toLowerCase();
$(".card").filter(function () {
$(this.parentNode).toggle($(this).find('.card-title').text().toLowerCase().indexOf(value) > -1)
});
});
});
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.card {
min-height: 250px;
}
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon.png">
<title>SGR - Desktop</title>
<!-- Custom CSS -->
<!-- Custom CSS -->
<link href="/assets/css/font-awesome.css" rel="stylesheet" />
<link href="/assets/libs/toastr/build/toastr.min.css" rel="stylesheet">
<link href="/assets/libs/select2/dist/css/select2.min.css" rel="stylesheet">
<link href="/dist/css/style.min.css" rel="stylesheet">
<link href="/dist/css/core.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- ============================================================== -->
<!-- Preloader - style you can find in spinners.css -->
<!-- ============================================================== -->
<div class="preloader">
<div class="lds-ripple">
<div class="lds-pos"></div>
<div class="lds-pos"></div>
</div>
</div>
<div id="main-wrapper">
<div class="page-wrapper">
<div class="page-breadcrumb">
<div class="row">
<div class="col-12 d-flex no-block align-items-center">
<div class="header-title">
<h1>
Home
<small>
<i class="fa fa-angle-right"></i>
Desktop
</small>
</h1>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
</style>
<input class="form-control col-md-3 col-sm-4 col-xs-6" id="myInput" type="text" placeholder="Search..">
<br />
<br />
<div class="container">
<div id="myDIV" class="row">
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="emulador project64">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">emulador project64</h5>
<p class="card-text">project64.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="overwatch">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">overwatch</h5>
<p class="card-text">overwatch.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="YouTube">
<img class="card-img-top" src="../../assets/images/YouTube.png">
<div class="card-body">
<h5 class="card-title">YouTube</h5>
<p class="card-text">Google Inc.</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Canal de Denuncias">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Canal de Denuncias</h5>
<p class="card-text">https://www.canaldedenuncia.cl/cda/metro/cdpages/Inicio.aspx</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Cipher">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Cipher</h5>
<p class="card-text">www.cipher.cl</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Terraria">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Terraria</h5>
<p class="card-text">shared/terraria.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Revista Andén">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Revista Andén</h5>
<p class="card-text">http://nt25_intranet/archivos/revistas/2017-03/revista.pdf</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Smov2">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Smov2</h5>
<p class="card-text">\\NT1_METRO\Aplicacion\Operaciones\smov2\SMOV 2.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Concursos internos">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Concursos internos</h5>
<p class="card-text">https://metro.openagora.cl/</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="The Clinic">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">The Clinic</h5>
<p class="card-text">www.theclinic.cl</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Hotmail">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Hotmail</h5>
<p class="card-text">http://www.hotmail.com</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Gmail">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Gmail</h5>
<p class="card-text">http://www.gmail.com</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="CNN">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">CNN</h5>
<p class="card-text">www.cnn.org</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Metro Familia">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Metro Familia</h5>
<p class="card-text">http://andensocial.metro.cl/aplicaciones-generales/metro-en-familia</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="League of Legends">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">League of Legends</h5>
<p class="card-text">lollauncher.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Minecraft Java Edition">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Minecraft Java Edition</h5>
<p class="card-text">minecraft.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Webmail Metro">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Webmail Metro</h5>
<p class="card-text">https://mail.metro.cl/owa/auth/logon.aspx?replaceCurrent=1&url=https%3a%2f%2fmail.metro.cl%2fowa%2f</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Autoconsulta ESS">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Autoconsulta ESS</h5>
<p class="card-text">http://172.16.20.60:84/sse_generico/espanol/generico_login.jsp?estado=0</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Andén Social">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Andén Social</h5>
<p class="card-text">http://andensocial.metro.cl</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Sitio Conductores">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Sitio Conductores</h5>
<p class="card-text">http://operaciones.metrosantiago.cl/</p>
Abrir
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer text-center">
<div class="modal" id="loginModal"><div class="modal-dialog modal-lg"><div class="modal-content"> <div id="login"></div>
</div></div></div>
</footer>
</div>
</div>
<script src="/assets/libs/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="/assets/libs/popper.js/dist/umd/popper.min.js"></script>
<script src="/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
<script src="/assets/extra-libs/sparkline/sparkline.js"></script>
<!--Wave Effects -->
<script src="/dist/js/waves.js"></script>
<!--Menu sidebar -->
<script src="/dist/js/sidebarmenu.js"></script>
<!--Custom JavaScript -->
<script src="/dist/js/custom.min.js"></script>
<script src="/dist/js/core.js"></script>
<script src="/assets/libs/toastr/build/toastr.min.js"></script>
<script src="/assets/libs/select2/dist/js/select2.full.min.js"></script>
<script src="/assets/libs/select2/dist/js/select2.min.js"></script>
<script src="/assets/libs/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="/assets/libs/bootbox/bootbox.js"></script>
<!--This page JavaScript -->
<!-- <script src="~/dist/js/pages/dashboards/dashboard1.js"></script> -->
<!-- Charts js Files -->
<!--Success Modal Templates-->
<div class="modal fade modal-message modal-success" id="modal-success"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"> <i class="far fa-check-circle"></i>
</div><div class="modal-title"> Correcto
</div><div class="modal-body"> La solicitud se efectuó con éxito
</div><div class="modal-footer"><button class="btn btn-success " data-dismiss="modal" type="button">Aceptar</button></div></div></div></div>
<!--End Success Modal Templates-->
<!--Info Modal Templates-->
<div class="modal fade modal-message modal-info" id="modal-info"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"> <i class="fa fa-envelope"></i>
</div><div class="modal-title"> Información
</div><div class="modal-body"> Se le notifica información importante
</div><div class="modal-footer"><button class="btn btn-info " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Info Modal Templates-->
<!--Danger Modal Templates-->
<div class="modal fade modal-message modal-danger" id="modal-danger"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"> <i class="glyphicon glyphicon-fire"></i>
</div><div class="modal-title"> Error
</div><div class="modal-body"> Se ha producido un error
</div><div class="modal-footer"><button class="btn btn-danger " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Danger Modal Templates-->
<!--Warning Modal Templates-->
<div class="modal fade modal-message modal-warning" id="modal-warning"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"> <i class="fa fa-warning"></i>
</div><div class="modal-title"> Alerta
</div><div class="modal-body"> Algo ha salido mal
</div><div class="modal-footer"><button class="btn btn-warning " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Warning Modal Templates-->
<!--Confirm Modal Templates-->
<div id="core_modalconfirmdialog" style="display:none;">
<div class="row">
<div class="col-md-12">
<div class="modal-header">
<i class="fa fa-warning"></i>
</div>
<div class="modal-body">
Mensaje
</div>
<div class="modal-body">
Mensaje que iría en el centro
</div>
</div>
</div>
</div>
<!--Confirm Modal Templates-->
</body>
</html>

Mixitup Filter with Bootstrap Modals

I'm trying to allow for modals to be opened within the Mixitup filtration.
Whenever I click an image (either before filtering or after, it doesn't matter) the modal opens but then no buttons on the filter are active and no images are shown. Even when closing the modal, this stays the same until you press the 'All' button again.
I'd imagine it's some issue with the different data-filter/toggle/targets between the modal and the filters.
js
var containerEl = document.querySelector('.mixitupContainer');
var mixer = mixitup(containerEl, {
controls: {
toggleLogic: 'and'
},
animation: {
effects: 'fade',
duration: 200,
nudge: false,
reverseOut: false
}
});
css
.mix img {
margin-bottom: 30px;
}
.mixitup-control-active {
background: #888;
}
html
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://demos.kunkalabs.com/mixitup/mixitup.min.js"></script>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="text-center">Filter Example with Modals</h2>
</div>
</div>
<hr>
</div>
<div class="container">
<div class="col-lg-12">
<div class="controls text-center">
<button type="button" class="control btn btn-filter" data-filter="all">All</button>
<button type="button" class="control btn btn-filter" data-toggle=".green">Green</button>
<button type="button" class="control btn btn-filter" data-toggle=".yellow">Yellow</button>
<button type="button" class="control btn btn-filter" data-toggle=".purple">Purple</button>
<button type="button" class="control btn btn-filter" data-toggle=".pink">Pink</button>
<button type="button" class="control btn btn-filter" data-toggle=".blue">Blue</button>
<button type="button" class="control btn btn-filter" data-toggle=".orange">Orange</button>
</div>
<hr>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="mixitupContainer">
<div class="col-lg-4 col-md-6 col-sm-6 mix all">
<a data-toggle="modal" data-target=".gif-1-modal">
<img src="http://placehold.it/500x500?text=G,Y,Pu,Pi,B,O" class="img-responsive center-block">
</a>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mix green pink orange">
<a data-toggle="modal" data-target=".gif-1-modal">
<img src="http://placehold.it/500x500?text=G,Pi,O" class="img-responsive center-block">
</a>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mix green yellow blue">
<a data-toggle="modal" data-target=".gif-1-modal">
<img src="http://placehold.it/500x500?text=G,Y,B" class="img-responsive center-block">
</a>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mix green yellow pink">
<a data-toggle="modal" data-target=".gif-1-modal">
<img src="http://placehold.it/500x500?text=G,Y,Pi" class="img-responsive center-block">
</a>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mix green yellow blue">
<a data-toggle="modal" data-target=".gif-1-modal">
<img src="http://placehold.it/500x500?text=G,Y,B" class="img-responsive center-block">
</a>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mix green yellow pink">
<a data-toggle="modal" data-target=".gif-1-modal">
<img src="http://placehold.it/500x500?text=G,Y,Pi" class="img-responsive center-block">
</a>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mix green purple blue">
<a data-toggle="modal" data-target=".gif-1-modal">
<img src="http://placehold.it/500x500?text=G,Pu,B" class="img-responsive center-block">
</a>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mix purple blue orange">
<a data-toggle="modal" data-target=".gif-1-modal">
<img src="http://placehold.it/500x500?text=Pu,B,O" class="img-responsive center-block">
</a>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mix all">
<a data-toggle="modal" data-target=".gif-1-modal">
<img src="http://placehold.it/500x500?text=G,Y,Pu,Pi,B,O" class="img-responsive center-block">
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 1 -->
<div class="modal fade gif-1-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<img src="http://placehold.it/500x500" class="img-responsive center-block">
</div>
</div>
</div>
</body>
I've recreated the issue in this jsfiddle.
Basically I want the modal to open and for the filter in the background to remain as it was before I clicked the modal link.
I understand basic JS but I'm not capable of debugging this and/or knowing straight away a workaround. Any help would be very much appreciated! Sorry if it's a really simple question too..

I added some javascript and have attached a jsfiddle
essentialy I am triggering the click event to the all filter when closed.
If you wanted to modify it to restore the current you could capture those to a variable (again I am not familiar with the mixitup lib and available functions)
$(document).ready(function() {
var containerEl = document.querySelector('.mixitupContainer');
var mixer = mixitup(containerEl, {
controls: {
toggleLogic: 'and'
},
animation: {
effects: 'fade',
duration: 200,
nudge: false,
reverseOut: false
}
});
$('.gif-1-modal').on('hidden.bs.modal', function(e) {
$('#all').click();
})
});
https://jsfiddle.net/happymacarts/8jjoLhk4/

Bootstrap uses the attribute data-toggle internally, which interferes with MixItUp.
See issue and solution on Github:
https://github.com/patrickkunka/mixitup/issues/268

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/

bootstrap modal photo gallery

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>

Develop Reference

JavaScript is the programming language of the Web.

How to add navigation to a modal - javascript

Related

Scrolling is locking on mobile devices

How can I filter the card bootstrap HTMLDivElement properly?

Mixitup Filter with Bootstrap Modals

Modal Lightbox Gallery and Carousel Slider incompatible?

bootstrap modal photo gallery

Categories

Resources