Editing the Web Gallery Index Page
The following instructions are necessary only if you don't want to use an <iframe> to embed a Bridge web gallery into an existing page. They involve editing several parts of the gallery's index.html page to resize the Flash movie and add page elements of your own.
This isn't difficult, but you do need to follow the instructions very carefully. If you make a mistake editing the JavaScript sections, nothing is likely to work.
-
Open
index.htmlin the folder where Bridge created your gallery (in my case, it'skyoto/index.html). -
Save a copy of the file as
index_orig.html. Close the copy. This is your backup in case you make any mistakes and need to start again. -
In Design view,
index.htmlshows only a message that will be displayed to anyone who visits the page with JavaScript disabled. I'll leave you to make any changes to that message. The main part of the work needs to be done in Code view, so switch to Code view or Split view, and examine the code at the top of the page. It looks like this:
There are two things to notice here:
-
There is no
DOCTYPEdeclaration. This is because the<style>block on lines 6–15 uses 100% height, which doesn't work with aDOCTYPE. You need to add aDOCTYPEto ensure that any CSS on your page is handled correctly. -
The value that was entered in the Gallery Name field in the Bridge Output Module has been used for the page's
<title>.
-
-
Copy the
DOCTYPEdeclaration from an existing page in your website, and paste it intoindex.htmlabove all existing code. -
Amend the
<title>to fit in with the rest of your website. -
Delete the
<style>block shown on lines 6–15 of the preceding screenshot. -
Link your own style sheet to
index.html. The code at the top of the page should now look similar to this:
-
Scroll down the page until you locate the opening
<body>tag. It should be around line 141 and look like this:<body><div align="center" style="width:100%; height:100%">
-
Edit the
<div>tag to remove the existing attributes. Replace them with an ID to identify the web gallery. You can use any name you like, exceptgallery. I suggest usingwebgallerylike this:<body><div id="webgallery">
Note: An ID should not contain any spaces or punctuation, except a hyphen or underscore. Nor should it begin with a number or a hyphen followed by a number. An ID should never be used more than once in the same page. The Adobe Output Module uses
galleryas the ID of the Flash movie, which is why you can't use it for the<div>. -
Scroll further down the page until you locate the following section of code:
This sets all the parameters for the Flash movie that displays the web gallery. As you can see on lines 184 and 185 of the preceding screenshot,
widthandheightare both set to100%. You need to change these values to suit your own site's layout.For my example page, I used the following:
'width', '700px', 'height', '525px',
Make sure you don't delete any of the quotes or commas. Also make sure there's no space between the number and
pxor %. Save
index.html. That's all you need to edit. The Bridge web gallery has been successfully adapted to fit into an ordinary web page.
Of course, these edits on their own aren't sufficient. You need to build the structure of your own page around the <div> that contains the web gallery. However, a web gallery isn't going to need much more than your website branding (header, logo, etc.) and navigation.
For my example page, I floated the navigation menu left and put a wide left margin on the webgallery <div> to make room for it. The basic style rules are as simple as this:
#webgallery { margin:85px 10px 0 200px; } #nav { float:left; width:170px; margin:70px 10px auto 20px; }
If you want to use a table layout or need to move the <div>, put your cursor inside the message that's displayed to visitors with JavaScript disabled, and click <div#webgallery> in the Tag selector at the bottom of the Document window like this:
This selects the entire <div> which you can cut to your clipboard and then paste back into the new location. Be careful when pasting back. If the focus was in Design view when you cut the <div> to your clipboard, make sure you're in Design view when you paste. Alternatively, if the focus was in Code view, make sure you're in Code view—and in the right place—when you paste.
When you have finished, don't forget to upload the entire contents of the folder where the Adobe Output Module created the gallery.
Back
