Displaying Tiled Images

Description

Many developers want to create display multiple thumbnail images on a page, then allow the user to select one image to see it in a larger format on a second page. This tutorial describes the process of creating these pages.

 Thumbnail Display

  1. Select New > Alpha Anywhere Web Component > Grid > OK to display the Grid Builder.

  2. On the Component Type menu select "Columnar" in the Grid layout list.

  3. Display the Grid > Data Source menu.

  4. Select Alpha Anywhere .dbf Tables.

  5. Display the Grid > Query (DBF) menu.

  6. Select "flowers" in the Table name list.

  7. Display the Grid > Fields menu.

  8. Place the "Thumbnail" and "Id" fields on the grid.

  9. Select the "Thumbnail" field in the Selected list.

    • 1. Set the Display Settings > Control type value to "Image".

    • 2. Set the Image Properties > In-line style value to "border-width:0;".

    • 3. Set the Row Properties > Hide row value to "True".

  10. Select the "Id" field in the Selected list.

    • 1. Set the Display Settings > Control type value to "Link".

    • 2. Set the Link Properties > Display what in link value to "Image in another control".

    • 3. Set the Link Properties > Dynamic image control value to "{Thumbnail}".

    • 4. Set the Link Properties > Link address type value to "Computer from fields in the Grid".

    • 5. Set the Link Properties > Link address value to Picture.a5w?picture_filter=ID="{Id}". This opens the picture.a5w page with a filter expression that uses the value of the ID field.

  11. Display the Grid > Properties menu.

    • 1. Set the Layout Options > Style name value to "BlueMoon".

    • 2. Set the Layout Options > Repeating columns value to 7.

    • 3. Set the Layout Options > Rows of data value to 35.

    • 4. Set the Layout Options > Show title value to "False".

    • 5. Set the Column Titles and Sorting Options > Column titles position value to "No Titles".

    • 6. Click the '...' button in Record Navigator > Record navigator layout, select , and click OK.

    • 7. Set the Customization > 'Total records' message position to "No Message".

  12. Save the component as "Tiled_Images".

  13. Create a page named "Tiled_Images".

  14. Create a page named "Tiled_Images".

    • 1. Place the "Tiled_Images" component on the page.

    • 2. Place the following text above the component: "Click the thumbnail image to view a larger version of a picture.".

    • 3. Select the text, set the font to "Verdana", and the point size to "3 (12pt)".

    • 4. Select both the text and grid component and center them on the page.

    • 5. Save the page.

 Picture Display

  1. Select New > Alpha Anywhere Web Component > Grid > OK to display the Grid Builder.

  2. Display the Grid > Data Source menu.

  3. Select Alpha Anywhere .dbf Tables.

  4. Display the Grid > Query (DBF) menu.

  5. Select "flowers" in the Table name list.

  6. Display the Grid > Fields menu.

  7. Place the "Picture" field on the grid.

  8. Display the Grid > Properties menu.

    • 1. Set the Layout Options > Style name value to "BlueMoon".

    • 2. Set the Layout Options > Rows of data value to 1.

    • 3. Set the Layout Options > Show title value to "False".

    • 4. Set the Column Titles and Sorting Options > Column titles position value to "No Titles".

    • 5. Set the Record Navigator > Record navigator position to "No Navigation Bar".

    • 6. Set the Customization > 'Total records' message position to "No Message".

  9. Save the component as "Picture".

  10. Create a page named "Picture".

    • 1. Place the "Picture" component on the page.

    • 2. Select the grid component and center it.

    • 3. Switch to the Source tab. Place the following code just before the </body></html>.

      <div align=center>
      <form method="post" action="tiled_images.a5w" name="foo">
      <button id=button_adv1 name=button_adv1><strong><font face=Verdana size=3>Return</font></strong></button>
      </form>
      </div>
    • 4. Save the page.

 Running the Demo

  1. Display A5W Pages tab of the Web Projects Control Panel.

  2. Right click "Picture" and select Publish (Local Webroot).

  3. Right click "Tiled_Images" and select Publish (Local Webroot) and open.

  4. Click on any of the thumbnail images.

See Also