sagar_24 Posted September 20, 2017 Share Posted September 20, 2017 So, here i am trying to display the uploaded images to my server by using slideshow script. However, for instance file '3.jpg' is not present in my file i want to skip it instead displaying a blank page. I've tried visiblity:hidden instead of none but no luck! Please shed some light about what the problem is..would appreciate it! Here is my code..Please forgive me for the messy code I'm learning. <!DOCTYPE html> <html> <title>LOL</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet"> <style> .mySlides {display:none;} div { top:0; left:0; width:100vw; height:1000vh; background:black; display:table-cell; vertical-align:middle; text-align:center; } img { max-width:100%; height:auto; max-height:100%; margin: 0 auto; } </style> <body> <meta http-equiv="expires" content="10" /> <div class="w3-content w3-section" style="position:fixed; height: 100%; width: 100%;"> <img class="mySlides" src="uploads/1.JPG" align="middle"> <img class="mySlides" src="uploads/1.jpg" align="middle"> <img class="mySlides" src="uploads/1.png" align="middle"> <img class="mySlides" src="uploads/1.PNG" align="middle"> <img class="mySlides" src="uploads/2.JPG" align="middle"> <img class="mySlides" src="uploads/2.jpg" align="middle"> <img class="mySlides" src="uploads/2.png" align="middle"> <img class="mySlides" src="uploads/2.PNG" align="middle"> <img class="mySlides" src="uploads/3.JPG" align="middle"> <img class="mySlides" src="uploads/3.jpg" align="middle"> <img class="mySlides" src="uploads/3.png" align="middle"> <img class="mySlides" src="uploads/3.PNG" align="middle"> <img class="mySlides" src="uploads/4.JPG" align="middle"> <img class="mySlides" src="uploads/4.jpg" align="middle"> <img class="mySlides" src="uploads/4.png" align="middle"> <img class="mySlides" src="uploads/4.PNG" align="middle"> </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, 1000); // Change image every 2 seconds } </script> </body> </html> Note-I've used same file with different extensions just because i can't use && or || here if you have any alterations please mention it. Quote Link to comment https://forums.phpfreaks.com/topic/305058-blank-page-in-script-slide-show/ Share on other sites More sharing options...
ginerjm Posted September 20, 2017 Share Posted September 20, 2017 Why try to display something that doesn't exist? Why not modify your script to only build the tags for files that DO exist? Quote Link to comment https://forums.phpfreaks.com/topic/305058-blank-page-in-script-slide-show/#findComment-1551629 Share on other sites More sharing options...
cyberRobot Posted September 20, 2017 Share Posted September 20, 2017 (edited) I don't see any PHP code, should this topic be moved to the JavaScript forum? With that said, will the image tags always be hard coded? You could, for example, use PHP to prepare the HTML image tags. PHP would let you verify that an image exists before outputting the tag. JavaScript, unfortunately, cannot determine whether or not an image exists on the server. You could look into storing the file names in a JavaScript array. Then use JavaScript to load the images and build the image tags for the ones it is able to load. Edited September 20, 2017 by cyberRobot Quote Link to comment https://forums.phpfreaks.com/topic/305058-blank-page-in-script-slide-show/#findComment-1551631 Share on other sites More sharing options...
sagar_24 Posted September 20, 2017 Author Share Posted September 20, 2017 Why try to display something that doesn't exist? Why not modify your script to only build the tags for files that DO exist? Could you give some example or link me to something? it's really important and i'm a noob thanks Quote Link to comment https://forums.phpfreaks.com/topic/305058-blank-page-in-script-slide-show/#findComment-1551641 Share on other sites More sharing options...
sagar_24 Posted September 20, 2017 Author Share Posted September 20, 2017 I don't see any PHP code, should this topic be moved to the JavaScript forum? With that said, will the image tags always be hard coded? You could, for example, use PHP to prepare the HTML image tags. PHP would let you verify that an image exists before outputting the tag. JavaScript, unfortunately, cannot determine whether or not an image exists on the server. You could look into storing the file names in a JavaScript array. Then use JavaScript to load the images and build the image tags for the ones it is able to load. Sorry My bad i'll take it down about the answer could you give me an example or link me to something please? thanks Quote Link to comment https://forums.phpfreaks.com/topic/305058-blank-page-in-script-slide-show/#findComment-1551642 Share on other sites More sharing options...
cyberRobot Posted September 20, 2017 Share Posted September 20, 2017 Sorry My bad i'll take it down No problem. The topic has been moved to the JavaScript forum. Quote Link to comment https://forums.phpfreaks.com/topic/305058-blank-page-in-script-slide-show/#findComment-1551644 Share on other sites More sharing options...
Gandalf64 Posted September 24, 2017 Share Posted September 24, 2017 (edited) It just so happens I developed a script that does just that, by that I mean takes images from a particular directory and made a very simple slideshow (actually it rotates). I recently took it down from my website, so I can't show it in action but here's a test script that I made. <style> /* essential styles: these make the slideshow work */ #slides { position: relative; height: 400px; padding: 0px; margin: 0px; list-style-type: none; } .slide { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; opacity: 0; z-index: 1; -webkit-transition: opacity 1s; -moz-transition: opacity 1s; -o-transition: opacity 1s; transition: opacity 1s; } .showing { opacity: 1; z-index: 2; } </style> <?php $supported_file = [ 'gif', 'jpg', 'jpeg', 'png' ]; $files = glob("assets/uploads/*.*"); echo '<ul id="slides">' . "\n"; for ($i = 0; $i < count($files); $i++) { $image = $files[$i]; // Just making it easier to understand that $files[$i] are the individual image in the loop: $ext = strtolower(pathinfo($image, PATHINFO_EXTENSION)); if (in_array($ext, $supported_file)) { /* * echo basename($image); ### Shows name of image to show full path use just $image: */ if ($i === 0) { echo '<li class="slide showing"><img src="' . htmlspecialchars($image) . '" alt="Slide Show Image"></li>' . "\n"; } else { echo '<li class="slide"><img src="' . htmlspecialchars($image) . '" alt="Slide Show Image"></li>' . "\n"; } } else { continue; } } echo "</ul>\n"; ?> <script> var slides = document.querySelectorAll('#slides .slide'); var currentSlide = 0; var slideInterval = setInterval(nextSlide, 3000); function nextSlide() { slides[currentSlide].className = 'slide'; currentSlide = (currentSlide + 1) % slides.length; slides[currentSlide].className = 'slide showing'; } </script> No Javascript Library needed (I been developing pure javascript lately). Edited September 24, 2017 by Gandalf64 Quote Link to comment https://forums.phpfreaks.com/topic/305058-blank-page-in-script-slide-show/#findComment-1551873 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.