White Bar

Gallery Builder


 

Gallery Builder was originally going to be a tool on the tool bar. However, as we have been making changes to the Web Editor it became apparent that there were tools already in place that could make the same end result.

 

Here is a sample of the gallery that can be made using the Web Editor:

 

Display Image
White Gray Tan Black

 

 

To make a gallery follow these steps:

 

Step 1: Create a table and insert your images


  1. Shrink your pictures according to the "Images" and "MS Paint Walkthrough" tutorials.
  2. Upload your images (See: "Uploading Files" tutorial)
  3. Create a table with four columns and enough rows to hold all your images plus an extra row.
  4. Merge all the cells in the first row to create the display area and set the alignment to "Center"
  5. Set the widths of the cells in the second row to 100
  6. Insert your images into all the cells starting on the second row with a width of 100
  7. Insert the first image on the second row again into the display area with a width of 400

 

Step 2: Give the display image a name


  1. Click the "HTML" button and find your table (It will look something like this: < table border="0" style="margin: auto" >)
  2. Go down three lines to the < img > tag and add the following after width="400": name="display"

 

Step 3: Create JavaScript links that will change the display image to itself


  1. Select the first picture on the second row and click "Insert/Edit Link"
  2. Type " # " in the link field and select "Open in current window/frame (_self)"
  3. Click the Advanced tab and type " border: 0; " in the style field
  4. Click on the Events tab and copy/paste the following line into the "onclick" field: " return document.display.src = 'pictureNameHere.jpg' ; return false; "
  5. Insert the name of the picture you are linking where the code says " pictureNameHere.jpg "
  6. Insert link and repeat Step 3 with all the other pictures in the gallery

Step 4: Save and view


  1. Save your page periodically if you have lots of pictures
  2. When you have finished, save the page one last time and preview it to make sure things are working correctly.

Place Holder