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.