Lightbox-Problem beim Laden des dynamischen Image-Namens

Question

Ok ich habe einen Leuchtkasten, der bis auf 1 Problem ganz gut funktioniert. Die Bilder werden dynamisch erstellt, es wird eine Liste von etwa 10 Bildern und Schleifen durch jedes Bild in einer Reihe angezeigt. So kann ich sehen, was falsch läuft. Egal, welches Bild ich auswähle, es zeigt das erste Bild im Leuchtkasten, also muss ich ihm eine Variable mit dem Bildpfad oder Bildnamen übergeben.

ich nicht wirklich haben, dass viel javascript Erfahrung, aber was im zu tun, der Hoffnung, die $popup_item->attributes()->name in eine Variable gesetzt wird, es über das onclick Ereignis passieren und dann in div mit id="light" statt $popup_item->attributes()->name von geben ich die Variable übergeben, aber nicht sicher, ob das ist der beste Ansatz, oder auch dann, wenn

Es ist eine Schleife, wie dies zu beginnen, die Schleifen durch und druckt die Popup-Container ein paar mal aus:

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

} 

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

Und der Leuchtkasten css, falls es hilft:

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

EDIT: Eigentlich müsste ich zwei Variablen übergeben, die $item_id und das $popup_item->attributes()->name aber Konzept ist das gleiche

Answer 1

Sie erhalten jedes Mal das gleiche Bild, weil das DOM das erste gefundene Element mit der ID 'light' auswählt. IDs sollten in HTML eindeutig sein. Stattdessen versuchen Sie dies ...

Verschieben Sie auch die Fade div außerhalb Ihrer Schleife. Sie benötigen nur eine Instanz davon, nicht mehr als 10 ...

Also, wenn Sie diese in raw PHP bauen anstatt eine Templating-Engine es wie ...

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

EDIT aussehen würde: Ich würde schau dir ein paar der anderen Antworten unten an. Einige von ihnen geben einen viel besseren Weg, um diesen Effekt zu erzielen, meine Antwort ging jedoch auf die Frage ein, wie der ursprüngliche Code funktioniert.

Answer 2

Sie sagen, dass Ihre Schleife druckt den Popup-Container einige Male aus.

Ein Problem mit diesem Ansatz ist, dass Sie mit doppelten id auf HTML-Elemente enden werden.

Dies bewirkt, dass die document.getElementById nur die erste zurückzuversetzen entspricht (wie scheint Ihr Problem zu sein)

Sie Ihre einzigartige id ‚s machen müssen (und die Javascript, die sie Ziele)

Answer 3

Sie können die ID des div in CSS verwenden.

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

Ich habe hier eine nette Funktion gemacht, die den Job machen wird.

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

Der Leuchtkasten-Code mit einem zusätzlichen Container für das von JavaScript generierte Img-Tag.

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

Ihr Daumen-Display-Code mit der JavaScript-Funktion.

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

Oder Sie können diesen kleinen Leuchtkasten implementieren.

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

Answer 4

Ich weiß, dass dies eine verspätete Vorlage ist, aber ich wollte ihm einen Versuch geben.

I modifizierte viele Teile dieses so ist es vielleicht nicht zu Ihrem CSS anpassen, aber es ist mehr eine Übung in der Reflexion auf JavaScript und die Bedeutung von sauberem Code und Trennung

einiger Funktionen

• Nutzung des Veranstaltungs Delegation, ein Ereignishandler für das gesamte Popup-Container
• Trennung des Verhaltens und der Inhalt
• einfache Wartung, sehr anschaulich Code (es doesn‘ t brauchen eigentlich keine Kommentare)

Einige Einsprüche

• ich änderten sich die Dinge in den HTML-Code, werden Änderungen in der CSS erforderlich
• Wenn es weitere Änderungen in den HTML-Code, wird die haben Javascript um sich an diese Änderungen anzupassen
• es kümmert sich nicht um die zweite Variable zu übergeben (Ich verstehe nicht, was es ist, wenn jemand interessiert zu erklären ...)
• mehr, aber ich habe vergessen ... sorry

und jetzt ... ze Code

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

die script Tag wird on document load werden Patent überall oder in einer separaten Datei, das Verhalten der Spannweiten bewegt werden kann. Ich wählte Spannen, weil mit tatsächlichen anchor Tags umzugehen ist manchmal umständlich.