php slideshow in javascript source code

Today, We want to share with you php slideshow.In this post we will show you image slider in javascript source code, hear for html slideshow code without javascript we will give you demo and example for implement.In this post, we will learn about Create Dynamic Image Slider using PHP with jQuery with an example.

PHP Image Slideshow with jQuery using Multiple File Upload

In this tutorial we learn to all about php slideshow Examples like as a simple slideshow, clickable slideshow html, text slideshow html, image slider jquery, html slideshow generator or many more.

index.php

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1">
<link rel="stylesheet" href="css/main.css">

<title>PHP Image Slideshow - wwww.pakainfo.com</title>
</head>
<style>
body {
    max-width: 960px;
    margin: 0 auto;
    font-family: arial;
}

.googlephotos {
    padding: 40px 0px;
}

.googlephotosItem {
    width: 300px;
    display: inline-block;
    padding-right: 15px;
}

.googlephotosItem img {
    width: 100%;
}
</style>
<body>
    <div class="container py-4">
        <h1>PHP Image Slideshow - www.pakainfo.com</h1>
        <body>
            <form action="index.php" id="image" name='image'
                method="POST" enctype="multipart/form-data"
                onsubmit="return validate();">
                <div class="form-row">
                    <input type="file" id="file-input" name="file-input[]"
                        multiple="multiple">
                </div>
                <div class="button-row">
                    <input type="submit" id="submit" name="submit"
                        value="Post to Slideshow"><span id="validation_error"></span>
                </div>
            </form>
        </body>
        <div>
            <!-- googlephotos class need for using googlephotos -->
            <div class="googlephotos">
                <?php
                if (isset($_POST['submit'])) {
                    if (count($_FILES['file-input']['name']) > 0) {
                        for ($i = 0; $i < count($_FILES['file-input']['name']); $i ++) {
                            $File_dir = $_FILES['file-input']['tmp_name'][$i];
                            $save = "images/" . $_FILES['file-input']['name'][$i];
                            move_uploaded_file($File_dir, $save);
                        }
                        $dir = "images/";
                        $photo = glob($dir . "*.jpeg");
                        foreach ($photo as $photos) {
                            ?>
                    <div class="googlephotosItem">
                    <img src="<?php print_r($photos) ?>">
                </div>
                  <?php
                        }
                        ?> 
                <div class="button-row1">
                    <input type='submit' id='slideshow' name='slideshow'
                        value='Start Slideshow'>
                </div>
      <?php }}?>
                
          
        </div>
        </div>
        <div class="googlephotosShadow"></div>
        <div class="googlephotosModal">
            <i class="googlephotosIcon gIquit close"></i> <i
                class="googlephotosIcon gIleft nav-left"></i> <i
                class="googlephotosIcon gIright nav-right"></i>
            <div class="googlephotosContainer">
                <img src="">
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
    function validate() {
    	    if($("#file-input").val() == "") {
            $("#validation_error").html("Please select image files");
            return false;
        }
        return true;
    }
    </script>
    <!-- Main JS -->
    <script src="js/main.js"></script>
</body>
</html>

Main.js

$(function () {
    $('.gIquit').click(function () {
        $('.googlephotosModal').css({ 'transform': 'scale(0)' })
        $('.googlephotosShadow').fadeOut()
    })
    $('#slideshow').click(function (){
        googlephotosNavigate($('.googlephotosItem'), 'opened')    
        $('.googlephotosModal').css({ 'transform': 'scale(1)' })
        $('.googlephotosShadow').fadeIn()
    })
    
    let googlephotosNav
    let googlephotosNew
    let googlephotosNewImg
    let googlephotosNewText
    $('.gIleft').click(function () {
        googlephotosNew = $(googlephotosNav).prev()
        googlephotosNavigate(googlephotosNew, 'last')
    })
    $('.gIright').click(function () {
        googlephotosNew = $(googlephotosNav).next()
        googlephotosNavigate(googlephotosNew, 'first')
    })
    
    
    function googlephotosNavigate(gData, direction) {
        googlephotosNewImg = gData.children('img').attr('src')
        if (typeof googlephotosNewImg !== "undefined") {
            googlephotosNav = gData
            $('.googlephotosModal img').attr('src', googlephotosNewImg)
        }
        else {
            gData = $('.googlephotosItem:' + direction)
            googlephotosNav = gData
            googlephotosNewImg = gData.children('img').attr('src')
            $('.googlephotosModal img').attr('src', googlephotosNewImg)
        }
        googlephotosNewText = gData.children('img').attr('data-text')
        if (typeof googlephotosNewText !== "undefined") {
            $('.googlephotosModal .googlephotosContainer .googlephotosText').remove()
            $('.googlephotosModal .googlephotosContainer').append('<div class="googlephotosText">' + googlephotosNewText + '</div>')
        }
        else {
            $('.googlephotosModal .googlephotosContainer .googlephotosText').remove()
        }
    }
})

main.css

.googlephotos .card {
  cursor: pointer;
}

.googlephotosShadow {
  display: none;
  -webkit-transition: ease all .5s;
  transition: ease all .5s;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
}

.googlephotosModal {
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: ease all .5s;
  transition: ease all .5s;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.googlephotosModal .googlephotosContainer {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
}

.googlephotosModal .googlephotosContainer img {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  border: 10px solid #fff;
  border-radius: 10px;
}

.googlephotosModal .googlephotosContainer .googlephotosText {
  position: absolute;
  width: 100%;
  height: auto;
  top: 100%;
  color: #fff;
  text-align: center;
  font-size: 1.5em;
}

.googlephotosModal .googlephotosIcon {
  position: absolute;
  font-size: 2rem;
  width: 4rem;
  height: 4rem;
  text-align: center;
  color: #fff;
}

.googlephotosModal .gIquit {
  right: 10px;
  top: 10px;
}

.googlephotosModal .gIleft {
  top: 50%;
  left: 10px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.googlephotosModal .gIright {
  top: 50%;
  right: 10px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.close {
    background: url("../icons/icon-close.png") no-repeat;
    cursor: pointer;
}
.nav-left {
    background: url("../icons/icon-left.png") no-repeat;
    cursor: pointer;
}
.nav-right {
    background: url("../icons/icon-right.png") no-repeat;
    cursor: pointer;
}
body{
    font-family: Arial;
    width: 100%;
}
#image{
    background-color: lightblue;
    width: 95%;
}

.form-row {
    padding: 20px;
    border-top: #8aacb7 1px solid;
}

.button-row {
    padding: 10px 20px;
    border-top: #8aacb7 1px solid;
}

.button-row1 {
    padding: 10px 0px;
}

input#submit,input#slideshow {
    padding: 10px 40px;
    background: #586e75;
    border: #485c61 1px solid;
    color: #FFF;
    border-radius: 2px;
    cursor: pointer;
}

.file-input {
    background: #FFF;
    padding: 5px;
    margin-top: 5px;
    border-radius: 2px;
    border: #8aacb7 1px solid;
}

#validation_error {
    color: #cc0000;
    margin-left: 15px;
}

I hope you get an idea about php slideshow.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Read Also:  How to Store and Retrieve Image from database in Php?

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  PHP Laravel 5.7 Image Upload with Validation Tutorial Example
  2. Read Also:  Automatic Image slideshow Using PHP
  3. Read Also:  Codeigniter recaptcha form validation - Google recaptcha
  4. Read Also:  AngularJS HTTP AJAX Example Tutorial From Scratch
  5. Read Also:  Multiple image slider in html source code
  6. Read Also:  Vuejs Login And SignUp Modal Template
  7. Read Also:  how to show video in html?
  8. Read Also:  Sweet Alert confirmation before delete in Laravel 5.7
  9. Read Also:  Simple Vue js CRUD Example Tutorial From Scratch
  10. Read Also:  Multiselect dropdown with checkboxes demo code in php
CLOSEX