0

I want to create a simple website that will scroll through all the pictures in a given folder.

I have a simple jQuery script that will display images one at a time on the page, fading between the pictures. It works with hardcoded images currently.

Ideally I would like to write a script that will dynamically create tags for all the images in a specific folder (say /images). My script is shown below, however it doesn't pull any images.

Can anyone see what's wrong here? Thanks!

<html><head>
<style>
.gallery { position:relative; height:500px; width:800px; }
.gallery img { position:absolute; height:500px; width:800px; }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>
<body>

<script>
//load images and fade them in and out - this works
$(function(){
    $('.gallery img:gt(0)').hide();
    setInterval(function(){
      $('.gallery :first-child').fadeOut()
         .next('img').fadeIn()
         .end().appendTo('.gallery');}, 
      3000);
});

//create an imageList id with a list of all images in a folder - this does not work
$('<img>')
    .attr('src', '/images')
    .appendTo('#imageList')

</script>


<div class="gallery" id="imageList"></div>

</body>
</html>
ethane
  • 319
  • 3
  • 7
  • 13
  • It's not possible to do this like this, you need external service that would return list of all images in given directory- nodejs would do – Adam Kosmala Aug 29 '19 at 15:21
  • Have I missed something? Where/how do you generate a list of all the images in that folder? Client-side JS cannot possibly know what they are. – MikeB Aug 29 '19 at 15:22

0 Answers0