Jump to content

Blank Page in Script slide show


sagar_24

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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). 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.