Social Networking Site: How to create a Photo Gallery

Submitted by GeePee on Friday, March 20, 2015 - 15:59.

In this tutorial, I'm going to show you how to create a Photo Gallery using Modal. To start with tutorial, open the “home.php” and on under the first modal, add the following code.

<div class="list-group">
        <a href="gallery.php" class="list-group-item">
          <span class="badge pull-right">
                <?php $mydb->setQuery("SELECT * FROM photos WHERE `member_id`='{$_SESSION['member_id']}'");
                        $cur = $mydb->executeQuery();
                        echo $row_count = $mydb->num_rows($cur);
                ?>
        </span>
         View photos
        </a>
 
</div>

The code above will display a list group under the profile picture, and it will also display a number of total number of photos available from the database. And when the user click this link it will be redirected to another PHP page called gallery.php which will be created in later part as we go along in this lesson. And it will look like as shown below.

Next, we’re going to add create a new PHP file called “gallery.php”, and add the following code: This code below will display a photo gallery.

<?php   
require_once("includes/initialize.php");        
include 'header.php';
?>
 
<div class="container">
<div class="rows">
                
 
//thi s PHP code will get all the photos based on the user session ID
                <?php
                
                $mydb->setQuery("SELECT * FROM photos WHERE `member_id`='{$_SESSION['member_id']}'");
                $cur = $mydb->loadResultList();
                foreach($cur as $object): ?>
                                <a data-target="#myModal" data-toggle="modal" >
                                <img src="./uploads/<?php echo $object->filename; ?> " class="img-thumbnail" width="300" height="300" />
                                </a>
                <?php endforeach;       ?>
 
//this code we create a modal that later will be used to display a specific photo in a big size format
                 
                <!-- Modal -->
 
                        <div class="modal fade" id="myModal" tabindex="-1">
                                <div class="modal-dialog">
                                        <div class="modal-content">
                                                <div class="modal-body">
                                        
                                                        </div>
 
                                        </div><!-- /.modal-content -->
                                </div><!-- /.modal-dialog -->
                        </div><!-- /.modal -->
 
</div>
 
</div> <!-- /container -->
 
        <footer>
        <p align="center">&copy; Philsocial 2013</p>
    </footer>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
     <script src="js/tooltip.js"></script>
        <script src="assets/js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
         <script src="js/popover.js"></script>
         <script>
                $(document).ready(function(){
           $('a img').on('click',function(){
                var src = $(this).attr('src');
                var image = '<img src="' + src + '" class="img-responsive"/>';
                $('#myModal').modal();
                $('#myModal').on('shown.bs.modal', function(){
                    $('#myModal .modal-body').html(image);
                });
                $('#myModal').on('hidden.bs.modal', function(){
                    $('#myModal .modal-body').html('');
                });
           });  
        })
        </script>
        
  </body>
</html>

The output of this code when executed. It will look like as shown below:

And we also added below a script code that calls the modal () function when the specific photo is clicked. The the contents of the modal box are grabbed from the two variables we created (src, image) which is the image tag and the original src of the image clicked. And the output of this will look like as shown below.

And I have attached the full source code of this tutorial, so that you can modify or customize it to improve it more for your own needs. If you want to see more of my works, new Source Code or Application and Tutorials Just click here.

Add new comment

225 views