Jump to content

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
https://forums.phpfreaks.com/topic/305058-blank-page-in-script-slide-show/
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

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

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
This thread is more than a year old. Please don't revive it unless you have something important to add.

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.