Jump to content

need help loading images in succession using html


securobo2
 Share

Recommended Posts

OK, I have a directory called images with 10 pictures (pic1.png to pic10.png).I have a basic <img /> tag that centers the first image on the screen.I would like to add 2 buttons (previous and next). Then I would like each button to successively go through the directory, displaying the images.Can someone please help me do this.One important note, which is more of a question. If I have to use a list of image names, which I assume I do, then I would like to keep the image names in a *.txt file in the images directory, so I don't have to keep updating the html. Can html handle this? and in as little code as possible, how can I do this.I have a feeling someone might mention javascript. If so, could you please explain how. I don't need programming instructions, just some examples of how to do this.

Edited by securobo2
Link to comment
Share on other sites

actually, I would say the best option is to use PHP and javascript. since PHP is a server-side language and has native support for server browsing, you could have it search a given folder and return its contents. Better than a text file, because then you don't have to update the text file each time you add or remove an image to the folder. With PHP, you create an array out of the images retrieved and pass it to the client as JSON so Javascript can use it an array, and there you have the foundation for your slideshow.

Link to comment
Share on other sites

PHP alone will not do it that way. You need to pass the images from PHP to the user so that the user can act upon it on the client side. (i.e. hitting "next" and "previous" buttons).

Link to comment
Share on other sites

Here you will find some necessary java script:http://www.w3schools.com/js/js_animation.aspHere you will find some necessary php:http://www.w3schools.com/php/func_filesystem_glob.aspIf your new to them both, you will most likely need to read the beginnings of their respective tutorials in order to be able to implement the scripts properly. You can find those here:http://www.w3schools.com/js/default.asphttp://www.w3schools.com/php/default.aspCoding is fun, you should get into it.

Link to comment
Share on other sites

Yes, I already have code to read the contents of a directory into an array in php. Then in the same script I can load the first image. Like you said, I would need Javascript. That is what I would like someone to give me an example of. Here is what I have so far.

<html><head><title>test</title></head><body><?php$filename = glob("images/*.bmp");echo "<img src=\"$filename[0]\" />";?></body></html>

Link to comment
Share on other sites

How much javascript and html do you know? You will need to use buttons that activate functions that switch out the 'src' attribute of the img using HTML DOM.

function nextImg(){x = x + 1;document.getElementById('yourImgElementsId').src = YourImgArray[x];}

And I am not sure if your passing the array into the javascript right... although I don't know much PHP.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...