Monday, March 27, 2017

Simple photos gallery using jquery ,fancybox library and php pdo.

In this tutorial we are going to make simple photos gallery using jquery fancybox and php pdo.
FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page. 
It was built using the jQuery library. Licensed under both MIT and GPL licenses.
Its a free to download and easy to use on your website. you can get different styles of fancybox(download from here).
You Can get various exames to download of fancyboxes like
  • Inline-auto detect width and height
  • Inline-modal window 
  • Ajax-passing custom data 
  • Ifrane
  • Swf 
  • Google maps (iframe)
  • Youtube (iframe) and etc..
We have already done a simple method for displaying and uploading images and text in our previous tutorial How To Upload And Display Images And Text Together Using PHP PDO.. 
Now, At this time we are going to display that images in fancybox format Which can display our images in a modal view. Its really looks awesome for your website.
If you are ready now and have downloaded fancybox library  then lets start,

  • First,Create index.php file and Connect or insert these  fanacybox library inside html head tags as like this

<head>
 <script src="../js/jquery.min.js"></script>
<script  src="../js/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="../js/source/jquery.fancybox.css" media="screen">
</head>

  • And Now insert some javascript of fancyfox inside head tags again to your index.php file.

    <script type="text/javascript">
        $(document).ready(function() {
            
            $('.fancybox').fancybox();
        });
      </script>

  • And Now Inside the body tags of index.php file copy and paste these php pdo scripts which displays our mysql table records and display images and title in a fancybox modal.

Our database connection is same as we have done already in  How To Upload And Display Images And Text Together Using PHP PDO..

To learn how to upload and display images more with php and pdo go here How To Upload And Display Images And Text Together Using PHP PDO.. 

  1.        <?php
  2.         include('db.php');
  3.         //query for selecting database table
  4.        $results = $db_con->prepare("SELECT * FROM posts ORDER BY post_id");
  5. $results->execute();
  6.         // this while statement displays rows of database table
  7.         while($row=$results->fetch(PDO::FETCH_ASSOC))
  8.         {
  9.             extract($row);
  10.             ?>              
  11.         <div class="col-sm-4">
  12.         <div class="thumbnail text-center">
  13.         <?php echo $row['image_title']; ?>
  14.          
  15.          <?php   echo " 
  16. <a href='uploads/$post_image' class='fancybox' data-fancybox-group='gallery' title='$image_title'><img src='uploads/$post_image' class='img-responsive' alt='kamala'  width='200' height='200' style='border:1px solid #333333;'/> </a> ";?> <!--This  class='fancybox' data-fancybox-group='gallery'  called by javacript above and proceed for fancybox modal -->
  17.            </div>
  18.            </div>
  19.             <?php
  20.         }
  21.         ?>

This is how we created simple method to show images in a fancybox modal using fancybox library and php pdo.
Full index.php file
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title> simple fancybox modal in php pdo.</title>
  6. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
  7.  <script src="../js/jquery.min.js"></script>
  8.   <script src="../bootstrap/bootstrap.min.js"></script> 
  9.   <!-- Add fancyBox main JS and CSS files -->
  10.     <script  src="../js/source/jquery.fancybox.js"></script>
  11.     <link rel="stylesheet" href="../js/source/jquery.fancybox.css" media="screen">
  12.     <script type="text/javascript">
  13.         $(document).ready(function() {
  14.             
  15.             $('.fancybox').fancybox();
  16.         });
  17.     </script>     
  18. </head>
  19. <body>
  20.     <div class="container">
  21.  
  22.         <?php
  23.         include('db.php');
  24.         //query for selecting database table
  25.        $results = $db_con->prepare("SELECT * FROM posts ORDER BY post_id");
  26. $results->execute();
  27.         // this while statement displays rows of database table
  28.         while($row=$results->fetch(PDO::FETCH_ASSOC))
  29.         {
  30.             extract($row);
  31.             ?>          
  32.         <div class="col-sm-4">
  33.         <div class="thumbnail text-center">
  34.         <?php echo $row['image_title']; ?>         
  35.          <?php   echo " 
  36. <a href='uploads/$post_image' class='fancybox' data-fancybox-group='gallery' title='$image_title'><img src='uploads/$post_image' class='img-responsive' alt='kamala'  width='200' height='200' style='border:1px solid #333333;'/> </a> ";?>
  37.            </div>
  38.            </div>
  39.             <?php
  40.         }
  41.         ?>
  42.        </div>
  43. </body>
  44. </html>
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)