Не могу открыть новое окно с jQuery

Question

Я получил этот код, чтобы открыть windows с помощью 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();
}

Css код, который открывает jQuery Код windows,

 /*      ***** 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 ******  */

Как я построил windows в 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> 

Как показать windows

Здесь весь код.

Код работает хорошо, проблема в том, что когда я нажимаю Zoom на втором фото я получаю первое фото (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>

Я думаю, что проблема в том, как у меня есть код, который не дает мне возможности сделать это изменение, может кто-нибудь, пожалуйста, скажите мне, как я могу решить эту проблему, спасибо!

Answer 1

@ Grumpy Спасибо !, я не знаю, но 4 дня go попробовал, что ничего не изменить, а сегодня изменить ..

Решение, изменить все имя пользователя , который вызывает jQuery для других имен ..

Html, Стиль и JQuery из первого окна остаются теми же.

Html для второго окна , которое называется jQuery,

<i class="fa fa-search-plus" style="font-size: 94%; color: white; background-color:  #595959; padding: 3%; cursor: zoom-in;" onclick='layer_shows();'></i></div> 

                 </div>
           </div> 

                   <div id="layerPreview-2" > </div>
                   <div id='layerPreviewContent-2'>
                       <!-- Mostramos el texto de cerrar para poder cerrar la ventana -->
                      <div id="tittel-text">Rucksack aus Hanf Gelbe <span id="closse-text"  onclick="layer_closes();">Schließen</span></div>
                      <div  id="bild-text"><img  alt=""  src="photo/113.jpg"></div>
                        <div id="text-pruduct">
                        <p>Verfügbarkeit: <b>eine Menge</b></p>
                        <p>Zustellung innerhalb von: <b>1-2 Tage</b></p>
                        <p>Hanf: <b>50%</b></p>
                        <p>Baumwolle: <b>50%</b></p> 
                      </div>
                   </div>

Стиль его,

#layerPreview-2     {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);
}
#layerPreviewContent-2{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);
 }
 #layerPreviewContent-2 #bild-text img { 

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

jQuery этого,

function layer_shows()
{

    $('#layerPreview-2').attr("style", "top:0px; height:"+$(document).height()+"px; width:"+$(window).width()+"px; display:inline;");


    var posTop=(($(window).height()/2)-(500/2))+$(document).scrollTop();
    if(posTop<0)
        posTop=0;
    $('#layerPreviewContent-2').attr("style", "top:"+posTop+"px;");
    /* Indicamos que se muestre la capa */
    $('#layerPreviewContent-2').show(600);
}

function layer_closes()
{
    $('#layerPreviewContent-2').hide(300);
    $('#layerPreview-2').hide();
}

Как показать изображение из второго окна ...