JustSo PhotoAlbum 3
How-to
Please make sure you have purchased and installed JustSo PictureWindow3 before trying to use JustSo PhotoAlbum 3. As always when installing Extensions, you must also close and restart Dreamweaver before the new Extensions will be active.
TIP: JustSo PhotoAlbum3 and JustSo PictureWindow3 are tightly integrated. JspA3 adds jspw3 behaviors to each of the thumbnail images. JspA3 gives you the option of adding out-of-the-box jspw3 popups, or of adding jspw3 popups that you have previously defined for the page or for the Site. If you want to opt for the latter, then before add an Album to your document, EITHER:
- Add a jspw3 Behavior to your document and leave it there for jspA3 to use as a "model" (which can later be removed) , OR
- Add a jspw3 Behavior anywhere on the site, even this document, and save its settings as Site Defaults. Then you may, if you wish, remove the added Behavior since its settings have been saved.
Then in JspA3's Popup tab you will select "Use advanced Formatting" to use your custom jspw3 settings in the Album.
When you upload your site to the server, you must
remember to upload:
1) the folder "vwd_scripts" and
its contents into the site root,
2) the file "jspw3_pop.htm",
in the folder along with your document.
3) the folder bearing
the document's name, and its contents.
To add the Album:
Place the mouse-cursor on your page just where you want to insert
the table of thumbnail images. Then find JustSo PhotoAlbum 3 in
the menus at Insert/Valleywebdesigns.com OR 
in
the Goodies tab of the insert bar. JspA3 is an Object so it adds
its table of thumbnail images to the page right at your cursor
location.
TIP: Once the table of thumbnails is on your page, you may freely edit the CSS file that governs its appearance. The CSS files can be found in the /vwd_scripts/jspa_css folder which was added to the root of your site. JspA3 will never molest any changes you make to those css files - they will NOT be overwritten when you add your next Album to the site.
The User Interface revealed :
A note about how I used jspw3 here to show the jspA3 tabs: Each "SEE the tab " link below will open a jspw3 window at the right edge of the screen. If you lucky enough to have high enough monitor resolution, shift the current window to the left to allow room for the jspw3 windows. All three popups will remain open for 120 seconds so you can refer to them. Or you may click them closed. The "Browse" link opens a jspw3 popup at the top of your screen, with its click-to-close ON so it will not be in your way. These various behaviors demonstrate some of the flexibility built in to jspw3.
We will describe each tab of the UI but first the NONTAB items:
- Save as site defaults:
- You may save all your choices to use as Defaults the next time you add an Album anywhere in this Site.
- Clear saved site defaults:
- Erases the DW Note that was storing your chosen default values. The next time you add an Album the UI will be populated with out-of-the-box values.
And now each tab of the UI
Note: You may want to resize your browser window now to be only as wide as this text and move it to the left of your screen (if your monitor resolution is high enough to allow.) All the "SEE the Tab" jspw3 popup windows below have their
- "Click-to-Close" feature turned OFF, and
- "Allow multiple windows" ON, and
- "Auto-close" set to 120 seconds,
- and are set to open in 3 different right-side positions on the screen,
so they will remain visible as you scroll thru the text here. These are all non-default settings. On the other hand, the "Browse" link in the Images tab text below opens a default jspw3 popup, so it will close when you click anywhere. These various behaviors demonstrate some of the flexibility built in to jspw3. See Examples for more jspw3 variations.
Images
Tab- Selected Images:
- Browse to select the image to include in your Album. They may be on
any drive or folder accessible by your OS. See
Browse dialog, where you will find:
-- Look in: Here you may select the folder to explore for images.
-- Select images: Here you can click, shift-click or ctl-click to select one or multiple images to include in your Album Gallery.
-- Return to doc's site: Click this to return to the root of your open document's Site.
-- Browse other folders: Click this to browse higher folders in the folder tree, or even other disks, like CDs!
The "Folder" and "Images selected" boxes inform of you of your choices. - Thumbnails:
- px
- Select from the list of thumbnail dimensions - these are the imaginary boxes in which the thumbnail must fit with its aspect ratio preserved.
- Sort
- Select if you wish the thumbnail images to be sorted alphanumerically rather than displayed in the order they are retrieved from the disk.
- Columns
- Enter the number of table columns you want to display your gallery of thumbnails.
- Show Filenames:
- Each image's filename, minus its extension, is displayed beneath the thumbnail.
- Photos:
- Select the quality and imagetype from the list. The last choice, "copy originals", offers the option of copying the original fullsize image, unchanged, to use as the final fullsize popup image. If you have carefully crafted your image, then you may want to use it unaltered as to compression or imagetype or scaling.
- Scale
- You may have Fireworks enlarge or shrink your fullsize image by a percentage entered here.
- Thumbnails & Photos:
- Okay to overwrite
- Your original images are never molested. Check this box if, for example, you are recreating an Album using new image size settings. Uncheck this box if, for example, you are using thumbnails and fullsize images (placed into the appropriate folders) created elsewhere, or, for another example, you are recreating an Album changing only the CSS Theme or adding imagename labels.
- Append _t and _f to imagenames
- May help you manage your images if they have slightly different names.
- CSS Theme:
- Select from the list which theme you would like
applied to the gallery table of thumbnails. The approximate
appearance is presented beneath this dropdown menu. DW
does not display it quite right though - for example borders
will not display as anything but solid, and background-images
simply do not display at all.
You may go into the /vwd_scripts/jspa_css folder which is added to your siteroot to modify these css files in any way you wish. You may also add your own to that folder and they will magically appear in the dropdown list here on your next visit !
Finally, you may wish to have a css style unique to this particular gallery page. If so, you will find added to the Head of your document, the bare skeleton of a css file you may use to over-ride those in the vwd_scripts/jspa_css folder.
Examples of the built-in CSS Themes supplied with JspA3
You need not make any changes to the CSS files provided with JspA3 (unless you want to of course). Here are screen grabs of the built-in CSS Themes out-of-the-box. ( I did change the background color of the pages on which the Albums were placed.) If you have a CSS theme you'd like to offer for others to use on their sites, please Email the css file to me!
- Use advanced Formatting: Unchecked
- The popup window is created with the JustSo Picture Window3 defaults OR with the values you enter at the bottom of this tab at "Popup formatting:" (see below). Checking the box allows you to utilize JustSo Picture Window3 CSS and non-CSS values you have previously added to the Site or to this Document. The Advanced options are:
- Use advanced Formatting: Checked
- Now you get all the power
of jspw3, which has many options for the popups. As you
can see on this tab, there are two ways to tell photoAlbum
3 to use jspw3 settings: 1) Add a jspw3 behavior anywhere
on your site and Save those settings as Site Defaults. Or
2) you can add a jspw3 behavior to the very page to which
you will be adding the Album and have photoAlbum use those
values in lieu of even Site Defaults just for that page.
You can easily experiment to get everything looking just
the way to want before proceeding with Album creation. Note
these options are for the Non-CSS values.
In contrast, the CSS values are always fluid, can be set and reset any time you add a jspw3 behavior to a page. In jspw3 you can instruct the behavior to employ the CSS file it saves for the site as a whole, or instead to employ a special CSS file it saves just for the use of that one page. (jspw3 is very powerful indeed!) - Advanced formatting uses (non-CSS) values from:
- Jspw3 behavior found in the document, if present, else:
- As
explained in the paragraph above, select this option to
force the new jspw3 behaviors to get their values from a
jspw3 behavior you have already placed on this page.
Note: jspwTo3 will use the first jspw3 behavior if finds on the page. It is best to have but a single "model" jspw3 to be sure you get the results you expect. Aftewards you can remove that model behavior if you wish. - Site default Jspw3 values, if present:
- As explained in the paragraph above, select this option to force the new jspw3 behaviors to get their values from the previously saved Jspw3 Site Defaults.
- Jspw3 Extension defaults:
- If you were to uncheck the two boxes above, the result would be exactly the same as Basic mode, in which the defaults built in to jspw3 are used for the Album.
- Popup formatting: (this text appears when NOT using Advanced
formatting)
Except use these values: (this text appears when you ARE using Advanced formatting) - Bgcolor:
- Check this box and select a color to use in the popup window to appear as the image is downloading and to surround the image when the hugmargin > 0. This color choice will be the one used by the popups, over-riding the bgcolor information supplied by any other source.
- Title:
- Check this box and Enter the text you wish to appear as the Title of the popup window. This text will be the Title for the popup windows, over-riding the Title information supplied by any other source.
- Fullscreen or Hug image:
- Choose Fullscreen to open the popup the available size of the browser window with the image surrounded by a margin of bgcolor. Choose Hug image top to open the popup equal to the size of the image plus whatever margin width, of bgcolor, you choose in the next field. The actual margin width may be reduced depending on the user's monitor resolution.
- Px:
- Enter the width of the hugmargin.
Next, the FAQs .....
