<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>
<?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">© 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>