1

Estoy realizando un sitio web en el cual debo poner varias galerías en la misma página para ver diferentes vehículos con sus fotos. Lo que sucede es que al dar click en la foto de uno de los vehículos se despliega la galería con las fotos de los todos los vehículos, cuando solo deberían aparecer las fotos de un solo vehículo al cual corresponden sus fotos.

Las galerías están hechas con HTML, CSS y JavaScript (usando un plugin de jQuery llamado jzBox) de la siguiente manera:

/*-- gallery --*/
.gallery-grids{
  margin:3em 0 0;
}
.gallery-grid-left,.gallery-grid-right{
  padding-left:0;
}
.gallery-grid-right1{
  float:left;
  width:48.6%;
}
.gallery-grid-right2{
  float:right;
  width:48.6%;
}
.gallery-grid-right-grid:nth-child(2){
  padding:1em 0;
}
.gallery-grid-left-grid,.gallery-grid-left-grid-left-grid:nth-child(2){
  padding:1em 0 0;
}
.gallery-grid-left-grid-left{
  float:left;
  width:48.6%;
}
.gallery-grid-left-grid-right{
  float:right;
  width:48.6%;
}
.view {
  width: 100%;
  margin: 0px;
  float: none;
  border: 0px solid #fff;
  overflow: hidden;
  position: relative;
  text-align: center;
  -webkit-box-shadow: 1px 1px 2px #e6e6e6;
  -moz-box-shadow: 1px 1px 2px #e6e6e6;
  box-shadow: 1px 1px 2px #e6e6e6;
}
.view .mask,.view .content {
  width: 100%;
  height: 300px;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  padding:8.5em 0 0;
}
.view-eighth:hover .mask1 {
  height: 180px !important;
}
.view .mask1 {
  padding: 2em 0 0 !important;
}
.view-eighth:hover .mask2 {
  height: 378px !important;
}
.view img {
  display: block;
  position: relative;
}
.view h4 {
  text-transform: capitalize;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 2em;
  padding: 0;
  margin: 0;
}
h4.late {
  padding-top: 3.5em;
}
.view p {
  position: relative;
  color: #fff !important;
  padding: 20px 20px 0px;
  text-align: center;
  line-height: 1.8em;
}
.view a.info {
  display: inline-block;
  text-decoration: none;
  padding: 7px 14px;
  background: #000;
  color: #fff;
  text-transform: uppercase;
  -webkit-box-shadow: 0 0 1px #000;
  -moz-box-shadow: 0 0 1px #000;
  box-shadow: 0 0 1px #000;
}
.view a.info: hover {
  -webkit-box-shadow: 0 0 5px #000;
  -moz-box-shadow: 0 0 5px #000;
  box-shadow: 0 0 5px #000;
}

.view-eighth .mask {
  background-color:rgba(73, 192, 219, 0.5);
  top: -200px;
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  -webkit-transition: all 0.3s ease-out 0.5s;
  -moz-transition: all 0.3s ease-out 0.5s;
  -o-transition: all 0.3s ease-out 0.5s;
  -ms-transition: all 0.3s ease-out 0.5s;
  transition: all 0.3s ease-out 0.5s;
}
.view-eighth h2 {
  -webkit-transform: translateY(-200px);
  -moz-transform: translateY(-200px);
  -o-transform: translateY(-200px);
  -ms-transform: translateY(-200px);
  transform: translateY(-200px);
  -webkit-transition: all 0.2s ease-in-out 0.1s;
  -moz-transition: all 0.2s ease-in-out 0.1s;
  -o-transition: all 0.2s ease-in-out 0.1s;
  -ms-transition: all 0.2s ease-in-out 0.1s;
  transition: all 0.2s ease-in-out 0.1s;
}
.view-eighth p {
  color: #333;
  -webkit-transform: translateY(-200px);
  -moz-transform: translateY(-200px);
  -o-transform: translateY(-200px);
  -ms-transform: translateY(-200px);
  transform: translateY(-200px);
  -webkit-transition: all 0.2s ease-in-out 0.2s;
  -moz-transition: all 0.2s ease-in-out 0.2s;
  -o-transition: all 0.2s ease-in-out 0.2s;
  -ms-transition: all 0.2s ease-in-out 0.2s;
  transition: all 0.2s ease-in-out 0.2s;
}
.view-eighth a.info {
  -webkit-transform: translateY(-200px);
  -moz-transform: translateY(-200px);
  -o-transform: translateY(-200px);
  -ms-transform: translateY(-200px);
  transform: translateY(-200px);
  -webkit-transition: all 0.2s ease-in-out 0.3s;
  -moz-transition: all 0.2s ease-in-out 0.3s;
  -o-transition: all 0.2s ease-in-out 0.3s;
  -ms-transition: all 0.2s ease-in-out 0.3s;
  transition: all 0.2s ease-in-out 0.3s;
}
.vie:hover .mask {
  height:369px !important;
}
.view-eighth:hover .mask {
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  top: 0px;
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -ms-transition-delay: 0s;
  transition-delay: 0s;
  -webkit-animation: bounceY 0.9s linear;
  -moz-animation: bounceY 0.9s linear;
  -ms-animation: bounceY 0.9s linear;
  animation: bounceY 0.9s linear;
  height: 385px;
}
.view-eighth:hover h2 {
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -o-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
  -webkit-transition-delay: 0.4s;
  -moz-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  -ms-transition-delay: 0.4s;
  transition-delay: 0.4s;
}
.view-eighth:hover p {
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -o-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.view-eighth:hover a.info {
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -o-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -ms-transition-delay: 0s;
  transition-delay: 0s;
}
@keyframes bounceY {
  0% { transform: translateY(-205px);}
  40% { transform: translateY(-100px);}
  65% { transform: translateY(-52px);}
  82% { transform: translateY(-25px);}
  92% { transform: translateY(-12px);}
  55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
}
@-moz-keyframes bounceY {
  0% { -moz-transform: translateY(-205px);}
  40% { -moz-transform: translateY(-100px);}
  65% { -moz-transform: translateY(-52px);}
  82% { -moz-transform: translateY(-25px);}
  92% { -moz-transform: translateY(-12px);}
  55%, 75%, 87%, 97%, 100% { -moz-transform: translateY(0px);}
}
@-webkit-keyframes bounceY {
  0% { -webkit-transform: translateY(-205px);}
  40% { -webkit-transform: translateY(-100px);}
  65% { -webkit-transform: translateY(-52px);}
  82% { -webkit-transform: translateY(-25px);}
  92% { -webkit-transform: translateY(-12px);}
  55%, 75%, 87%, 97%, 100% { -webkit-transform: translateY(0px);}
}
.view1 {
  width: 570px;
  height: 300px;
  margin: 0px;
  float: left;
  border: 0px solid #fff;
  overflow: hidden;
  position: relative;
  text-align: center;
  -webkit-box-shadow: 1px 1px 2px #e6e6e6;
  -moz-box-shadow: 1px 1px 2px #e6e6e6;
  box-shadow: 1px 1px 2px #e6e6e6;
  cursor: default;
}
.view1 .mask,.view1 .content {
  width: 570px;
  height: 300px;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  padding:6em 0;
}
.view1 img {
  display: block;
  position: relative;
}
.view1 h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 17px;
  padding: 10px;
  margin: 20px 0 0 0;
}
.view1 p {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 12px;
  position: relative;
  color: #000;
  padding: 10px 20px 20px;
  text-align: center;
}
.view1 a.info {
  display: inline-block;
  text-decoration: none;
  padding: 7px 14px;
  background: #000;
  color: #fff;
  text-transform: uppercase;
  -webkit-box-shadow: 0 0 1px #000;
  -moz-box-shadow: 0 0 1px #000;
  box-shadow: 0 0 1px #000;
}
.view1 a.info: hover {
  -webkit-box-shadow: 0 0 5px #000;
  -moz-box-shadow: 0 0 5px #000;
  box-shadow: 0 0 5px #000;
}
.view1-eighth .mask {
  background-color:rgba(167, 203, 180, 0.76);
  top: -200px;
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  -webkit-transition: all 0.3s ease-out 0.5s;
  -moz-transition: all 0.3s ease-out 0.5s;
  -o-transition: all 0.3s ease-out 0.5s;
  -ms-transition: all 0.3s ease-out 0.5s;
  transition: all 0.3s ease-out 0.5s;
}
.view1-eighth h2 {
  -webkit-transform: translateY(-200px);
  -moz-transform: translateY(-200px);
  -o-transform: translateY(-200px);
  -ms-transform: translateY(-200px);
  transform: translateY(-200px);
  -webkit-transition: all 0.2s ease-in-out 0.1s;
  -moz-transition: all 0.2s ease-in-out 0.1s;
  -o-transition: all 0.2s ease-in-out 0.1s;
  -ms-transition: all 0.2s ease-in-out 0.1s;
  transition: all 0.2s ease-in-out 0.1s;
}
.view1-eighth p {
  color: #333;
  -webkit-transform: translateY(-200px);
  -moz-transform: translateY(-200px);
  -o-transform: translateY(-200px);
  -ms-transform: translateY(-200px);
  transform: translateY(-200px);
  -webkit-transition: all 0.2s ease-in-out 0.2s;
  -moz-transition: all 0.2s ease-in-out 0.2s;
  -o-transition: all 0.2s ease-in-out 0.2s;
  -ms-transition: all 0.2s ease-in-out 0.2s;
  transition: all 0.2s ease-in-out 0.2s;
}
.view1-eighth a.info {
  -webkit-transform: translateY(-200px);
  -moz-transform: translateY(-200px);
  -o-transform: translateY(-200px);
  -ms-transform: translateY(-200px);
  transform: translateY(-200px);
  -webkit-transition: all 0.2s ease-in-out 0.3s;
  -moz-transition: all 0.2s ease-in-out 0.3s;
  -o-transition: all 0.2s ease-in-out 0.3s;
  -ms-transition: all 0.2s ease-in-out 0.3s;
  transition: all 0.2s ease-in-out 0.3s;
}
.view1-eighth:hover .mask {
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  top: 0px;
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -ms-transition-delay: 0s;
  transition-delay: 0s;
  -webkit-animation: bounceY 0.9s linear;
  -moz-animation: bounceY 0.9s linear;
  -ms-animation: bounceY 0.9s linear;
  animation: bounceY 0.9s linear;
}
.view1-eighth:hover h2 {
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -o-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
  -webkit-transition-delay: 0.4s;
  -moz-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  -ms-transition-delay: 0.4s;
  transition-delay: 0.4s;
}
.view1-eighth:hover p {
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -o-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.view1-eighth:hover a.info {
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -o-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -ms-transition-delay: 0s;
  transition-delay: 0s;
}
@keyframes bounceY {
  0% { transform: translateY(-205px);}
  40% { transform: translateY(-100px);}
  65% { transform: translateY(-52px);}
  82% { transform: translateY(-25px);}
  92% { transform: translateY(-12px);}
  55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
}
@-moz-keyframes bounceY {
  0% { -moz-transform: translateY(-205px);}
  40% { -moz-transform: translateY(-100px);}
  65% { -moz-transform: translateY(-52px);}
  82% { -moz-transform: translateY(-25px);}
  92% { -moz-transform: translateY(-12px);}
  55%, 75%, 87%, 97%, 100% { -moz-transform: translateY(0px);}
}
@-webkit-keyframes bounceY {
  0% { -webkit-transform: translateY(-205px);}
  40% { -webkit-transform: translateY(-100px);}
  65% { -webkit-transform: translateY(-52px);}
  82% { -webkit-transform: translateY(-25px);}
  92% { -webkit-transform: translateY(-12px);}
  55%, 75%, 87%, 97%, 100% { -webkit-transform: translateY(0px);}
}
#jzBox {
  top: 0;
  left: 0;
  z-index: 10000;
  position: fixed;
  background-color: rgba(30, 30, 30, 0.9);
  margin: 0 !important;
  text-align: center;
  width: 100%;
  height: 100%;
  display: none;
  color: #fff;
}
#jzBoxs {
  top: 0;
  left: 0;
  z-index: 10000;
  position: fixed;
  background-color: rgba(30, 30, 30, 0.9);
  margin: 0 !important;
  text-align: center;
  width: 100%;
  height: 100%;
  display: none;
  color: #fff;
}

#jzBoxTargetImg {
  margin:1% 0 1% 0;
  max-width: 96%;
  max-height: 73%;
  cursor: pointer;
}
#jzBoxTargetImgs {
  margin:1% 0 1% 0;
  max-width: 96%;
  max-height: 73%;
  cursor: pointer;
}

#jzBoxCounter {
  margin-bottom: 1%;
  font-size: 12px;
}

#jzBox i:hover {
  cursor: pointer;
  color: #2aabd2;
}

#jzBoxBottom { max-height: 22%; }

#jzBoxNextBig, #jzBoxPrevBig {
  cursor: pointer;
  top: 0;
  left: 0;
  width: 35%;
  position: fixed;
  z-index: 10001;
  height: 100%;
}

#jzBoxNextBig { left: 65%; }

.close {
  float: none;
  opacity:1;
  background: url(../images/close.png) no-repeat 0px 0px;
  display: block;
  width: 32px;
  height: 32px;
  margin:1em auto 0;
}
.arrow-left{
  background: url(../images/left.png) no-repeat 0px 0px;
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 0 auto;
}
.arrow-right{
  background: url(../images/right.png) no-repeat 0px 0px;
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 0 auto;
}
/*-- //gallery --*/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<section>
  <div>
    <div>
      <div class="gallery">
        <div class="container">
          <h3><span></span>Compra-Venta</h3>
          <br>
          <div class="container-fluid">
            <div class="row">
              <div id="jzBox" class="jzBox">
                <div id="jzBoxNextBig"></div>
                <div id="jzBoxPrevBig"></div>
                <img src="#" id="jzBoxTargetImg" />
                <div id="jzBoxBottom">
                  <div id="jzBoxTitle"></div>
                  <span id="jzBoxMoreItems">
                    <div id="jzBoxCounter"></div>
                    <i class="arrow-left" id="jzBoxPrev"></i> 
                    <i class="arrow-right" id="jzBoxNext"></i> 
                  </span>
                  <i class="close" id="jzBoxClose"></i>
                </div>
              </div>
              <div class="gallery-grids">
                <div class="col-md-4 gallery-grid-left">
                  <div class="gallery-grid">
                    <div class="view view-eighth vie">
                      <a href="http://lorempixel.com/300/300/people/2" class="jzBoxLink item-hover" title=""></a>
                      <a href="http://lorempixel.com/300/300/people/3" class="jzBoxLink item-hover" title=""></a>
                      <a href="http://lorempixel.com/300/300/people/4" class="jzBoxLink item-hover" title=""></a>
                      <a href="http://lorempixel.com/300/300/people/1" class="jzBoxLink item-hover" title="">
                        <img  alt="" src="http://lorempixel.com/300/300/people/1"  class="img-responsive"  />
                        <div class="mask">
                        </div>
                      </a>
                    </div>
                  </div>
                </div>
                <div class="col-md-4">
                  <ul>
                    <li>Codigo:</li>
                    <li>Marca:</li>
                    <li>Modelo:	</li>
                    <li>Kilómetros:	</li>
                    <li>Valor:</li>
                    <li>Caracteristicas:</li>
                  </ul>
                </div>
                <div class="col-md-4">
                  <ul>
                    <li>Informacion</li>
                    <li>Informacion</li>
                    <li>Informacion</li>
                    <li>Informacion</li>
                    <li>Informacion</li>
                    <li>Informacion</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
</section>
<!-- //gallery -->
<!-- gallery2 -->
<section>
  <div class="gallery">
    <div class="container">
      <div class="container-fluid">
        <div class="row">
          <div class="gallery-grids">
            <div class="col-md-4 gallery-grid-left">
              <div class="gallery-grid">
                <div class="view view-eighth vie">
                  <a href="http://lorempixel.com/300/300/cats/2" class="jzBoxLink item-hover" title=""></a>
                  <a href="http://lorempixel.com/300/300/cats/3" class="jzBoxLink item-hover" title=""></a>
                  <a href="http://lorempixel.com/300/300/cats/4" class="jzBoxLink item-hover" title=""></a>
                  <a href="http://lorempixel.com/300/300/cats/1" class="jzBoxLink item-hover" title="">
                    <img  alt="" src="http://lorempixel.com/300/300/cats/1" class="img-responsive"  />
                    <div class="mask">
                    </div>
                  </a>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <ul>
                <li>Codigo:</li>
                <li>Marca:</li>
                <li>Modelo:	</li>
                <li>Kilómetros:	</li>
                <li>Valor:</li>
                <li>Caracteristicas:</li>
              </ul>
            </div>
            <div class="col-md-4">
              <ul>
                <li>Informacion</li>
                <li>Informacion</li>
                <li>Informacion</li>
                <li>Informacion</li>
                <li>Informacion</li>
                <li>Informacion</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="clearfix"></div>
	<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://www.jqueryscript.net/demo/Simple-Image-Gallery-Lightbox-Plugin-With-jQuery-jzBox/js/jzBox.js"></script>
  </div>
</section>

7
  • No veo en tu código html donde ocurre eso que dices. ¿Podrías poner aparte de lo que ya hay un fragmento del html donde haces clic en una imagen y te muestra todas y no las imágenes de esa marca?
    – A. Cedano
    Commented el 23 feb. 2017 a las 0:27
  • si claro pondré el html de la galería como tal Commented el 23 feb. 2017 a las 14:31
  • ya he modificado el html y esta completo tal cual lo tengo Commented el 23 feb. 2017 a las 14:33
  • Tú dices: "lo que sucede es que al dar clic en la foto de uno de los vehículos se despliega la galería con las fotos de los todos los vehículos" Pero en tu html sólo veo href como este: <a href="images/ford/20170210_092722.jpg"... que llevan a imágenes individuales, no veo nada que mande a una galería.
    – A. Cedano
    Commented el 23 feb. 2017 a las 14:45
  • No eres claro con tu código. Commented el 23 feb. 2017 a las 15:29

1 respuesta 1

0

El principal problema que veo es que el "plugin" (realmente no es un plugin de jQuery) que estás usando no está diseñado para tener más de una galería por página. Estoy viendo el código y habría que reescribir varias partes para que funcione con más de una galería por página (algo que no es muy recomendable).

Si miras el código (es sencillo y no está minificado), puedes ver que lo que hace es buscar todas las imágenes que tienen clase jzBoxLink y a partir de ellas se crea la galería. Y ese es el problema. Si tienes más de una galería en tu página vas a tener muchas imágenes con clase jzBoxLink de las que sólo unas cuantas son las que quieres en la galería en un momento dado.

Podrías modificar el código de jzBox para que en lugar de seleccionar todas las imágenes con clase jzBoxLink, lo que haga sea seleccionar todas las imágenes con clase jzBoxLink que forman parte de la galería pulsada. Para ello, cambia los selectores de $(".jzBoxLink") a algo como $(jzBoxActual).closest(".gallery-grid").find('.jzBoxLink') (que seleccionará las imágenes con clase jzBoxLink dentro de la galería (.gallery-grid) en la que se pulsó (jzBoxActual).

Aquí dejo una demo funcionando (el código JavaScript es el código de jzBox modificado por mí):

// Código de jzBox modificado por Álvaro Montoro para permitir varias galerías


var jzBoxActual = null;

function jzBoxMessage(actual, last) {
    return 'image: ' + actual + ' / ' + last;
}

$(document).on('keydown', function (event) {
    var jzBox = $('#jzBox');
    if (jzBox.css('display') == 'block') {
        // seleccionar sólo las imágenes dentro de ese gallery-grid en particular
        var jzBoxLink = $(jzBoxActual).closest(".gallery-grid").find('.jzBoxLink');
        switch (event.keyCode) {
            case 27:
                jzBox.slideToggle('fast');
                break;
            case 37:
                jzBoxMove('prev', jzBoxLink);
                break;
            case 39:
                jzBoxMove('next', jzBoxLink);
                break;
        }
    }
});

$('.jzBoxLink').click(function (event) {
    event.stopPropagation();
    event.preventDefault();
    // seleccionar sólo las imágenes dentro de ese gallery-grid en particular
    var images = $(this).closest(".gallery-grid").find('.jzBoxLink');
    jzBoxActual = this;

    $('#jzBoxTargetImg').attr('src', this.getAttribute('href'));

    var text = this.getAttribute('title');
    var display = 'block';
    if (text == null) {
        text = '';
        display = 'none';
    }

    $('#jzBoxTitle').text(text).css('display', display);
    $('#jzBox').slideToggle('fast');

    var actualId;
    $.each(images, function (index) {
        if (jzBoxActual === images[index]) {
            actualId = index + 1;
        }
    });

    if (images.length == 1) {
        $('#jzBoxMoreItems').css('display', 'none');
    }

    $('#jzBoxCounter').text(jzBoxMessage(actualId, images.length));
});

function jzBoxMove (direction, allImages) {

    direction = (direction == 'next') ? 'next' : 'prev';
    var actualId;

    $.each(allImages, function (index) {
        if (allImages[index] === jzBoxActual) {
            actualId = index;
        }
    });

    var iterator;

    if (direction == 'next') {
        iterator = actualId + 1;
        if (actualId == allImages.length - 1) {
            iterator = 0;
        }
    } else if (direction == 'prev') {
        iterator = actualId - 1;
        if (actualId == 0) {
            iterator = allImages.length - 1;
        }
    }

    var newImage = allImages[iterator];
    $('#jzBoxTargetImg')
        .css('display', 'none')
        .attr('src', newImage.getAttribute('href'))
        .css('display', 'inline');

	var text = newImage.getAttribute('title');
    var display = 'block';

    if (text == null) {
        text = '';
        display = 'none';
    }

    $('#jzBoxTitle').text(text).css('display', display);
    $('#jzBoxCounter').text(jzBoxMessage(iterator + 1, allImages.length));

    jzBoxActual = newImage;
}

$('#jzBoxNext, #jzBoxNextBig').click(function() {
    // seleccionar sólo las imágenes dentro de ese gallery-grid en particular
    jzBoxMove('next', $(jzBoxActual).closest(".gallery-grid").find('.jzBoxLink'));
});

$('#jzBoxPrev, #jzBoxPrevBig').click(function() {
    // seleccionar sólo las imágenes dentro de ese gallery-grid en particular
    jzBoxMove('prev', $(jzBoxActual).closest(".gallery-grid").find('.jzBoxLink'));
});

$('#jzBoxClose, #jzBoxTargetImg').click(function() {
    $('#jzBox').slideToggle('fast');
});
/*-- gallery --*/
.gallery-grids{
	margin:3em 0 0;
}
.gallery-grid-left,.gallery-grid-right{
	padding-left:0;
}
.gallery-grid-right1{
	float:left;
	width:48.6%;
}
.gallery-grid-right2{
	float:right;
	width:48.6%;
}
.gallery-grid-right-grid:nth-child(2){
	padding:1em 0;
}
.gallery-grid-left-grid,.gallery-grid-left-grid-left-grid:nth-child(2){
	padding:1em 0 0;
}
.gallery-grid-left-grid-left{
	float:left;
	width:48.6%;
}
.gallery-grid-left-grid-right{
	float:right;
	width:48.6%;
}
.view {
  width: 100%;
  margin: 0px;
  float: none;
  border: 0px solid #fff;
  overflow: hidden;
  position: relative;
  text-align: center;
  -webkit-box-shadow: 1px 1px 2px #e6e6e6;
  -moz-box-shadow: 1px 1px 2px #e6e6e6;
  box-shadow: 1px 1px 2px #e6e6e6;
}
.view .mask,.view .content {
   width: 100%;
   height: 300px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
   padding:8.5em 0 0;
}
.view-eighth:hover .mask1 {
    height: 180px !important;
}
.view .mask1 {
    padding: 2em 0 0 !important;
}
.view-eighth:hover .mask2 {
    height: 378px !important;
}
.view img {
   display: block;
   position: relative;
}
.view h4 {
	text-transform: capitalize;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 2em;
    padding: 0;
    margin: 0;
}
h4.late {
  padding-top: 3.5em;
}
.view p {
   position: relative;
    color: #fff !important;
    padding: 20px 20px 0px;
    text-align: center;
    line-height: 1.8em;
}
.view a.info {
   display: inline-block;
   text-decoration: none;
   padding: 7px 14px;
   background: #000;
   color: #fff;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
}
.view a.info: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}

.view-eighth .mask {
   background-color:rgba(73, 192, 219, 0.5);
   top: -200px;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.3s ease-out 0.5s;
   -moz-transition: all 0.3s ease-out 0.5s;
   -o-transition: all 0.3s ease-out 0.5s;
   -ms-transition: all 0.3s ease-out 0.5s;
   transition: all 0.3s ease-out 0.5s;
}
.view-eighth h2 {
   -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out 0.1s;
   -moz-transition: all 0.2s ease-in-out 0.1s;
   -o-transition: all 0.2s ease-in-out 0.1s;
   -ms-transition: all 0.2s ease-in-out 0.1s;
   transition: all 0.2s ease-in-out 0.1s;
}
.view-eighth p {
   color: #333;
   -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out 0.2s;
   -moz-transition: all 0.2s ease-in-out 0.2s;
   -o-transition: all 0.2s ease-in-out 0.2s;
   -ms-transition: all 0.2s ease-in-out 0.2s;
   transition: all 0.2s ease-in-out 0.2s;
}
.view-eighth a.info {
   -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out 0.3s;
   -moz-transition: all 0.2s ease-in-out 0.3s;
   -o-transition: all 0.2s ease-in-out 0.3s;
   -ms-transition: all 0.2s ease-in-out 0.3s;
   transition: all 0.2s ease-in-out 0.3s;
}
.vie:hover .mask {
	height:369px !important;
}
.view-eighth:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   top: 0px;
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
   -webkit-animation: bounceY 0.9s linear;
   -moz-animation: bounceY 0.9s linear;
   -ms-animation: bounceY 0.9s linear;
   animation: bounceY 0.9s linear;
   height: 385px;
}
.view-eighth:hover h2 {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.4s;
   -moz-transition-delay: 0.4s;
   -o-transition-delay: 0.4s;
   -ms-transition-delay: 0.4s;
   transition-delay: 0.4s;
}
.view-eighth:hover p {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}
.view-eighth:hover a.info {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
}
@keyframes bounceY {
    0% { transform: translateY(-205px);}
    40% { transform: translateY(-100px);}
    65% { transform: translateY(-52px);}
    82% { transform: translateY(-25px);}
    92% { transform: translateY(-12px);}
    55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
}
@-moz-keyframes bounceY {
    0% { -moz-transform: translateY(-205px);}
    40% { -moz-transform: translateY(-100px);}
    65% { -moz-transform: translateY(-52px);}
    82% { -moz-transform: translateY(-25px);}
    92% { -moz-transform: translateY(-12px);}
    55%, 75%, 87%, 97%, 100% { -moz-transform: translateY(0px);}
}
@-webkit-keyframes bounceY {
    0% { -webkit-transform: translateY(-205px);}
    40% { -webkit-transform: translateY(-100px);}
    65% { -webkit-transform: translateY(-52px);}
    82% { -webkit-transform: translateY(-25px);}
    92% { -webkit-transform: translateY(-12px);}
    55%, 75%, 87%, 97%, 100% { -webkit-transform: translateY(0px);}
}
.view1 {
  width: 570px;
  height: 300px;
  margin: 0px;
  float: left;
  border: 0px solid #fff;
  overflow: hidden;
  position: relative;
  text-align: center;
  -webkit-box-shadow: 1px 1px 2px #e6e6e6;
  -moz-box-shadow: 1px 1px 2px #e6e6e6;
  box-shadow: 1px 1px 2px #e6e6e6;
  cursor: default;
}
.view1 .mask,.view1 .content {
   width: 570px;
   height: 300px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
   padding:6em 0;
}
.view1 img {
   display: block;
   position: relative;
}
.view1 h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 17px;
   padding: 10px;
   margin: 20px 0 0 0;
}
.view1 p {
   font-family: Georgia, serif;
   font-style: italic;
   font-size: 12px;
   position: relative;
   color: #000;
   padding: 10px 20px 20px;
   text-align: center;
}
.view1 a.info {
   display: inline-block;
   text-decoration: none;
   padding: 7px 14px;
   background: #000;
   color: #fff;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
}
.view1 a.info: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}
.view1-eighth .mask {
   background-color:rgba(167, 203, 180, 0.76);
   top: -200px;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.3s ease-out 0.5s;
   -moz-transition: all 0.3s ease-out 0.5s;
   -o-transition: all 0.3s ease-out 0.5s;
   -ms-transition: all 0.3s ease-out 0.5s;
   transition: all 0.3s ease-out 0.5s;
}
.view1-eighth h2 {
   -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out 0.1s;
   -moz-transition: all 0.2s ease-in-out 0.1s;
   -o-transition: all 0.2s ease-in-out 0.1s;
   -ms-transition: all 0.2s ease-in-out 0.1s;
   transition: all 0.2s ease-in-out 0.1s;
}
.view1-eighth p {
   color: #333;
   -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out 0.2s;
   -moz-transition: all 0.2s ease-in-out 0.2s;
   -o-transition: all 0.2s ease-in-out 0.2s;
   -ms-transition: all 0.2s ease-in-out 0.2s;
   transition: all 0.2s ease-in-out 0.2s;
}
.view1-eighth a.info {
   -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out 0.3s;
   -moz-transition: all 0.2s ease-in-out 0.3s;
   -o-transition: all 0.2s ease-in-out 0.3s;
   -ms-transition: all 0.2s ease-in-out 0.3s;
   transition: all 0.2s ease-in-out 0.3s;
}
.view1-eighth:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   top: 0px;
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
   -webkit-animation: bounceY 0.9s linear;
   -moz-animation: bounceY 0.9s linear;
   -ms-animation: bounceY 0.9s linear;
   animation: bounceY 0.9s linear;
}
.view1-eighth:hover h2 {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.4s;
   -moz-transition-delay: 0.4s;
   -o-transition-delay: 0.4s;
   -ms-transition-delay: 0.4s;
   transition-delay: 0.4s;
}
.view1-eighth:hover p {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}
.view1-eighth:hover a.info {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
}
@keyframes bounceY {
    0% { transform: translateY(-205px);}
    40% { transform: translateY(-100px);}
    65% { transform: translateY(-52px);}
    82% { transform: translateY(-25px);}
    92% { transform: translateY(-12px);}
    55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
}
@-moz-keyframes bounceY {
    0% { -moz-transform: translateY(-205px);}
    40% { -moz-transform: translateY(-100px);}
    65% { -moz-transform: translateY(-52px);}
    82% { -moz-transform: translateY(-25px);}
    92% { -moz-transform: translateY(-12px);}
    55%, 75%, 87%, 97%, 100% { -moz-transform: translateY(0px);}
}
@-webkit-keyframes bounceY {
    0% { -webkit-transform: translateY(-205px);}
    40% { -webkit-transform: translateY(-100px);}
    65% { -webkit-transform: translateY(-52px);}
    82% { -webkit-transform: translateY(-25px);}
    92% { -webkit-transform: translateY(-12px);}
    55%, 75%, 87%, 97%, 100% { -webkit-transform: translateY(0px);}
}
#jzBox {
  top: 0;
  left: 0;
  z-index: 10000;
  position: fixed;
  background-color: rgba(30, 30, 30, 0.9);
  margin: 0 !important;
  text-align: center;
  width: 100%;
  height: 100%;
  display: none;
  color: #fff;
}
#jzBoxs {
  top: 0;
  left: 0;
  z-index: 10000;
  position: fixed;
  background-color: rgba(30, 30, 30, 0.9);
  margin: 0 !important;
  text-align: center;
  width: 100%;
  height: 100%;
  display: none;
  color: #fff;
}

#jzBoxTargetImg {
  margin:1% 0 1% 0;
  max-width: 96%;
  max-height: 73%;
  cursor: pointer;
}
#jzBoxTargetImgs {
  margin:1% 0 1% 0;
  max-width: 96%;
  max-height: 73%;
  cursor: pointer;
}

#jzBoxCounter {
  margin-bottom: 1%;
  font-size: 12px;
}

#jzBox i:hover {
  cursor: pointer;
  color: #2aabd2;
}

#jzBoxBottom { max-height: 22%; }

#jzBoxNextBig, #jzBoxPrevBig {
  cursor: pointer;
  top: 0;
  left: 0;
  width: 35%;
  position: fixed;
  z-index: 10001;
  height: 100%;
}

#jzBoxNextBig { left: 65%; }

.close {
    float: none;
    opacity:1;
    background: url(../images/close.png) no-repeat 0px 0px;
    display: block;
    width: 32px;
    height: 32px;
	margin:1em auto 0;
}
.arrow-left{
	background: url(../images/left.png) no-repeat 0px 0px;
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 0 auto;
}
.arrow-right{
	background: url(../images/right.png) no-repeat 0px 0px;
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 0 auto;
}
/*-- //gallery --*/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<section>
  <div>
    <div>
      <div class="gallery">
        <div class="container">
          <h3><span></span>Compra-Venta</h3>
          <br>
          <div class="container-fluid">
            <div class="row">
              <div id="jzBox" class="jzBox">
                <div id="jzBoxNextBig"></div>
                <div id="jzBoxPrevBig"></div>
                <img src="#" id="jzBoxTargetImg" />
                <div id="jzBoxBottom">
                  <div id="jzBoxTitle"></div>
                  <span id="jzBoxMoreItems">
                    <div id="jzBoxCounter"></div>
                    <i class="arrow-left" id="jzBoxPrev"></i> 
                    <i class="arrow-right" id="jzBoxNext"></i> 
                  </span>
                  <i class="close" id="jzBoxClose"></i>
                </div>
              </div>
              <div class="gallery-grids">
                <div class="col-md-4 gallery-grid-left">
                  <div class="gallery-grid">
                    <div class="view view-eighth vie">
                      <a href="http://lorempixel.com/300/300/people/2" class="jzBoxLink item-hover" title=""></a>
                      <a href="http://lorempixel.com/300/300/people/3" class="jzBoxLink item-hover" title=""></a>
                      <a href="http://lorempixel.com/300/300/people/4" class="jzBoxLink item-hover" title=""></a>
                      <a href="http://lorempixel.com/300/300/people/1" class="jzBoxLink item-hover" title="">
                        <img  alt="" src="http://lorempixel.com/300/300/people/1"  class="img-responsive"  />
                        <div class="mask">
                        </div>
                      </a>
                    </div>
                  </div>
                </div>
                <div class="col-md-4">
                  <ul>
                    <li>Codigo:</li>
                    <li>Marca:</li>
                    <li>Modelo:	</li>
                    <li>Kilómetros:	</li>
                    <li>Valor:</li>
                    <li>Caracteristicas:</li>
                  </ul>
                </div>
                <div class="col-md-4">
                  <ul>
                    <li>Informacion</li>
                    <li>Informacion</li>
                    <li>Informacion</li>
                    <li>Informacion</li>
                    <li>Informacion</li>
                    <li>Informacion</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
</section>
<!-- //gallery -->
<!-- gallery2 -->
<section>
  <div class="gallery">
    <div class="container">
      <div class="container-fluid">
        <div class="row">
          <div class="gallery-grids">
            <div class="col-md-4 gallery-grid-left">
              <div class="gallery-grid">
                <div class="view view-eighth vie">
                  <a href="http://lorempixel.com/300/300/cats/2" class="jzBoxLink item-hover" title=""></a>
                  <a href="http://lorempixel.com/300/300/cats/3" class="jzBoxLink item-hover" title=""></a>
                  <a href="http://lorempixel.com/300/300/cats/4" class="jzBoxLink item-hover" title=""></a>
                  <a href="http://lorempixel.com/300/300/cats/1" class="jzBoxLink item-hover" title="">
                    <img  alt="" src="http://lorempixel.com/300/300/cats/1" class="img-responsive"  />
                    <div class="mask">
                    </div>
                  </a>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <ul>
                <li>Codigo:</li>
                <li>Marca:</li>
                <li>Modelo:	</li>
                <li>Kilómetros:	</li>
                <li>Valor:</li>
                <li>Caracteristicas:</li>
              </ul>
            </div>
            <div class="col-md-4">
              <ul>
                <li>Informacion</li>
                <li>Informacion</li>
                <li>Informacion</li>
                <li>Informacion</li>
                <li>Informacion</li>
                <li>Informacion</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="clearfix"></div>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <!--<script src="./jzBox.js"></script>-->
  </div>
</section>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.