Millertime31

No, I am using my own lightbox which is simply CSS and the JavaScript onClick function to hide and display content. It's more of just a pop up image viewer that accommodates HTML or anything else I want to show. I have converted everything to use fancy box and it works fine but I wanted to do it myself without a per built solution as I am trying to become more familiar with PHP. So any ideas on how to do this from scratch would be great. Thanks.

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"; ?> <nav id="filter"></nav> <section id="main"> <ul id="grid"> <?php $data = mysql_query("SELECT * FROM portfolio_pg") or die(mysql_error()); while($info = mysql_fetch_array( $data )) { ?> <li data-tags="<?php echo $info['Filters']; ?>"> <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> <?php if($info['Project_Link']!="") { echo "<div class=\"vidHolder\"> ".$info['Project_Link']." </div>"; } else { 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 --> </li> <?php // close while loop } ?> </ul> </section> you can see it in action by going following HERE Thanks for any help