Display thumbnails with Horizontal Looper

How do you display thumbnail images in a table on a web page

You created those thumbnails, let's display the thumbnails in a table with the Horizontal Looper extension from Tom Muck.

The Horizontal Looper got it's name because it repeats your data from your database horizontally as well as vertically.
It acts in a similar fashion the standard Repeat Region that is supplied with Dreamweaver MX, but instead of "number of records" you are prompted for Rows and Columns.

Let's take a look at how it works. You can download the Horizontal Looper extension from www.dwteam.com.

How to do it

1. Open page

   Open your asp file that will display the thumbnail image.

2. Edit the area where you want to show the thumbnail

   This is going to be a little tricky for the first time, but you'll get the hang of it (just like me).
   
   1. Click on Insert Image.
   2. Select Data Source.
   3. Open up the Recordset by clicking the + sign.
   4. Select the appropriate field that you saved the images into.
   
   
   
   5. Select the DMXzone - Thumbnail option in Format.
   
   
   
   6. Important! This next step is ONLY necessary if you DID NOT save the image with the full path in the database!
   In URL section enter the name of the upload folder that your images are. Right at the beginning.
   
   7. Important! If you changed the suffix from the default to another option, make sure to change it here too!
   
   

3.  Click OK
   
4.  Apply Horizontal Looper

Select the image and open the Server Behaviors Panel.



Select the Horizontal Looper 2 extension. This will open the Horizontal Looper 2 interface.



You have the choice between Rows and Columns or All Records. If you choose All Records, you have to choose how many columns to use to display the data. I choose the All Records option with 2 Columns.

Click ok.

5. These are the results

    This is an example of what it will look like on your page. Very nice!
   
   
   
   All of the content has expanded into a table. You can edit the table just like a regular table with borders, cell padding, cell spacing, etc. I chose to leave the table borderless.

6.  Save the file in your site

    You will need to save the file in your site. Check it out!