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

    

        
PHP Image Slideshow - www.pakainfo.com
        
            

                

                    
                
                

                    
                
            
        
        

            
            

                 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) {
                            ?>
                    

                    
                
                   
                

                    
                
      
                
          
        
        
        

        

              
            

                
            
        
    
    
    
    
    

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('
' + googlephotosNewText + '
')
        }
        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.