Imprimir imagens

Olá, pessoal, tudo bem?

Para testar meus conhecimentos, no post_type "Imoveis", eu crie uma taxonomia de galeria de imagens chamado "plantas" para que na single.php seja possível incluir uma thumb, e clicando nela, abra com zoom a imagem da planta do imóvel.

Para isso, realizei o seguinte código na single.php:

<div class="row">
    <?php
        $plantas = get_field('plantas');
        foreach($plantas as $planta){
            for ($i=1; $i <= 1 ; $i++) {
    ?>
        <div class="col-md-4">
            <a href="#<?php echo $i; ?>" class="image_zoom">
                   <img src="<?php echo $planta['url']; ?>" class="img-thumbnail" alt="Imagem geral do projeto">
            </a>
        </div>
        <div id="<?php echo $i; ?>" class="lb-overlay">
               <a href="#page" class="lb-close">X Fechar</a>
               <img src="<?php echo $planta['url']; ?>" class="zoom-planta">
        </div>
    <?php
            }
        }
    ?>    
</div>

Mas, na segunda div com a classe "lb-overlay" para tomar a página toda, sempre puxa o valor 1, assim mesmo que as imagens do thumb estão impressas corretamente, ao clicar para dar zoom, sempre a parece a imagem do primeiro thumb.

Podem me ajudar?

Caso necessitem, segue o estilo do zoom:

<style type="text/css">

.lb-overlay{
    width: 0px;
    height: 0px;
    position: fixed;
    overflow: hidden;
    left: 0px;
    top: 0px;
    padding: 0px;
    z-index: 99;
    text-align: center;
    background: rgb(241,210,194);
    background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(241,210,194,1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
    background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
}
.lb-overlay > div{
    position: relative;
    color: rgba(27,54,81,0.8);
    opacity: 0;
    filter: alpha(opacity=0); /* internet explorer */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
    width: 550px;
    margin: 10px auto 0px auto;
    text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
    -webkit-transition: opacity 0.3s linear 1.3s;
    -moz-transition: opacity 0.3s linear 1.3s;
    -o-transition: opacity 0.3s linear 1.3s;
    -ms-transition: opacity 0.3s linear 1.3s;
    transition: opacity 0.3s linear 1.3s;
}

.lb-overlay a.lb-close{
    background: rgba(202, 0, 8, 0.9);
    z-index: 1001;
    color: #fff;
    position: absolute;
    top: 22.5%;
    left: 50%;
    font-size: 15px;
    line-height: 26px;
    text-align: center;
    width: 50px;
    height: 23px;
    overflow: hidden;
    margin-left: -25px;
    opacity: 0;
    filter: alpha(opacity=0); /* internet explorer */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
    -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
    -webkit-transition: opacity 0.3s linear 1.2s;
    -moz-transition: opacity 0.3s linear 1.2s;
    -o-transition: opacity 0.3s linear 1.2s;
    -ms-transition: opacity 0.3s linear 1.2s;
    transition: opacity 0.3s linear 1.2s;
}
.lb-overlay img{
    /* height: 100%; For Opera max-height does not seem to work */
    /*max-height: 100%;*/
    position: relative;
    -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
    -moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
    box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
}
.lb-overlay:target {
    width: auto;
    height: auto;
    bottom: 0px;
    right: 0px;
    /*padding: 80px 100px 120px 100px;*/
}
.lb-overlay:target img {
    -webkit-animation: fadeInScale 1.2s ease-in-out;
    -moz-animation: fadeInScale 1.2s ease-in-out;
    -o-animation: fadeInScale 1.2s ease-in-out;
    -ms-animation: fadeInScale 1.2s ease-in-out;
    animation: fadeInScale 1.2s ease-in-out;
}
.lb-overlay:target a.lb-close,
.lb-overlay:target > div{
    opacity: 1;
    filter: alpha(opacity=99); /* internet explorer */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
.zoom-planta {
    top: 30%;
    background-color: #FFF;
}
@media only screen and (max-width: 320px) {
    .zoom-planta {width:100% !important; }
}
@media only screen and (max-width: 568px) {
    .zoom-planta {width:60% !important; }
}

@media only screen and (min-width: 768px) {
    .zoom-planta {width:50% !important; }
}
@media only screen and (min-width: 1200px) {
    .zoom-planta {width:40% !important; }
}
@-webkit-keyframes fadeInScale {
  0% { -webkit-transform: scale(0.6); opacity: 0; }
  100% { -webkit-transform: scale(1); opacity: 1; }
}
@-moz-keyframes fadeInScale {
  0% { -moz-transform: scale(0.6); opacity: 0; }
  100% { -moz-transform: scale(1); opacity: 1; }
}
@-o-keyframes fadeInScale {
  0% { -o-transform: scale(0.6); opacity: 0; }
  100% { -o-transform: scale(1); opacity: 1; }
}
@-ms-keyframes fadeInScale {
  0% { -ms-transform: scale(0.6); opacity: 0; }
  100% { -ms-transform: scale(1); opacity: 1; }
}
@keyframes fadeInScale {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* 
    100% Height for Opera as the max-height seems to be ignored, not optimal for large screens 
    http://bricss.net/post/11230266445/css-hack-to-target-opera 
*/
x:-o-prefocus, .lb-overlay img {
    height: 100%;
}
                    </style>