Tutorial #176

Displaying Images Horizontally In A Repeat Region

Level: Beginner
Requirements: DreamweaverMX, Access
Language: ASP, VBScript, SQL

Like it? Share it >

Introduction

This tutorial will demonstrate how to display images for a small gallery in a repeat region that will go across the screen from left to right as well as down, while scrolling through the data in a recordset.

Step 1: Creating the table.

We only need one small table for this tutorial. Create a new table as follows...

tblGallery

- ImageID (Primary Key, Autonumber)
- ImageURL (Text size=100)
- ThumbURL (Text)
- ImageName (Text)
- Active (Text size=3, default value=No)

For this tutorial, I have pre-entered some image data into the database. The idea behind this table is that it could be used for uploading new images for use on a gallery page. I have entered seven records into my example database as shown below.

I have created the thumbnail images at a width and height of 75 pixels. The idea being that when they are clicked, it will display the full size image from the images folder.

Step 2: Preparing our page for the images.

We will start by first creating our asp page, create a new page called show.asp and open it. We will start off by first creating our recordset as follows.

Fairly straight forward this; we will only display the images that we have set to show on the gallery via the Active field.

Now we will create a table with three columns that we will use to display our records, so simply create a table with 1 row and 3 columns.

Now click the <tr< tag in the status bar and apply a repeat region around the table for ALL RECORDS.

Step 3: Displaying the images.

Finally, we need to place our images in this table and apply a little bit of code that will move smoothly through the recordset. For this, we will need to use a small function.

Go into the code view of the page and scroll up to where the repeat region code is and enter the following...

Only enter the code within the red box! You MUST ensure that this code is below the main rsGallery recordset, this example will not work if the function is above it!

Now for a quick breakdown of the code: the function requires two parameters, vThumbURL and vImageURL, we will pass these through to it using the ThumbURL and ImageURL from the recordset. These hold the details of where our images and thumbnails reside.

Next, we check the current value of the recordset, specifically checking to see if it is at the end of the data held within it. If it is not, we return an image that is bound to a hyperlink and move to the next record, if it is at the end of the recordset, we return a blank space.

Simple as that really, we now just need to call the function from within the repeat region. So scroll down to the code where the table is at and enter the following.

We now simply call the function, passing through the two values it requires. We still have one problem though. Because we deal with scrolling through the recordset in the function, we now need to take that chore away from the repeat region.

At the bottom of the code shown above, you will notice the rsGallery.MoveNext() command, delete this from the code.

We can now save our page and run it, all being well we should end up with something like the following.

Clicking on the image will load the full image into the browser.

Images courtesy of www.sxc.hu

Page 1 | Page2 | Page3

Tutorial By	Submitted On	Views	Rating
Rob Boyle	09/03/2008	5199	Rate Tutorial