Question

I have a problem I could need some help with. I am working on a personal webpage containing large amounts of images and videos. The markup is strictly HTML, and it is styled using CSS.
I also have one or two Javascripts running. I finished my first page the other day, and just realized that I have to manually add around 20-30 images/videos to each page(I am hoping to build around 10-15 pages), and thought that perhaps there is some script available that can simplify my task to upload all my media content. Keep in mind that all the pages will look the same, so a script would really make things easier.

Here is what I had in mind. I thought I could create two folders, add all the images and videos to each of them.

Then use Javascript to iterate through all of the content, adding them into my already built HTML page.

Is this possible? If so, please notify my how I can obtain this solution.

I dont know javascript well enough to code myself so I would appreciate complete solutions.

Here is the HTML

<ul>
 <li><iframe width="420" height="345"src=""
</iframe></li>
</ul>

<ul>
<li><a href="#"><img src="" width=100 height=100/></a></li>
</ul>

Answer 1

A javascript only solution would be to use naming conventions and let javascript assume that there should be an item with a specific name.

One example would be:

Rename your files:

PageName_1.jpg, PageName_2.jpg, PageName_3.jpg, PageName_1.flv, ...

The downside is that you’ll have to define parameters about what types (extensions) of files to look for as well as how many of each type to look for on each page.

var files = {'jpg':3, 'flv':1, ...};
var pageName = "PageName";

Once you have that set up, you can iterate over the object:

for (var ext in files){
    for (var i = 0; i < files[ext]; i++){
        var src = "images/" + pageName + "_" + (i+1) + "." + ext;
        ...
    }
}

If you want more than just images, you’ll have to create some logic to determine what type of element to generate. The best way to go about this is generally a factory method:

function generateElement(src, ext){
    switch(ext){
        case 'jpg':
            ...
        break;
        case 'flv':
            ...
        break;
    }
}

Then again, you could just make your life easier and use server-side functionality.