Millertime31 Posted July 6, 2013 Share Posted July 6, 2013 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. <?phpinclude('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 Quote Link to comment Share on other sites More sharing options...
jcbones Posted July 7, 2013 Share Posted July 7, 2013 (edited) 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 Quote Link to comment Share on other sites More sharing options...
Millertime31 Posted July 10, 2013 Author Share Posted July 10, 2013 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.