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

-

 <!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.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>

<!------ Include the above in your HEAD tag ---------->

<link href="img/logo.jpg" rel="icon"/>

<link href="css/bootstrap.min.css" rel="stylesheet">

<link href="css/global.css" rel="stylesheet">

<link href="css/index.css" rel="stylesheet">

<link href="css/about.css" rel="stylesheet">

<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />

<link href="css/ken-burns.css" rel="stylesheet" type="text/css" media="all" />

<link type="text/css" rel="stylesheet" href="css/animate.css"/>

<link type="text/css" rel="stylesheet" href="css/all.css"/>

<link href="https://fonts.googleapis.com/css?family=Alata&display=swap" rel="stylesheet"/>

<link href="css/contact.css" rel="stylesheet">

<!--<script src="js/jquery-2.1.1.min.js"></script>-->

    <script src="js/bootstrap.min.js"></script>

<link rel="stylesheet" href="../admin/plugins/datatables-bs4/css/dataTables.bootstrap4.css">

    <title>Album Images</title>

  </head>

 

<body>

<?php include 'nav.php' ?>

<section id="about_main">

 <div class="about_inner clearfix">

  <div class="container">

   <div class="row">

    <div class="about_main_1">

     <h1>Album Images</h1>

<ul>

     <li><a href="#">Home</a></li>

<li><i class="fa fa-star"></i></li>

<li>Album Images</li>

</ul>

   </div>

  </div>

 </div>

 </div>

</section>

<section id="about">

 <div class="container">

  <div class="row">

   <div class="about_1 clearfix">

    <div class="col-sm-12">

<div class="about_2">

   <!-- Page Content -->

   <div class="container page-top">

        <div class="row">

<?php

$check='';

include 'connect.php';

            $con=  mysqli_query($connection, "select * from tbl_album_images order by album desc");

 while($row=  mysqli_fetch_array($con))

             {

$image=$row['file'];

$album=$row['album'];

$url="http://127.0.0.1/punjab/admin/album/".$image;

if($album==$check){

       ?>

          

<div class="col-lg-3 col-md-4 col-xs-6 thumb">

                <a href="<?php echo $url; ?>?auto=compress&cs=tinysrgb&h=450&w=940" class="fancybox" rel="ligthbox">

                    <img  src="<?php echo $url; ?>?auto=compress&cs=tinysrgb&h=650&w=940" class="zoom img-fluid "  alt="">

                   

                </a>

</div>

          

          <?php }

  else{

  $check=$album;

  ?>

 

    </div>

<h2 style="color:#468b47"><?php echo $album ?></h2>

<br>

<div class='row'>

   <div class="col-lg-3 col-md-4 col-xs-6 thumb">

   

                <a href="<?php echo $url; ?>?auto=compress&cs=tinysrgb&h=450&w=940" class="fancybox" rel="ligthbox">

                    <img  src="<?php echo $url; ?>?auto=compress&cs=tinysrgb&h=650&w=940" class="zoom img-fluid "  alt="">

                   

                </a>

         </div>

  <?php }} ?>

            

        

       </div>

    </div>

  </div>

   </div>

    </div>

</div>

  </div>

</section>

<?php include 'footer.php'; ?>

<script>

$(document).ready(function(){

  $(".fancybox").fancybox({

        openEffect: "none",

        closeEffect: "none"

    });

    

    $(".zoom").hover(function(){

$(this).addClass('transition');

}, function(){

        

$(this).removeClass('transition');

});

});

    

</script>

</body>

 


</html>

Output:






Comments

Post a Comment

Popular posts from this blog

how to fetch blob image gallery in php html sql

-
Image
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; ...
Read more

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