Home :

Embedding the Web Gallery Index Page

The Adobe Bridge Output Module creates a Flash movie (a .swf file) that loads the images as a slideshow. The HTML code and JavaScript created by Bridge make the movie fill the whole page, so there's no way to link back to other parts of your site. I originally suggested editing the code in index.html, but I'm indebted to Petar Subotic for proposing a much simpler solution—use an <iframe>.

An <iframe> (or inline frame) creates a window inside a web page into which you can load another document. It has often been overlooked, initially because of lack of support in all browsers, and more recently because frames have very much gone out of fashion. However, support for the <iframe> is no longer a problem. It works in all major browsers in current use. Unlike frames, it's also included in the proposed HTML5 specification, so you can use it with confidence. Using an <iframe> has the added advantage that you can load multiple galleries into the same page.

If, for any reason, you can't or don't want to use an <iframe>, I have left intact my original instructions for editing the web gallery page created by Bridge CS4.

Using an <iframe>

What else you put in the same page as the gallery is up to you. However, in most cases, you'll probably want something similar to my starter page, which contains only the site navigation (an unordered list with the ID nav), and a footer. The main heading is moved off screen with absolute positioning to make room for the page's background image that incorporates the site branding and name. The CSS puts 85px of padding-top on the <body> to position the content below the site name.

In Dreamweaver, create a basic page for your web gallery, and position your cursor at the point inside the page where you want the gallery to be located.
Although you can insert an <iframe> directly at this point, I have found it better to wrap the <iframe> in a <div>, because this makes it easier to control the position of the <iframe> with CSS.

Click the Insert Div Tag button in the Common or Layout category of the Insert panel/bar. Alternatively, select Insert > Layout Objects > Div Tag from the main menu. This opens the Insert Div Tag dialog box.
If your cursor was in the right position, you can leave the value of the Insert pop-up menu at "At insertion point". However, if you have given IDs to other elements on the page, you can make doubly sure that Dreamweaver inserts the <div> in the right place by choosing one of the other options from the Insert pop-up menu. I wanted to make sure the <div> goes after the nav unordered list, so I selected "After tag" and <ul id="nav"> from the pop-up menu alongside.
Type the name for the <div> that will hold the gallery in the ID field (I used webgallery), and click the New CSS Rule button, as shown here:
Note: An ID cannot contain any spaces or punctuation, apart from the hyphen or underscore. Nor should it begin with a number or a hyphen immediately followed by a number. An ID should never be used more than once on the same page.
In the New CSS Rule dialog box, Dreamweaver automatically selects the correct values for Selector Type and Selector Name. The only thing you need to check is Rule Definition. Make sure this points to your style sheet. However, if you want to embed the style rules in the head of the current page, select "(This document only)".

Click OK to open the dialog box where you define the style rules for the <div>.
The Bridge gallery tries to fill the full screen, so the <div> needs to set a width and height to constrain it. Select the Box category from the list on the left side of the panel, and enter a width and height. To keep the correct proportions, the height should be 75% of the width.

In my example file, I used 700px for the width and 525px for the height. I also wanted the <div> to have a left margin of 200px to make room for the navigation menu.
Enter your own values, and click OK to close the CSS Rule Definition dialog box.
Click OK to close the Insert Div Tag dialog box. You should now see a <div> inside your page with some placeholder text, as shown here:
Press Delete to remove the placeholder text, and click the IFrame button in the Layout category of the Insert panel/bar (or select Insert > HTML > Frames > IFrame).
Dreamweaver doesn't have a dialog box to create an <iframe>, so it opens Split view with the insertion point between a pair of <iframe> tags like this:
<div id="webgallery"><iframe></iframe></div>
All the details for the <iframe> go in the opening tag. So, press your left arrow key once to move inside the tag, and press the Space bar to bring up code hints for the valid attributes. Type sr. The code hint menu selects the src attribute.
Press Enter/Return to select the src attribute. Dreamweaver inserts src="", and places the cursor between the quotes with a new code hint like this:
Click Browse, and use the file selector to navigate to the index.html page created by the Bridge web gallery.
Click OK (or Choose on a Mac) to select the gallery page.
Continue using code hints to add the following attributes to the opening <iframe> tag:
- width: This should be the same width as for the webgallery <div>.
- height: This should be the same height as for the webgallery <div>.
- frameborder: By default, <iframes> have a border. If you want to remove the border, set this to 0.
- name: Give the <iframe> a unique name. This will enable you to load different galleries into the same <iframe>.
By the time you have finished, the code for the <div> and <iframe> should look similar to this:
<div id="webgallery"> <iframe src="/tutorials/gallery/kyoto/index.html" width="700" height="525" frameborder="0" name="gallery"></iframe> </div>
Note: Do not add px when defining the width and height attributes with pixels. Use the numbers on their own.
Save your page, and load it into a browser. The Bridge web gallery page should load into the <iframe> like this finished example.

When you have finished, don't forget to upload the entire contents of the folder where the Adobe Output Module created the gallery.

Loading other galleries into the same page

If you give the <iframe> a name attribute, you can use this to load other Bridge web galleries into the same page. Just create a link in the page, and point it to the index.html page of another gallery. Then type the name of the <iframe> into the Target field in the Property inspector like this:

Setting the target value

You can see an example of two Bridge web galleries being loaded into the same page. If you examine the HTML code in the navigation menu, you'll see the links for Kyoto and Tokyo point directly to the index.html of each gallery. What makes them load into the <iframe> is the target attribute.

<ul> <li><a href="/tutorials/gallery/kyoto/index.html" target="gallery">Kyoto</a></li> <li><a href="/tutorials/gallery/tokyo/index.html" target="gallery">Tokyo</a></li> </ul>

Note: The target attribute is not valid with a Strict DOCTYPE. Use HTML or XHTML Transitional.

If, for any reason, you don't want to use an <iframe>, the following page describes how to edit the HTML and JavaScript in the index.html page created by Bridge.

Back | Next