यहाँ एक बहुत ही बुनियादी स्लाइड शो-से-PHP अनुप्रयोग है। इसे आसानी से संशोधित या निर्मित किया जा सकता है। छवि के नाम (file_name ) डेटाबेस से खींचे जाते हैं, फिर छवि स्रोत मानों की जावास्क्रिप्ट सरणी में धकेल दिए जाते हैं। सुनिश्चित करें कि आप अपने से मेल खाने के लिए छवि निर्देशिका (जहां छवियां वास्तव में संग्रहीत हैं) निर्दिष्ट करें। स्लाइड शो ऑटोप्ले के रूप में एक साधारण छवि प्रीलोडर शामिल है।
<?php
$conn = new mysqli('localhost', 'root', 'password', 'images')
or trigger_error('Connection failed.', E_USER_NOTICE);
}
$conn->set_charset('utf8');
$paths = [];
$dir = "./pics"; // images directory (change to suit)
$stmt = $conn->prepare("SELECT `file_name` FROM `images`");
$stmt->execute();
$stmt->bind_result($file);
while ($stmt->fetch()){
$paths[] = $dir . "/" . $file;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Slideshow from PHP</title>
</head>
<body>
<div>
<!-- may set first image src in markup so initially visible -->
<img id="slide" src="./pics/image1.jpg" alt="slideshow">
</div>
<script>
var time = 5000, // time between images
i = 0, // index for changing images
images = [], // array of img src from PHP
preloads = [], // array of preloaded images
slide = document.getElementById("slide");
images = <?php echo json_encode($paths); ?>; // from PHP to Js array
var len = images.length;
function changeImg(){
slide.src = preloads[i].src;
if (++i > len-1){
i = 0;
}
setTimeout(changeImg, time);
}
function preload(){
for (var c=0; c<len; c++){
preloads[c] = new Image;
preloads[c].src = images[c];
}
}
window.addEventListener("load", function(){
preload();
setTimeout(changeImg, time);
});
</script>
</body>
</html>
