0

Boa noite, eu tenho o seguinte código que separa as imagens a serem mostradas no slideshow por categoria, até consegui mostrar as imagens separadas quando o usuário clica na categoria, porém, o lightbox está mostrando todas as imagens e eu preciso que ele mostre apenas as imagens da categoria selecionada, por exemplo, eu tenho oito imagens de diversas categorias, mas apenas três delas são da categoria salas, preciso que se estiver selecionado salas nas opções de categoria, o lightbox mostre apenas essas três imagens e está mostrando todas, agradeço muito se alguém souber como resolver.

Galeria por categoria

    <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>

2

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .