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
 
Arriba