how to fetch blob image gallery in php html sql

-
create a new gallery.php page and paste this code and change column names according to this.
<?php
  session_start();
 
?>

<!DOCTYPE html>
<html>
<head>
    <title>Image Gallery Example</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- References: https://github.com/fancyapps/fancyBox -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: red;
}

.active {
    background-color: #4CAF50;
}
</style>
   <!-- <style type="text/css">
    .gallery
    {
        display: inline-block;
        margin-top: 20px;
    }
    .close-icon{
    border-radius: 50%;
        position: absolute;
        right: 5px;
        top: -10px;
        padding: 5px 8px;
    }
        .form-image-upload{
            background: #e8e8e8 none repeat scroll 0 0;
            padding: 15px;
        }
    </style>-->
</head>
<ul>
  <li><a class="active" href="index.php">Home</a></li>
  <li><a href="register.php">Registration</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
<body>

<div class="container">
<h2 align="center">List of Teachers</h2>


    <div class="row">
    <div class='list-group gallery'>

            <?php
            require('connect.php');

            $sql = "SELECT * from reg_tbl WHERE category='teacher'";
            $images = $con->query($sql);

            while($image = $images->fetch_assoc()){

            ?>
                <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
                    <a class="thumbnail fancybox" rel="ligthbox" href="">
                       
<?php echo '<img class="img-responsive" src="data:image/jpeg;base64,'.base64_encode( $image['image'] ). '"/>';  ?>
                        <div class='text-center'>
                            <small class='text-muted'><?php echo $image['ame'] ?></small><br>
<small class='text-muted'><?php echo $image['category'] ?></small><br>
<small class='text-muted'><?php echo $image['subjects'] ?></small>
<small class='text-muted'><?php echo $image['phone'] ?></small>
                        </div> <!-- text-center / end -->
<h3>Comment</h3>
<p>  <small class='text-muted'><?php echo $image['feedback'] ?></small></p>
<p>from : <small class='text-muted'><?php echo $image['feedback_user'] ?></small></p>
                    </a>
                 
                </div> <!-- col-6 / end -->
            <?php } ?>

        </div> <!-- list-group / end -->
    </div> <!-- row / end -->
</div> <!-- container / end -->

</body>

<script type="text/javascript">
    $(document).ready(function(){
        $(".fancybox").fancybox({
            openEffect: "fade",
            closeEffect: "fade"
        });
    });
</script>

</html>



output :


Comments

Post a Comment

Popular posts from this blog

how to save image to pdf in android

-
//make function inside the activity public void convertPDF( byte [] path) { //String FILE = "mnt/sdcard/FirstPdf.pdf"; Document document= new Document(); File direct = new File(Environment. getExternalStorageDirectory () + "/collage app pdf" ); if (!direct.exists()) { File wallpaperDirectory = new File( "/sdcard/collage app pdf/" ); wallpaperDirectory.mkdirs(); } File f = null ; f = new File(direct, UUID. randomUUID ().toString() + ".pdf" ); if (f.exists()) { f.delete(); } try { PdfWriter. getInstance (document, new FileOutputStream(f)); document.open(); try { Image image=Image. getInstance (path); document.add( new Paragraph( "Collage Pic" )); document.add(image); document.close(); Toast. makeText (getContext(), "pdf save successfully" , Toast. LENGTH_SHORT ).show();...
Read more

How to create album view with fancybox slider view in html php complete code

-
Image
 <!DOCTYPE html> <html lang="en">   <head>     <meta name="robots" content="noindex,nofollow" />     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="css/all.css" rel="stylesheet"/> <link href="css/gallery-css.css" rel="stylesheet"/> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ---------->  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen"> <script src="//cdnjs.cloudflare.co...
Read more