加載動態圖像名稱時的燈箱問題

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標籤有時是累贅。