Creating a Dynamic Table-Based Gallery Using ASP and VBScript

By Stealth_Snake | ASP | Intermediate

This tutorial will teach you how to create a gallery using VBScript which can dynamically expand by changing the number of images it contains without having to change the number of rows and cells in the cell itself. To accomplish this we will be using the FOR...NEXT loop, the MOD operator, and the IF conditional. This tutorial will require you to have to some HTML, ASP and VBScript knowledge.

Creating the Base Table

Start off by creating a simple table within an HTML page.

Using The "For...Next" loop

We will use the VBScript For...Next loop within the <table></table> tag above. The loop has to be placed before the <tr> tag and must be closed after the </tr>. The loop will repeat the code segment to create multiple rows in any number we chose. We left the number as a variable called Y for this example.

X in the upper example is the loop counter that starts from zero and ends at the number Y. You can change Y to whatever number you desire.

MOD and If...Then Statement

Our code above lets us create a Y number of rows with one cell only in each of these rows. We will now modify it to create mutliple cells in a row, to do this we will use the math operator MOD along with the conditional tool If...Then to determine where to place additional <tr></tr> tags.

Where X is again the same loop counter we used previously and N is the number of cells you would like to have in each row.

Adding the Images in a Live Example

Below is a proper example in which a table is created to display 50 images with 10 images in each row. The first part of the trick here is to name the images in a two digit sequence starting from zero: (00.jpg, 01.jpg, 02.jpg, 03.jpg, 04.jpg, ...). In our example below all the images were saved in JPEG format and are located in the same folder. We are going to use the response.write(x) statement to write the value of X as a part of the image name. The value of X increases each time the loop is gone through.

This concludes my tip, hope you found it helpful. Feel free to post at the Oman3D Forum if you need any more help.

- End of Tutorial