How to create an ascending sequence of text/numbers for html slideshow

Question

I would really appreciate it if anyone could show me how to automate a list/sequence/array for an html slideshow. I want to display "001.gif" through "1869.gif" Obviously it would save a lot of time if there is a way to automatically generate this:

<img src="001.gif" width="640" height="480" />
<img src="002.gif" width="640" height="480" />
<img src="003.gif" width="640" height="480" />

All the way up to "1869.gif"

<img src="1869.gif" width="640" height="480" />

Note: I have a slideshow script that I like. Works perfect. I got to "050.gif" and decided to ask if there is a way to do this without typing them one by one. Thanks.

It is not possible without `JavaScript`. Are you gonna use it? — Vedant Terkar, Jul 20 '14 at 18:09

score 3 · Accepted Answer · edited May 23 '17 at 11:57

3

$(document).ready(function(){

   function pad (str, max) {
     str = str.toString();
     return str.length < max ? pad("0" + str, max) : str;
   }

   for(i=1;i < 1870;i++){
     var $image = "<img src='"+pad(i, 3)+".gif' width='640' height='480'/>";
     $("body").append($image);
   }

});

Add this to the end of your page (in tags) or in a separate JS file. Change "body" to the location you want to add your images which will likely be the container you are using for your jQuery.cycle slideshow.

This will loop through each of the numbers between 1 and 1869 and add an image to the body tag for each. The "pad" function adds the zeroes before the number - if you need more info about that, I got the code from Adding extra zeros in front of a number using jQuery?

edited May 23 '17 at 11:57

Community

1
1

answered Jul 20 '14 at 18:24

Jay

930
7
11

An explanation, rather than plain code, is usually appreciated. – rvighne Jul 20 '14 at 18:35
I think it's important to note that loading 1869 .gifs like this at $(document).ready will likely make your page load very slowly. A much more efficient way to handle this would probably be to load each image right before the transition. – Nate Jul 20 '14 at 18:39
Without changing and/or adding javascript is there a function in a text editor or excel or something that would allow me to generate the lines I need? etc. – user3858413 Jul 20 '14 at 18:46
http://jsfiddle.net/aV2eP/ Click "run". Change loop numbers as needed. This simply prints out the text representation of the HTML code for the image. – Jay Jul 20 '14 at 18:55
If you like my answer. Could you please "accept" it? Thanks :) Happy coding. – Jay Jul 20 '14 at 19:03

Brunis · Answer 2 · 2014-07-21T10:49:38.773

Since you're not waiting for any other content to load you can create your content instantly.

First extend Number with a pad method:

Number.prototype.pad = function(size) {
      var s = String(this);
      if(typeof(size) !== "number"){size = 2;}

      while (s.length < size) {s = "0" + s;}
      return s;
    }

Then cache your output before adding it to the page, or you'll cause a redraw for each element you add.

var suffix = ".gif";
var container = document.createElement("div");
for(i=1;i < 1870;i++){
    var img = document.createElement("img");
    img.width = 640;
    img.height = 480;
    img.src = i.pad(3) + suffix;
    container.appendChild(img);
}
document.body.appendChild(container);

How to create an ascending sequence of text/numbers for html slideshow

2 Answers2