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]
<?php include('includes/connection.php'); $tbl_name="portfolio_pg"; ?>[/php]
[code]
-
[/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>
<?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 -->
[/php]
</ul>
</section>you can see it in action by going following http://alemanarts.net/portfolio.php