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

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將必須適應這些更改
• 它不會照顧第二個變量（我不明白它是什么，如果有人關心解釋......）
• 更多，但我忘了...抱歉

現在...... 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標簽有時很麻煩。