Very Simple Code to Create Photo Slideshow

Make a Slide Show and tell your story! Learn how easy it is to make a dynamic slide show with simple sample code. It is fast and easy! To create a very basic image slideshow is very simple. You can use your own pictures, photos and bellow javascript slideshow code as a sample to create image slideshow for websites easily.

Things you will need to do before hand:

1. Create a html document “sample.html”, a directory “images” under the same folder;

2. Copy or move your image files to the “images” directory.

Javascript slideshow code

Two steps to create basic photo slideshow

1.  Copy the sample slideshow code into the HEAD of your HTML document “sample.html”

—code section 1-javascript slideshow code—

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
NewImg = new Array (
"images/01.jpg",
"images/02.jpg",
"images/03.jpg"
);
var ImgNum = 0;
var ImgLength = NewImg.length - 1;
//Time delay between Slides in milliseconds
var delay = 3000;
var lock = false;
var run;
function chgImg(direction) {
if (document.images) {
ImgNum = ImgNum + direction;
if (ImgNum > ImgLength) {
ImgNum = 0;
}
if (ImgNum < 0) {
ImgNum = ImgLength;
}
document.slideshow.src = NewImg[ImgNum];
   }
}
function auto() {
if (lock == true) {
lock = false;
window.clearInterval(run);
}
else if (lock == false) {
lock = true;
run = setInterval("chgImg(1)", delay);
  }
}
//  End -->
</script>

—End of javascript slideshow code -section 1—

2.  Add the last sample slideshow code into the BODY of your HTML document

—Code section 2-javascript slideshow code—-

<img src="images/01.jpg" name="slideshow">
<table>
<tr>
<td align="right"><a href="javascript:chgImg(-1)">Previous</a></td>
<td align="center"><a href="javascript:auto()">Auto/Stop</a></td>
<td align="left"><a href="javascript:chgImg(1)">Next</a></td>
</tr>
</table>

—End of javascript slideshow code- section 2—

Save the HTML page, you are done. View it in browser as bellow:

javascript image slideshow code

Now you know how easy it is to make a dynamic slide show with sample javascript slideshow code. No complex coding, no flash knowledge, no flash tools, just your pictures and photos. Now try to create a slide show and tell your story. It is easy and Fun.

Other simple methods to Create Photo Slideshows

  • If you like to make more fancy photo slideshows with Flash transition, try this Flash gallery and slideshow maker. It offers a lot of templates and dynamic transition effects.
  • jQuery slideshows or sliders are very popular nowadays. They are lightweight, fast, compatible with mobile phones. With a jQuery slideshow template, you can make your own dynamic galleries without any coding knowledge. Here are some free jQuery slider templates you can download.
Very Simple Code to Create Photo Slideshow
0 votes, 0.00 avg. rating (0% score)

You may also like...

22 Responses

  1. mmts says:

    Thanks for the source, I will use it.

  2. Bob says:

    Your welcome!
    Thanks for stopping by.

  3. vforme says:

    Hi! Where do I keep the image files?

  4. bob says:

    Hi,
    Can you please try to refresh the slideshow example code post again?
    There are 2 screen shots above, the first image shows where to put the photo slides.
    My blog had a glitch that prevented the images from showing up. Sorry for that.
    Thanks.

  5. Mark says:

    Thank you finally i found a code that work and i understood

  6. Adetunji says:

    Thanks for this great publication
    @bob, try to check the names of your images, should be 01,02,03.jpg. Otherwise, u hard-code the names in sample.html

  7. Kevin says:

    Hi Bob.

    I have just tried this tutorial on a test page / site and it works really well.! Thank you so much for posting it on your blog.

    I would love to be able to make a few minor changes to the slideshow and wondered if you would be willing to please tell me how I’m able to make those changes…

    1. Ideally I would like to change the text colour in the table (Prev / Auto / Stop / Next). Can a CSS control this? If not, then what is the best way?

    2. I would like the slideshow to start playing automatically as soon as the slideshow page is loaded? Is there any way of doing this?

    I hope you are not too busy to be able to consider a reply.

    Many thanks.

  8. bob says:

    Hi Kevin,
    thanks for stopping by.
    1. to chnage the text colour in the table, you can just use the tag span along with style,
    you can download this one from http://www.szcchina.com/blog/uploads/new-slideshow.zip
    (it is password protected, the password is your email address on …ff@mac.com).
    just make sure to change the HTML color code to your needs.
    FYI, you can find out these code online from http://html-color-codes.info/
    2. For fancy play control, you may consider Flash.
    You can download this sample from http://www.szcchina.com/blog/uploads/flash.zip (it is password protected, the password is your email address on …ff@mac.com). To replace your own images, or add new images, You can customize the XML file with a text editor.

  9. bern says:

    This is really great! thank you so much,

    is it possible to make the images transition randomly?

  10. somor says:

    how to make automatic slide of the images?

  11. HTML202 says:

    Hi is there any way that I can set the size of the images so that it dosnt re-size depending on the images?

  12. Dreamlearner2012 says:

    Great source! thanks

  13. Ryan says:

    sorry it cant be work. when i click next its not work also previous and Auto/Stop..

  14. Bayan says:

    hello,
    thank you for this code, but i’m trying to put two different Slide Show of your code in the same page, but it didn’t work!
    on the other hand, if I put one Slide Show in the page only, the code will run successfully!!
    can you help me with this plz?

  15. phillip says:

    hve tried many deference code,, final this one work

  16. Majid Shahmoradi says:

    Thank you very muchhhhhhhhhhhhhhh it’s great code

  17. Angry Bird says:

    Thank you very much…… After long time this code actually work……..

  18. Shelia says:

    Thank you, I’ve just been searching for the slideshow code for a while and yours is the best I have discovered so far.

  1. January 6, 2012

    […] tools to make photo slideshows. For instance, you can make a photo slideshow using javascript, see Simple Code to Create Photo Slideshows, you can also use Adobe Dreamweaver or Flash to make photo […]

  2. October 11, 2012

    […] Eftersom Javascript är något jag inte har arbetat så mycket med tidigare, valde jag att söka upp lite olika lösningar på en sorts bildspelsvisning som jag ville använda mig av för att visa bilderna med hjälp av Javascript. Efter en del letande hittade jag en enkel, men bra lösning för min bildvisning. Lösningen kan hittas på följande länk, som jag även har länkat till i sidfoten på webbplatsen för laboration 3: http://www.szcchina.com/blog/2011/01/photo-slideshow-code.html. […]

  3. June 23, 2014

    […] to change domain name serversfor your domain, steps to backup your websites, etc. If you want to build a image slideshow with JS code, you should contact your web […]

  4. September 13, 2014

    […] Create a simple Javascript image slideshow using sample code; Make a simple jQuery slideshow using a template; Create photo slideshow movies with DVD photo slideshow builder; Build flash photo slideshow with flash gallery maker; […]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>