无法用 jQuery 打开新窗口

我收到了用 jQuery 打开窗口的代码，当有人点击缩放图标时，它会打开，

 /**
 * Funcion que muestra las capas
 */
function layer_show()
{
    /* Ponemos los atributos de posicion a la capa transparente del fondo */
    $('#layerPreview').attr("style", "top:0px; height:"+$(document).height()+"px; width:"+$(window).width()+"px; display:inline;");

    /* Buscamos la posicion superior de la capa que aparece centrada.
       La anchura y la posicion centrada se establece en el estilo */
    var posTop=(($(window).height()/2)-(500/2))+$(document).scrollTop();
    if(posTop<0)
        posTop=0;
    $('#layerPreviewContent').attr("style", "top:"+posTop+"px;");
    /* Indicamos que se muestre la capa */
    $('#layerPreviewContent').show(600);
}

/**
 * Funcion que esconde las capas
 */
function layer_close()
{
    $('#layerPreviewContent').hide(300);
    $('#layerPreview').hide();
}

用于打开 jQuery 代码窗口的 CSS 代码，

 /*      ***** Anfang    Fenster producut **** */


/* Determina el fondo transparente cuando se muestra la previsualizacion */
 #layerPreview      {position:absolute;z-index:1;display:none;top:  0px;left:0px;width:100%;height:100%;background-color:#fff; 
                 background-color: rgba(50, 50, 50, 0.5);


}

 /* Determina la capa que aparecera centrada */
  #layerPreviewContent{position:absolute;z-index:1;display:none;background-color:#dedee0; margin-top: 0px;left:50%;
                width:30%;
                margin-left:-250px;
                height:40%;

                -moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
                -webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
                box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);


 }
 #tittel-text {padding: 3%; width:100%;text-align:left;border-bottom:1px hidden; background-color:  #d7a8a8;}
 #closse-text {  color: #f2f2f2; padding: 5px;  cursor: pointer; float: right;}


  /*  ------------------  */

#layerPreviewContent #bild-text img { 

  display: block; float: left; width: 42%; margin-top: 0px;  
}

#text-pruduct {   text-align: right; margin-top: 10%; margin-right: 5%;}

         /*  *****    ende    Fenster product ******  */

我是如何用 Html 构建窗口的，

 <div class="container-fluid">
  <div class="row">
    <div class="col"> 
         <div class="product-grid">
            <div class="product-image">
               <a class="link" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php">
                <img alt=""  class="bild" src="photo/112.jpg">     
               </a> 
            </div>
            <div class="product-content">
                 <a class="links" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php">
                <p class="title">Mochila doble tirantes Violeta</p>
                </a>     
            </div>
            <div class="price">$16.00</div>
               <div class="div-zoom">
                   <span class="zum-warenkorb">zum warenkorb hinzufügen</span>
                       <i class="fa fa-search-plus" style="font-size: 94%; color: white; background-color:  #595959; padding: 3%; cursor: zoom-in;" onclick='layer_show();'></i></div> 

                 </div>
           </div>
         </div>
     </div> 

如何显示窗口

这里所有的代码。

代码运行良好，问题是当我在第二张照片上单击缩放时，我收到第一张照片（Mochila doble tirantes Violeta），而不是第二张照片（Mochila doble tirantes amarillo），此代码调用更改图像

<div id="tittel-text">Mochila doble tirantes amarillo <span id="closse-text"  onclick="layer_close();">Schließen</span></div>
                      <div  id="bild-text"><img  alt=""  src="photo/113.jpg"></div>

我认为问题在于我的代码如何，这并没有给我进行此更改的可能性，有人可以告诉我如何解决此问题，谢谢！