Galería de imagenes con Lightbox

Roses

Devorador de almas (?)
Buenas tardes, estoy en el diseño de una web con tendencia onepage, y a la hora de agregarle un lightbox tengo un problema. Si bien funciona y cumple su funcion de que al pasar el mouse por la galería (todas las fotos estan en gris) toman color, y a la hora de clickearlas me las expande. Hasta ahi todo bien, el problema radica que si dejas la imagen abierta de la galería, despues de un cierto tiempo, el cuadro que muestra la imagen se mueve a otra posicion, para despues de otro determinado tiempo, volver a la antigua posicion con la imagen encasillada dentro.
No encuentro donde fallé

Aquí los códigos:
En el html:
Código:
      <!-- ************************************************ LIGHTBOX ************************************************ -->
      <section id="obras">
        <div class="row justify-content-center">
          <div class="col-12 align-self-center">
            <h3>Galería de imágenes de obras realizadas.</h3>
            <div class="gallery">
              <a href="src/img/1.jpg" data-lightbox="mygallery" data-title="Construccion"><img src="src/img/1.jpg" data-lightbox="mygallery"></a>
              <a href="src/img/2.jpg" data-lightbox="mygallery"><img src="src/img/2.jpg"></a>
              <a href="src/img/3.jpg" data-lightbox="mygallery"><img src="src/img/3.jpg"></a>
              <a href="src/img/4.jpg" data-lightbox="mygallery"><img src="src/img/4.jpg"></a>
              <a href="src/img/5.jpg" data-lightbox="mygallery"><img src="src/img/5.jpg"></a>
              <a href="src/img/6.jpg" data-lightbox="mygallery"><img src="src/img/6.jpg"></a>
              <a href="src/img/7.jpg" data-lightbox="mygallery"><img src="src/img/7.jpg"></a>
              <a href="src/img/8.jpg" data-lightbox="mygallery"><img src="src/img/8.jpg"></a>
              <a href="src/img/9.jpg" data-lightbox="mygallery"><img src="src/img/9.jpg"></a>
              <a href="src/img/10.jpg" data-lightbox="mygallery"><img src="src/img/10.jpg"></a>
              <a href="src/img/11.jpg" data-lightbox="mygallery"><img src="src/img/11.jpg"></a>
              <a href="src/img/12.jpg" data-lightbox="mygallery"><img src="src/img/12.jpg"></a>
              <a href="src/img/13.jpg" data-lightbox="mygallery"><img src="src/img/13.jpg"></a>
              <a href="src/img/14.jpg" data-lightbox="mygallery"><img src="src/img/14.jpg"></a>
              <a href="src/img/15.jpg" data-lightbox="mygallery"><img src="src/img/15.jpg"></a>
              <a href="src/img/16.jpg" data-lightbox="mygallery"><img src="src/img/16.jpg"></a>
              <a href="src/img/17.jpg" data-lightbox="mygallery"><img src="src/img/17.jpg"></a>
              <a href="src/img/18.jpg" data-lightbox="mygallery"><img src="src/img/18.jpg"></a>
              <a href="src/img/19.jpg" data-lightbox="mygallery"><img src="src/img/19.jpg"></a>
              <a href="src/img/20.jpg" data-lightbox="mygallery"><img src="src/img/20.jpg"></a>
              <a href="src/img/21.jpg" data-lightbox="mygallery"><img src="src/img/21.jpg"></a>
              <a href="src/img/22.jpg" data-lightbox="mygallery"><img src="src/img/22.jpg"></a>
              <a href="src/img/colocando-piso.jpg" data-lightbox="mygallery"><img src="src/img/colocando-piso.jpg"></a>
              <a href="src/img/ruta-trabajando.jpg" data-lightbox="mygallery"><img src="src/img/ruta-trabajando.jpg"></a>
              <a href="src/img/piso-ruta.jpg" data-lightbox="mygallery"><img src="src/img/piso-ruta.jpg"></a>
            </div>
          </div>
        </div>
      </section>
      <!-- ************************************************ LIGHTBOX ************************************************ -->
Además de vincular en el final del body el script debajo del mio (solo posee un js.scroller)
Código:
<script src="js/lightbox-plus-jquery.min.js"></script>

El .js de lightbox esta descargado de aqui: https://lokeshdhakar.com/projects/lightbox2/

No entiendo que es lo que hice mal... Espero algunas respuestas con ansias!


Desde ya, muchas gracias
 

recox

Argentum Online Libre
Buenas tardes, estoy en el diseño de una web con tendencia onepage, y a la hora de agregarle un lightbox tengo un problema. Si bien funciona y cumple su funcion de que al pasar el mouse por la galería (todas las fotos estan en gris) toman color, y a la hora de clickearlas me las expande. Hasta ahi todo bien, el problema radica que si dejas la imagen abierta de la galería, despues de un cierto tiempo, el cuadro que muestra la imagen se mueve a otra posicion, para despues de otro determinado tiempo, volver a la antigua posicion con la imagen encasillada dentro.
No encuentro donde fallé

Aquí los códigos:
En el html:
Código:
      <!-- ************************************************ LIGHTBOX ************************************************ -->
      <section id="obras">
        <div class="row justify-content-center">
          <div class="col-12 align-self-center">
            <h3>Galería de imágenes de obras realizadas.</h3>
            <div class="gallery">
              <a href="src/img/1.jpg" data-lightbox="mygallery" data-title="Construccion"><img src="src/img/1.jpg" data-lightbox="mygallery"></a>
              <a href="src/img/2.jpg" data-lightbox="mygallery"><img src="src/img/2.jpg"></a>
              <a href="src/img/3.jpg" data-lightbox="mygallery"><img src="src/img/3.jpg"></a>
              <a href="src/img/4.jpg" data-lightbox="mygallery"><img src="src/img/4.jpg"></a>
              <a href="src/img/5.jpg" data-lightbox="mygallery"><img src="src/img/5.jpg"></a>
              <a href="src/img/6.jpg" data-lightbox="mygallery"><img src="src/img/6.jpg"></a>
              <a href="src/img/7.jpg" data-lightbox="mygallery"><img src="src/img/7.jpg"></a>
              <a href="src/img/8.jpg" data-lightbox="mygallery"><img src="src/img/8.jpg"></a>
              <a href="src/img/9.jpg" data-lightbox="mygallery"><img src="src/img/9.jpg"></a>
              <a href="src/img/10.jpg" data-lightbox="mygallery"><img src="src/img/10.jpg"></a>
              <a href="src/img/11.jpg" data-lightbox="mygallery"><img src="src/img/11.jpg"></a>
              <a href="src/img/12.jpg" data-lightbox="mygallery"><img src="src/img/12.jpg"></a>
              <a href="src/img/13.jpg" data-lightbox="mygallery"><img src="src/img/13.jpg"></a>
              <a href="src/img/14.jpg" data-lightbox="mygallery"><img src="src/img/14.jpg"></a>
              <a href="src/img/15.jpg" data-lightbox="mygallery"><img src="src/img/15.jpg"></a>
              <a href="src/img/16.jpg" data-lightbox="mygallery"><img src="src/img/16.jpg"></a>
              <a href="src/img/17.jpg" data-lightbox="mygallery"><img src="src/img/17.jpg"></a>
              <a href="src/img/18.jpg" data-lightbox="mygallery"><img src="src/img/18.jpg"></a>
              <a href="src/img/19.jpg" data-lightbox="mygallery"><img src="src/img/19.jpg"></a>
              <a href="src/img/20.jpg" data-lightbox="mygallery"><img src="src/img/20.jpg"></a>
              <a href="src/img/21.jpg" data-lightbox="mygallery"><img src="src/img/21.jpg"></a>
              <a href="src/img/22.jpg" data-lightbox="mygallery"><img src="src/img/22.jpg"></a>
              <a href="src/img/colocando-piso.jpg" data-lightbox="mygallery"><img src="src/img/colocando-piso.jpg"></a>
              <a href="src/img/ruta-trabajando.jpg" data-lightbox="mygallery"><img src="src/img/ruta-trabajando.jpg"></a>
              <a href="src/img/piso-ruta.jpg" data-lightbox="mygallery"><img src="src/img/piso-ruta.jpg"></a>
            </div>
          </div>
        </div>
      </section>
      <!-- ************************************************ LIGHTBOX ************************************************ -->
Además de vincular en el final del body el script debajo del mio (solo posee un js.scroller)
Código:
<script src="js/lightbox-plus-jquery.min.js"></script>

El .js de lightbox esta descargado de aqui: https://lokeshdhakar.com/projects/lightbox2/

No entiendo que es lo que hice mal... Espero algunas respuestas con ansias!


Desde ya, muchas gracias
<script src="js/lightbox-plus-jquery.min.js"></script>

Eso va en el header, y dsp va tu codigo en el body
 

Roses

Devorador de almas (?)
<script src="js/lightbox-plus-jquery.min.js"></script>

Eso va en el header, y dsp va tu codigo en el body
Sí, ya lo tenía agregado a eso, gracias por responder.
Lo pude solucionar a los días, la verdad no recuerdo bien dónde estaba el error, habrá sido algún bloqueo de ese día jajaja :p

Abrazo
 
Arriba