Slideshow lightbox show images by category

0

Good night, I have the following code that separates the images to be shown in the slideshow by category, I even managed to show the separated images when the user clicks on the category, however, the lightbox is showing all the images and I need it show only the images of the selected category, for example, I have eight images of several categories, but only three of them are from the category rooms, I need that if rooms are selected in the category options, the lightbox shows only these three images and is showing all , thank you very much if anyone 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><scriptsrc="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>

    
asked by anonymous 28.03.2016 / 05:32

0 answers