Question

My problem has to do with PHP, jQuery and CSS.

I want to make a lightbox in a while loop, and then have the lightbox give me info for each of the rows.

There is a problem because it makes lightboxes for each of the rows, and with position:absolute we can see only the last row from the result. I don’t want to see the last but I want the light box to show me info depending on which row I have clicked.

Here is the code:

jQuery:

$(document).ready(function(){
    $('.lightbox').click(function(){
        $('.boxi').css('display','block');
    });
});

PHP:

    $result = $db->query("SELECT * FROM destinations WHERE direction=1;");
    while ($rows = mysql_fetch_array($result)) {
        $name = $rows['name'];
        $table .=  '<div class="destionations">
                <div class="name">Prej: <strong>'.$name.'</strong></div>
                <table width="100%"  class="extra" cellspacing="1" cellpadding="5" border="0" >
                <tr class="bgC3" style="font-weight:bold">
                    <td width="20"></td>
                    <td>Deri</td>
                    <td width="50">Çmimi</td>
                    '.managment::cmimet_e_caktuara($name).'
                </tr>
                </table>
                        <div class="buttoni">
                        <a href="#" class="lightbox">test</a>
                        <div class="boxi">'.$name.'</div>
                            <form action="" method="POST">                          
                            <input type="text" name="new_city">
                            <input type="hidden" name="prej" value="'.$name.'"> 
                            <input type="submit" name="new_dest" value="Shto destinacionin">
                            </form>
                        </div>
                </div>';
    }
}

Answer 1

It looks like you’re wanting to turn a div into a lightbox? You could just try adjusting your current CSS on .boxi to display: none; and set a z-index on it before – then adjust your javascript to something like this:

$('.lightbox').click(function(){
    $('.boxi').show();
    return false;
});

You could get much more complex with grabbing the next lightobx container when .lightbox is clicked – I’d recommend checking out the plugin Fancybox at fancybox.net, that’s the one I typically use. Good luck!