Help with javascript gallery/lightbox with PHP and MySQL

[Millertime31]

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

[jcbones]

Are you using lightbox2?  If so, you just have to give all the anchors the same name in the data-lightbox attribute.

 

http://http://lokeshdhakar.com/projects/lightbox2/

Edited July 7, 2013 by jcbones

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