Help with javascript gallery/lightbox with PHP and MySQL

Hello everyone! I’ll get straight to the point. I have built a portfolio gallery for a client that uses a javascript/jquery to arrange my thumbnails on a single page. It includes a “filter” function that allows me to narrow down what is displayed on the page based on certain keywords associated with the content.

I have an upload script which allows me to add data through a form to my MySQL database. The image name is saved to the database and the image is uploaded to a particular folder on my server. I then pull that information into my portfolio page and loop through all the “rows” in the database which creates my page full of thumbnails.

When a user clicks on any given thumbnail, a lightbox is shown which shows a larger image or embedded video, along with the title and description of the project. Everything works great.

I would like to go one step further and add a feature to click to the “next” and “previous” item in the portfolio from within the lightbox without having to close the lightbox and click another thumbnail. Make sense? I am a beginner with php but am learning my way around it. Javascript is still a foreign language so I would like to accomplish this in PHP if possible. Thank you for any help you can offer to get me in the right direction.


<?php include('includes/connection.php'); $tbl_name="portfolio_pg"; ?>



    [/code] [php] <?php
$data = mysql_query("SELECT * FROM portfolio_pg") or die(mysql_error()); 
while($info = mysql_fetch_array( $data )) 


  •       <a href="javascript:void();" onclick="document.getElementById('underlay').style.display='block'; document.getElementById('<?php echo $info['pg_id']; ?>').style.display='block';"><?php echo "<img src=images/portfolio/thumbs/".$info['photo'] ." width=\"164\" height=\"164\">"; ?></a>
           <div id="underlay"></div>
       <div class="lightbox" id="<?php echo $info['pg_id']; ?>">
           <div id="closer"><a href="javascript:void();" onclick="document.getElementById('underlay').style.display='none'; document.getElementById('<?php echo $info['pg_id']; ?>').style.display='none';">close</a></div>
    				echo "<div class=\"vidHolder\"> ".$info['Project_Link']." </div>"; 
    				echo "<div class=\"picHolder\"><img src=\"images/portfolio/".$info['photo_2'] ."\" width=\"100%\" height=\"100%\"></div>";
    	<div class="projectHead"><?php echo $info['Page_Heading_1']; ?></div>
    	<div class="projectBod"><?php echo $info['Paragraph_1']; ?></div>
    	</div><!-- Close Lightbox Viewer -->
  • <?php // close while loop } ?>



    you can see it in action by going following

    Sponsor our Newsletter | Privacy Policy | Terms of Service