Why does my javascript code rotate big images (>1MB)? - javascript

Hello and thanks in advance!
I created with some help the following code to display images out of a folder in kind of a slideshow. every minute the side will reload itself if nobody did something. this is to display new images while the slideshow is running. if the uploaded image is small (<1MB) the slideshow displays everything fine. But do I upload or copy larger images the slideshow flips or rotates the image sometime 180' or 90'.
here is the code:
<?php
$dir_path = "uploads/prints/";
$extensions_array = array('jpg','png','jpeg');
if(is_dir($dir_path))
{
$files = array_slice(scandir($dir_path), 2);
foreach ($files as $file)
{
$ext = pathinfo($file);
$ext = $ext['extension'];
if(in_array($ext, $extensions_array))
$images[] = '<img class="mySlides" src="'. $dir_path . $file.'" style="max-width:90%";>';
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>automatic slideshow</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none;}
</style>
</head>
<body background="/back2.png">
<!--<h2 class="w3-center">Automatic Slideshow</h2> -->
<div class="w3-content w3-section" style="width:500px">
<?php echo implode ($images); ?>
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 4000); // Change image every 4 seconds
}
//refresh page
var timeout = setTimeout("location.reload(true);",60000);
function resetTimeout() {
clearTimeout(timeout);
timeout = setTimeout("location.reload(true);",0000);
}
</script>
</body>
Does anyone has an idea?

Related

create a carousel than can go backwards and forwards on button click

Im selecting all image's with a query and then displaying them 2 at a time with
"style.display = 'inline'; " and hide the privious image with style.display = 'none'.
When i get to the last picture, i want to set the index back to 0, so you can keep on going through pictures in a carousel.
The same for the back button, but there is something wrong with how the if statement is doing its arithmetic and im lost in the code as it is right now.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<title>Document</title>
<style>
img {
display:none;
width:25%;
}
</style>
</head>
<body>
<div>
<img class="slidepic" src="https://picsum.photos/200/300">
<img class="slidepic" src="https://picsum.photos/200/290">
<img class="slidepic" src="https://picsum.photos/200/280">
<img class="slidepic" src="https://picsum.photos/200/270">
<img class="slidepic" src="https://picsum.photos/200/260">
<img class="slidepic" src="https://picsum.photos/200/250">
</div>
<button class="btnback" id=”btnback”>Back</button>
<button class="btnnext" id=”next”>Next</button>
<script>
const images = document.querySelectorAll("img");
let i = 0;
document.querySelector('.btnnext').addEventListener('click', ()=>{
if(i == 0) {
images[i].style.display = 'inline';
images[i+1].style.display = 'inline';
} else if(i == images.length ) {
images[i + 1].style.display = 'none';
images[0].style.display = 'inline';
i = 0;
} else {
images[i - 1].style.display = 'none';
images[i].style.display = 'inline';
images[i+1].style.display = 'inline';
}
i++;
});
document.querySelector('.btnback').addEventListener('click', ()=>{
if(i > 0) {
images[i].style.display = 'inline';
images[i-1].style.display = 'inline';
} else if(i == 0 ) {
i = images.length ;
images[i + -1].style.display = 'none';
images[i].style.display = 'inline';
} else {
images[i+1].style.display = 'none';
images[i].style.display = 'inline';
images[i-1].style.display = 'inline';
}
i++;
});
</script>
</body>
</html>

How can I define my javascript to display the images I found in my php script

first of all I am new in this and I thank all the people here I learned of.
My problem:
I created a setting where you can upload pictures in the folder "test"in two different ways.
I want to display the picutes in an automatic slideshow which takes the pictures out of the folder. (Imag 1.jpg, 2.jpg, 3.jpg are in the folder TEST.)
my PHP CODE:
<?php
$dir_path = "test/";
$extensions_array = array('jpg','png','jpeg');
$phpArray = array();
$dateien=scandir($dir_path);
$anzahl=count($dateien);
//echo "Anzahl $anzahl";
if(is_dir($dir_path))
{
$files = scandir($dir_path);
for($i = 0; $i < count($files); $i++)
{
if($files[$i] !='.' && $files[$i] !='..')
{
$file = pathinfo($files[$i]);
$extension = $file['extension'];
while(in_array($extension, $extensions_array))
{
// show image
echo "<img src='$dir_path$files[$i]' style='width:500px;height:500px;'><br>";
$phpArray []= array($dir_path, $files[$i]);
$filename[]= array($files[$i]);
//echo $i;
$i++;
//echo "Anzahl $anzahl";
if ($i>$anzahl)
{break;}
}
}
}
}
$dir_path2 = "uplaods/";
$dateien2=scandir($dir_path);
$anzahl2=count($dateien2);
if ($anzahl2>$anzahl)
?>
with the php code I get the folder path and the file name and I could display the pictures seperatly, but not in an slideshow:
MY HTML/JAVASCRIPT CODE
<!DOCTYPE html>
<html>
<title>automatic slideshow</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none;}
</style>
<body>
<h2 class="w3-center">Automatic Slideshow</h2>
<div class="w3-content w3-section" style="max-width:500px">
<img class="mySlides" src="1.jpg" style="width:100%" >
<img class="mySlides" src="2.jpg" style="width:100%">
<img class="mySlides" src="3.jpg"style="width:100%">
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides"); / HERE I NEED HELP
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
</script>
</body>
</html>
the slideshow code works for the images I defined in the div, but I want to have it out of the folder. I was able to get the filename and the folder path from php to javascript but I was not able to tell javascript to display the picutes out of the folder.
is it even possible?
PHP:
<?php
$dir_path = "test/";
//$dir_path2 = "uplaods/";
$extensions_array = array('jpg','png','jpeg');
if(is_dir($dir_path))
{
$files = array_slice(scandir($dir_path), 2);
foreach ($files as $file)
{
$ext = pathinfo($file);
$ext = $ext['extension'];
if(in_array($ext, $extensions_array))
$images[] = '<img class="mySlides" src="'. $dir_path . $file .'" style="width:500px;height:500px;">';
}
}
?>
HTML (within PHP file):
<!DOCTYPE html>
<html>
<head>
<title>automatic slideshow</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none;}
</style>
</head>
<body>
<h2 class="w3-center">Automatic Slideshow</h2>
<div class="w3-content w3-section" style="max-width:500px">
<?php echo implode ("<br />", $images); ?>
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides"); //HERE I NEED HELP
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
</script>
</body>
</html>
There are several ways you can go about this, but JavaScript is unable to iterate through files in a directory on a file system (unless you are using server-side JavaScript). One option is to have your PHP script output the URIs (relative or absolute) of the images to a JavaScript array. Another option is to have the PHP script output JavaScript in the HTML head that creates image objects utilizing the URIs (this is good for preloading the images) and place the objects in a JavaScript array. A more complex solution would be for your PHP script to return a JSON array of the image URIs which you could retrieve from your JavaScript with an AJAX GET request.

how to show Image slider for long time

I am trying to show the image slider for long time where I already used timeout for every image to display.
But now I want to image slider in this case also:
1.The system should not go the sleep mode if we are not using the system, it
should show the image slider until I close the browser.
2.The system should not go to the screensaver mode, it should show the image
slider until I close the browser.
code:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.mySlides
{
display:none;
}
</style>
<body>
<h2 class="w3-center"></h2>
<div class="w3-content w3-section" style=""width='962px';height='565px';frameborder='0'"">
<img class="mySlides" src="Chrysanthemum.jpg" style="width='100%">
<img class="mySlides" src="Desert.jpg" style="width:100%">
<img class="mySlides" src="Hydrangeas.jpg" style="width:100%">
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++)
{
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length)
{
myIndex = 1;
}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2000);
}
</script>
</body>
</html>

Slideshow javascript play/pause button

I'm making a slideshow in Javascript with a play/pause button. When I press one time on the button, the slideshow starts to play. When I press a second time, the slideshow has to stop. I only have no idea how to put this function in one button.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Oefening 19.7</title>
<link href="stijl_Oefening19_6.css" rel="stylesheet" />
<script>
var i = 0;
var foto = new Array(3);
var timer;
foto[0] = "images/slideshow/slideshow1.png";
foto[1] = "images/slideshow/slideshow2.png";
foto[2] = "images/slideshow/slideshow3.png";
foto[3] = "images/slideshow/slideshow4.png";
function slide() {
document.getElementById("slideshow").src = foto[i];
if (i < foto.length - 1) i++;
else i = 0;
timer = setTimeout("slide()", 3000);
}
</script>
</head>
<body>
<div id="portfolio">
<img src="images/slideshow/slideshow1.png" id="slideshow" alt="slideshow" />
</div>
<div id="button">
<a href="#" id="startcycle" onclick="slide()">
<img id="btnCycle" src="images/slideshow/cyclebutton.png" />
</a>
</div>
</body>
</html>
Use setInterval() instead. And separate the switch function and the slide function.
function slide() {
document.getElementById("slideshow").src = foto[i];
i = (i + 1)%foto.length;
}
function setTimer(){
if (timer) {
// stop
clearInterval( timer );
timer=null;
}
else {
timer = setInterval("slide()",1000);
}
}
Let the button call setTimer().

RunningPuppy Animated Gif

I am stuck on my homework project. I am supposed to create a JavaScript program that shows an animated puppy running. I must use caching to start the animation as soon as the images finish loading and 1 of the following: getElementsByName(), getElementById(), or getElementsByTagName(). Here's what I have so far but when I run it in Firefox all I see is a flashing box that says "image of a puppy"
<!DOCTYPE HTML>
<html>
<head>
<title>Running Puppy</title>
<meta http-equiv="content-type" content="text/html;
charset=utf-8" />
<script type="text/javascript">
/* <![CDATA[ */
var puppy = new Array(6);
var curPuppy = 0
for (var imagesLoaded=0; imagesLoaded < 6;
++imagesLoaded) {
puppy[imagesLoaded] = new Image();
puppy[imagesLoaded].src
= "images/puppy" + imagesLoaded + ".gif";
}
function run(){
if (curPuppy == 5)
curPuppy = 0;
else
++curPuppy;
document.getElementById("puppyImage").src = puppy[curPuppy].src;
}
/*]]> */
</script>
</head>
<body onload="setInterval('run()', 150)">
<img src="images/puppy0.gif" id="puppyImage" width="263" height="175" alt="Image of a puppy." />
<script type="text/javascript">
/* <![CDATA[ */
document.write("<h1 id='mainHeading'></h1>");
document.getElementById("mainHeading").innerHTML = document.getElementsByTagName("title")[0].innerHTML;
/*]]> */
</script>
</body>
</html>

Categories

Resources