0
Good evening, I have the following code that separates the images to be shown in the slideshow by category, until I was able to show the separate images when the user clicks in the category, however, the lightbox is showing all the images and I need it to show only the images of the selected category, for example, I have eight images from various categories, but only three of them are of the category rooms, I need that if you are selected rooms in the category options, lightbox shows only these three images and is showing all, I really appreciate if someone knows how to solve.
Gallery by category
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
<script type="text/javascript">
$(function () {
$('#galeria a').lightBox();
});
</script>
<style type="text/css" media="screen">
#galeria ul{
list-style-type:none;
margin:0px;
padding:0px;
}
#galeria ul li{
margin:0px;
padding:5px;
font-size:14px;
}
</style>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- 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.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="ic"></div>
<div class="section">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">Galeria</h1>
<div class="gallery-info" id="filters">
<ul class="nav nav-justified nav-tabs">
<li>
<a href="#gallery" class="scroll" id="#">Todos</a>
</li>
<li class="">
<a href="#gallery" class="scroll" id="salas">Salas</a>
</li>
<li>
<a href="#gallery" class="scroll" id="quartos">Dormitórios</a>
</li>
<li>
<a href="#gallery" class="scroll" id="banheiros">Banheiros</a>
</li>
<li>
<a href="#gallery" class="scroll" id="escritorio">Escritórios</a>
</li>
<li>
<a href="#gallery" class="scroll" id="outros">Outros</a>
</li>
</ul>
</div>
</div>
</div>
<div id="galeria">
<ul class="row">
<li class="salas col-md-3">
<a href="images/1.jpg" rel="lightbox[plants]">
<img src="images/1.jpg" class="img-responsive" >
</a>
</li>
<li class="salas col-md-3">
<a href="images/2.jpg" rel="lightbox[plants]">
<img src="images/2.jpg" class="img-responsive">
</a>
</li>
<li class="quartos col-md-3">
<a href="images/2.jpg" rel="lightbox[plants]">
<img src="images/3.jpg" class="img-responsive">
</a>
</li>
<li class="banheiros col-md-3">
<a href="images/4.jpg" rel="lightbox[plants]">
<img src="images/4.jpg" class="img-responsive">
</a>
</li>
</ul>
<ul class="row">
<li class="quartos col-md-3">
<a href="images/5.jpg" rel="lightbox[plants]">
<img src="images/5.jpg" class="img-responsive">
</a>
</li>
<li class="escritorio col-md-3">
<a href="images/6.jpg" rel="lightbox[plants]">
<img src="images/6.jpg" class="img-responsive">
</a>
</li>
<li class="salas col-md-3">
<a href="images/9.jpg" rel="lightbox[plants]">
<img src="images/9.jpg" class="img-responsive">
</a>
</li>
<li class="escritorio col-md-3">
<a href="images/8.jpg" rel="lightbox[plants]">
<img src="images/8.jpg" class="img-responsive">
</a>
</li>
</li>
</ul>
</div>
<div class="col-md-12 text-center">
<ul class="pagination">
<li>
<a href="#">Prev</a>
</li>
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li>
<a href="#">Next</a>
</li>
</ul>
</div>
</div>
<div class="section">
<div class="container"></div>
</div>
<!-- jQuery -->
<script src="//code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#filters a').click(function(e){
e.preventDefault();
var filter = $(this).attr('id');
$('#galeria ul li').show().addClass('visible');
$('#galeria ul li:not(.' + filter + ')').hide().removeClass('visible');
});
$('#galeria ul li').hover(function(){
$(this).addClass('li_hover');
},function(){
$(this).removeClass('li_hover');
});
});
</script>
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="Hello World"></script>
</body>
Wow... I took the first one I found to download. I’ll try to find a way out, thank you, Renan
– Wilerson Vaz
http://lokeshdhakar.com/projects/lightbox2/ This is the plugin I’m using
– Wilerson Vaz