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

Question

好吧，我有一个灯箱，除1个问题以外工作得很好。这些图像是动态构建的，它获得了10个图像的列表，并循环显示每行图像。所以我可以看到发生了什么问题。无论我选择哪一张图片显示灯箱中的第一张图片，我都需要为图片路径或图片名称传递一个变量。

我真的没有那么多JavaScript的经验，但什么即时希望做的就是把$popup_item->attributes()->name到一个变量，通过onclick事件经过，然后里面div与id="light"强似$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将有以适应这些变化
• 它没有照顾第二个变量通过（我不明白它是什么，如果有人在意解释...）
• 更多，但我忘了...对不起

现在......泽码

<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标签有时是累赘。