Lightbox issue when loading dynamic image name

javascript, php

Solution

You're getting the same image every time because the DOM is selecting the first element it finds with the id of 'light'. ID's should be unique in HTML. Instead try this...

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

Also, move the fade div outside of your loop. You only need one instance of it, not 10...

So if you were building this in raw PHP rather than using a templating engine it would look like...

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: I would look at a few of the other answers below. Some of them give a much better way of achieving this effect, however, my answer dealt with the question at hand, how to get the original code working.

Problem

Ok i have a lightbox which works quite well except for 1 issue. The images are dynamically built, it gets a list of say 10 images and loops through each displaying each image on a row. So i can see what is going wrong. No matter which image i select its showing the first image in the lightbox so i need to pass it a variable with the image path or image name. I really dont have that much javascript experience but what im hoping to do is put the `$popup_item->attributes()->name` into a variable, pass it via the `onclick` event and then inside `div` with `id="light"` instead of passing `$popup_item->attributes()->name` i pass the variable but not sure if that is the best approach or even where to start There is a loop like this which loops through and prints out the popup container a bunch of times: ``` foreach($xml->config->popup as $popup_item){ } ``` and the 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--> ``` And the lightbox css in case it helps: ``` .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: Actually i would need to pass 2 variables, the `$item_id` and the `$popup_item->attributes()->name` but concept is the same

Original source