Question

好的我有一个灯箱，除1个问题外，效果很好。图像是动态构建的，它获得了10个图像的列表，并循环显示每行上的每个图像。所以我可以看出出了什么问题。无论我选择哪个图像显示灯箱中的第一个图像，所以我需要传递一个带有图像路径或图像名称的变量。

我真的没有那么多javascript体验，但我希望做的是将$popup_item->attributes()->name放入变量，通过onclick事件传递，然后传递div id="light" 1}}而不是传递$popup_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-->

灯箱css以防万一：

.black_overlay{
    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);
}

.white_content {
    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;
}

编辑：其实我需要传递2个变量，$item_id和$popup_item->attributes()->name，但概念是相同的

Answer 1

每次都会得到相同的图像，因为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>

此外，将淡入淡出div移到循环外部。你只需要一个实例，而不是10 ......

因此，如果您在原始PHP中构建它而不是使用模板引擎，那么它看起来就像......

echo '<div id="popup_container">';

foreach($xml->config->popup as $popup_item){
    echo '<a href = "javascript:void(0)" onclick = "document.getElementById(\'light_'.$popup_item->attributes()->item_id.'\').style.display=\'block\';document.getElementById(\'fade\').style.display=\'block\'">
            <img src="images/popups/images/'.$popup_item->attributes()->item_id."_".strtolower($popup_item->attributes()->name).'.png" alt="Popup Image"/>
        </a>

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

echo '</div>';
echo '<div id="fade" class="black_overlay"></div>';

编辑：我会看下面的一些其他答案。其中一些提供了一种更好的方法来实现这种效果，但是，我的回答是关于手头的问题，如何使原始代码有效。

Answer 2

你说你的循环打印弹出容器很多次..

此方法的一个问题是，您将在html元素上以重复id结束..

这会导致document.getElementById仅返回匹配的第一个（似乎是您的问题）

您需要使id唯一（以及定位他们的javascript ）

Answer 3

您可以在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>

我在这里做了一个很好的功能，可以完成这项工作。

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

灯箱代码，其中包含一个由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>

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

http://www.laptoptips.ca/javascripts/shutter-reloaded/

Answer 4

我知道这是迟交，但我想尝试一下。

我修改了很多部分，所以它可能无法适应你的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>

script标记可以移动到任何地方或移动到单独的文件中，跨度的行为将成为专利on document load。我选择了跨度，因为必须处理实际的anchor标签有时很麻烦。

加载动态图像名称时灯箱问题

4 个答案: