Jump to content

Help with javascript gallery/lightbox with PHP and MySQL


Millertime31

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.