Javascript 加载动态图像名称时出现Lightbox问题

好的，我有一个灯箱，除了一个问题外，它工作得很好。这些图像是动态构建的，它得到一个包含10个图像的列表，并在每一行中循环显示每个图像。这样我就能知道出了什么问题。无论我选择哪个图像，它都会显示lightbox中的第一个图像，因此我需要向它传递一个带有图像路径或图像名称的变量

我确实没有那么多javascript经验，但我希望做的是将

$popup\u item->attributes（）->name

放入一个变量，通过

onclick

事件传递它，然后在

div

中使用

id=“light”

传递

$popup\u item->attributes（）->name

我传递变量，但不确定这是否是最佳方法，甚至不确定从何处开始

有一个类似这样的循环，循环并打印弹出式容器多次：

foreach($xml->config->popup as $popup_item){

}

还有html

<div id="popup_container">
    <!-- We use a lightbox to show the image in full size since large popups are scaled -->
    <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
        <!-- This is the scaled image -->
        <!--popups are stored in images/popups/images/ in the following format -->
        <!--id_popupname.png which we build dynamically below because -->
        <!-- the popup name will always be same name as the popupimage with the user id preceeding it -->
        <img src="images/popups/images/<?php echo $item_id . "_" .  strtolower($popup_item->attributes()->name) . ".png" ;?>" alt="Popup Image"/>
    </a>

    <!--This holds the un-scaled image in the popup box which is hidden initially until you click the image-->
    <div id="light" class="white_content"> 
        <img src="images/popups/images/<?php echo $item_id . "_" .  strtolower($popup_item->attributes()->name) . ".png" ;?>" alt="Popup Image"/></a>
        <!--This allows you to close the lightbox window from within the lightbox window-->
        <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>
    </div>
    <div id="fade" class="black_overlay"></div>
</div> <!--end of popup container-->

---

编辑：实际上我需要传递两个变量，分别是

$item\u id

和

$popup\u item->attributes（）->name

，但概念是相同的你说你的循环多次打印弹出容器

这种方法的一个问题是，在html元素上会出现重复的

id

这将导致

文档.getElementById

只返回第一个匹配的文档（这似乎是您的问题）

---

您需要使您的

id

唯一（以及针对它们的javascript）

因为DOM正在选择它找到的第一个id为“light”的元素，所以每次都会得到相同的图像。ID在HTML中应该是唯一的。相反，试试这个

<div id="popup_container">
    <a href = "javascript:void(0)" onclick = "document.getElementById('light_<?php echo $item_id ?>').style.display='block';document.getElementById('fade').style.display='block'">
        <img src="images/popups/images/<?php echo $item_id . "_" .  strtolower($popup_item->attributes()->name) . ".png" ;?>" alt="Popup Image"/>
    </a>

    <div id="light_<?php echo $item_id ?>" class="white_content"> 
        <img src="images/popups/images/<?php echo $item_id . "_" .  strtolower($popup_item->attributes()->name) . ".png" ;?>" alt="Popup Image"/></a>
        <a href = "javascript:void(0)" onclick = "document.getElementById('light_<?php echo $item_id ?>').style.display='none';document.getElementById('fade').style.display='none'">Close</a>
    </div>
</div>

';
}
回声'；
回声'；

---

编辑：我会看看下面的其他几个答案。其中一些提供了一种更好的实现这种效果的方法，但是，我的回答涉及到了手头的问题，即如何使原始代码工作。

您可以在CSS中使用div的ID

<style>
#dark {
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=60);
}
#light {
    display: none;
    position: fixed;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    padding: 16px;
    border: 16px solid orange;
    background-color: white;
    z-index:1002;
    overflow: auto;
}
</style>

#黑暗的{
显示：无；
位置：固定；
最高：0%；
左：0%；
宽度：100%；
身高：100%；
背景色：黑色；
z指数：1001；
-moz不透明度：0.8；
不透明度：.80；
过滤器：α（不透明度=60）；
}
#轻的{
显示：无；
位置：固定；
最高：25%；
左：25%；
宽度：50%；
身高：50%；
填充：16px；
边框：16px实心橙色；
背景色：白色；
z指数：1002；
溢出：自动；
}

我在这里做了一个很好的函数，可以完成这项工作

<script>
function display_lightbox(path) {
    var image = '<img src="' + path + '" alt="Large Image"/>';
    document.getElementById('lightimg').innerHTML=image;
    document.getElementById('light').style.display='block';
    document.getElementById('dark').style.display='block';
}
</script>

功能显示灯盒（路径）{
var图像=“”；
document.getElementById（'lightimg'）。innerHTML=image；
document.getElementById（'light'）.style.display='block'；
document.getElementById（'dark'）.style.display='block'；
}

lightbox代码中包含一个额外的容器，用于JavaScript生成的img标记

<div id="light"> 
    <div id="lightimg"></div>
    <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>
</div>
<div id="dark"></div>

您的拇指显示代码使用JavaScript函数

<div id="popup_container">
    <a href="javascript:void(0)" onclick="display_lightbox('images/popups/images/<?php echo $item_id . "_" .  strtolower($popup_item->attributes()->name) . ".png" ;?>');">
        <img src="images/popups/images/<?php echo $item_id . "_" .  strtolower($popup_item->attributes()->name) . ".png" ;?>" alt="Popup Image"/>
    </a>
</div>

或者你可以实现这个小灯箱

---

我知道这是迟交的，但我想试一试

我修改了其中的许多部分，因此它可能不适合您的css，但它更多的是反映javascript以及干净代码和分离的重要性

一些特征

• 对整个弹出式容器使用事件委派，一个事件处理程序
• 行为与内容的分离
• 易于维护，非常描述性的代码（实际上不需要任何注释）

一些警告

• 我在html中更改了内容，css中需要更改
• 如果html中有进一步的更改，javascript将不得不适应这些更改
• 它不考虑要传递的第二个变量（如果有人愿意解释的话，我不明白它是什么）
• 更多，但我忘了。。。对不起

现在。。。ze代码

<script>
  (function () {
    var
      onDelegatedClick,
      onLoad,
      onUnload,
      enlighten,
      revert;
    enlighten = function (node) {
      var lightbox = document.getElementById('light');
      // pass the clicked image source to our lightbox
      lightbox.querySelector('img').src = node.querySelector('img').src;
      // make it all visible
      lightbox.style.display = 'block';
      document.getElementById('fade').style.display = 'block';
    };
    revert = function () {
      document.getElementById('light').style.display = 'none';
      document.getElementById('fade').style.display = 'none';
    };
    onDelegatedClick = function (event) {
      // find out where we need behaviour
      var targetNode = event.target;
      if (targetNode.tagName !== 'SPAN') {return;}
      // clicked on the close button
      if (targetNode.id) revert();
      // clicked on any of the images, pass the <span>
      else enlighten(targetNode);
    };
    onLoad = function () {
      // add the delegator
      document.getElementById('popup_container').addEventListener('click',onDelegatedClick,false);
    };
    onUnload = function () {
      // dont forget to remove the listener
      document.getElementById('popup_container').removeEventListener('click',onDelegatedClick,false);
    };
    window.addEventListener('load',onLoad,true);
    window.addEventListener('unload',onUnload,true);
  }());
</script>
<div id="popup_container">
<!-- foreach image -->
  <!-- clicks have been delegated, no need for anchors, just delegate all clicks -->
  <span class="lightBoxEnlightener">
    <img src="images/popups/images/<?php echo $item_id."_".strtolower($popup_item->attributes()->name).".png" ;?>" alt="Popup Image"/>
  </span>
<!-- end foreach -->
  <!-- only one lightbox and darkbox required -->
  <div id="light" class="white_content">
    <!-- img src is empty, when the enlightening happens, it'll be populated from the clicked span -->
    <img src="" alt="Popup Image"/>
    <!-- clicks have been delegated -->
    <span id="reverter">Close</span>
  </div>
  <div id="fade" class="black_overlay"></div>
</div>

（功能（）{
变量
单击鼠标左键，
装载，
onUnload，
启发，
还原
启蒙=功能（节点）{
var lightbox=document.getElementById（'light'）；
//将单击的图像源传递到我们的lightbox
lightbox.querySelector（'img'）.src=node.querySelector（'img'）.src；
//让一切都可见
lightbox.style.display='block'；
document.getElementById（'fade'）.style.display='block'；
};
还原=函数（）{
document.getElementById（'light'）.style.display='none'；
document.getElementById（'fade'）.style.display='none'；
};
onDelegatedClick=函数（事件）{
//找出我们需要的行为
var targetNode=event.target；
if（targetNode.tagName！='SPAN'）{return；}
//单击关闭按钮
if（targetNode.id）revert（）；
//单击任何图像，传递
else启蒙（targetNode）；
};
onLoad=函数（）{
//添加委托人
document.getElementById（'popup_container'）。addEventListener（'click'，onDelegatedClick，false）；
};
onUnload=函数（）{
//别忘了删除侦听器
document.getElementById（'popup_container'）。removeEventListener（'click'，onDelegatedClick，false）；
};
addEventListener（'load'，onLoad，true）；
window.addEventListener（'unload'，onUnload，true）；
}());
属性（）->名称）。“.png”？>“alt=”弹出图像“/>
接近

---

脚本

标记可以移动到任何地方或一个单独的文件中，span的行为将在文档加载时成为专利

。
我选择span是因为必须处理实际的
锚定
标记有时很麻烦。
您有一个额外的（未打开）
在第二个
img
标记之后..有什么反馈吗？
<div id="popup_container">
    <a href="javascript:void(0)" onclick="display_lightbox('images/popups/images/<?php echo $item_id . "_" .  strtolower($popup_item->attributes()->name) . ".png" ;?>');">
        <img src="images/popups/images/<?php echo $item_id . "_" .  strtolower($popup_item->attributes()->name) . ".png" ;?>" alt="Popup Image"/>
    </a>
</div>

<script>
  (function () {
    var
      onDelegatedClick,
      onLoad,
      onUnload,
      enlighten,
      revert;
    enlighten = function (node) {
      var lightbox = document.getElementById('light');
      // pass the clicked image source to our lightbox
      lightbox.querySelector('img').src = node.querySelector('img').src;
      // make it all visible
      lightbox.style.display = 'block';
      document.getElementById('fade').style.display = 'block';
    };
    revert = function () {
      document.getElementById('light').style.display = 'none';
      document.getElementById('fade').style.display = 'none';
    };
    onDelegatedClick = function (event) {
      // find out where we need behaviour
      var targetNode = event.target;
      if (targetNode.tagName !== 'SPAN') {return;}
      // clicked on the close button
      if (targetNode.id) revert();
      // clicked on any of the images, pass the <span>
      else enlighten(targetNode);
    };
    onLoad = function () {
      // add the delegator
      document.getElementById('popup_container').addEventListener('click',onDelegatedClick,false);
    };
    onUnload = function () {
      // dont forget to remove the listener
      document.getElementById('popup_container').removeEventListener('click',onDelegatedClick,false);
    };
    window.addEventListener('load',onLoad,true);
    window.addEventListener('unload',onUnload,true);
  }());
</script>
<div id="popup_container">
<!-- foreach image -->
  <!-- clicks have been delegated, no need for anchors, just delegate all clicks -->
  <span class="lightBoxEnlightener">
    <img src="images/popups/images/<?php echo $item_id."_".strtolower($popup_item->attributes()->name).".png" ;?>" alt="Popup Image"/>
  </span>
<!-- end foreach -->
  <!-- only one lightbox and darkbox required -->
  <div id="light" class="white_content">
    <!-- img src is empty, when the enlightening happens, it'll be populated from the clicked span -->
    <img src="" alt="Popup Image"/>
    <!-- clicks have been delegated -->
    <span id="reverter">Close</span>
  </div>
  <div id="fade" class="black_overlay"></div>
</div>