Jump to content
#StayAtHome ×
sagar_24

Blank Page in Script slide show

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.

Share this post


Link to post
Share on other sites

Why try to display something that doesn't exist?  Why not modify your script to only build the tags for files that DO exist?

Share this post


Link to post
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.

Edited by cyberRobot

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
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). 

Edited by Gandalf64

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • 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.