JustSo PictureWindow 3
How-to
You will be adding the Behavior to each image one at a time. If you would like to automate the process, particularly useful for creating an entire Gallery of thumbnails each bearing the jspw3 behavior, then you might want to look into JustSo PhotoAlbum 3. Here though we will outline the steps you use to apply this Behavior to your page, and we outline how to apply the many options should you want to change the default behavior.
When you upload your site to the server, you must
remember to upload:
1) In the site root, the folder "vwd_scripts" and
its contents,
2) each
instance of "jspw3_pop.htm",
a file that you will find in each folder containing a jspw3
behavior
3) the
image(s) to pop up.
4) if you are using
css unique to a document, then also upload the folder bearing
the document's name - it contains the css file for that doc's
popups.
To add the behavior (to linked text, linked images, or to imagemaps):
(The number one emailed question: "...the jspw3 entry in the Behaviors Window is grayed out..."Tip: simply follow steps 1, 2 and 3!)
-
The first step in adding the behavior is to add a Link (using
the Property Inspector) to text or to an image. At this point
the Link can either be "#" or "javascript:;" or
the image you wish to have open in the popup.
(Tip: Actually the most efficient thing to do is simply Browse for the image you want to appear in the popup right there in the Property Inspector's Link box. When you subsequently open the jspw3 UserInterface, that value will appear in the first box for you automatically. Saves you time and typing.) - If an image, then click on the <a> tag for that image
(using the Tag Selector Bar at the bottom of the Design Window),
or click on the <area> tag for an imagemap.
-
And THEN you
can go to the Behaviors Window. Click on the + icon, and
you will find JustSo PictureWindow 3 active. Click and the Jspw3
User Interface will open.
The User Interface revealed :
The User Interface is organized to be friendly, yet there are many hidden aspects you will want to read about here. To make life really simple, only the values on the very first (basic) tab need be entered - you may skip all the others to simply accept their defaults, whether those defaults be out-of-the-box values or your previously entered values.
Two general notes:
- Many fields are followed by "(css)" which means that that value is saved in the CSS file - so may be subsequently edited there, and so applies to *all* popups for the site (or the page, see below). Non-css fields may be stored as site defaults if you wish, not in a CSS file, but in DW Notes, which are not meant to be edited.
- In all of the text fields you may use a * as a placeholder for the image's filename. E.g. you may enter "*'s better half" which would yield "Joe's better half" if the image's filename were "Joe.jpg".
We will describe each tab of the UI but first the NONTAB items:
- Memorize all non-CSS values as defaults:
- Once you have set the non-CSS values as you wish to use them in the future, you may save them (in a DW Note) to use as Defaults the next time you apply this Behavior anywhere in this Site.
- Clear memory of the non-CSS defaults:
- Erases the DW Note that was storing your chosen default values. The next time you apply this Behavior the UI will be populated with out-of-the-box values.
- These CSS values are for:
- Entire site or This document only. All UI fields marked with "(CSS)" are actually writing to a CSS file. There are two choices here - you can ask the Behavior to create a CSS file for the entire Site. Or you may instead ask the Behavior to create a CSS file just for this one document. Which ever you choose, that file is used for subsequent applications of this behavior. There is flexibility here - on subsequent applications of the Behavior, you may opt to Refresh the CSS-based values to those of either of the two CSS files - the Site file or the Document file. Tip: It is important to understand that any changes you make to these values will also be altering the appearance of all other instances of this Behavior which use this same CSS file, either the Site-wide CSS file or the Document-wide CSS file.
- OK/Cancel/Help
- Self evident.
- Refresh non-CSS:
- Restores all values that are not stored in the CSS file back to their out-of-the-box values.
- Refresh CSS...
- Reveals several options. You may choose to Refresh the CSS-based values in the UI with values from this document's CSS file OR with values from the Site's CSS file, OR with the out-of-the-box values.
And now each tab of the UI
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 to keep them onscreen as you scroll thru the text here. I also set them to close after 120 seconds. See Examples for the more common scenario - where Click-to-Close is left ON.
Basic
Tab- Image Name:
- This field will autofill with the filename of the image if your selected object is already linked to an image, or you can Browse for it if not. The image may be a gif, jpg or swf !
- Image Alt Tag:
- Enter, if you wish, text for the alt tag. Use * as a placeholder for the image's filename.
- Image Size:
- Most likely you will want to select "Autodetect" but you may manually set different dimensions if you wish. Some .swf files must have their dimensions entered manually. When necessary, you will see an alert message asking you to do so.
- Window Size:
- You may toggle either "Full Screen" - where the popup window fills the available screen with the image centered within, or "Hug Image" - where the popup window is just large enough to hold the image plus a colored Hug Margin of a width (in pixels) that you set.
- Window Title:
- Enter, if you wish, a title for the popup window.Use * as a placeholder for the image's filename. This value is also used as the Title attribute for the anchor tag to which the behavior is applied (for accessibility).
- Background color:
- (A CSS value) The popup window will have this bg color which is visible as the image is loading and in the margin around the image. "But use" bgcolor is unique among all fields. It is not memorized in a DW note, nor is it ever Refreshed. Once entered, it remains until you alter or remove it. I often want to select a bg color that complements that particular image. This allows you to use a unique color unrelated to that saved in a CSS file. Tip: Note that this - indeed any - bgcolor is hidden by a CSS background image.
- Resizing:
- Block JustSo image resizing The jspw3 popup window is always resizeable by using the resize handles (to accomodate unforeseen handling by different browsers/platforms). "Block image resizing" instead refers not to the popup window but to the image itself - you are telling jspw3 not to recalculate the imagesize based on monitor resolution, but to show it fullsize no matter what. You might choose this for one of two reasons a) resized gifs (vs jpegs and swfs) are sometimes quite jagged and distorted or b) you are showing a map with fine detail that can only be viewed well at full size. TIP: You should use a hugmargin of at least 10px to allow room for the scrollbars.
- Protect:
- Encrypt Imagename
- There are several features of jspw3 that hinder theft of your popped up image. Realize that a savvy user will be able to steal them, but the average user would find it difficult to do so when all security features are employed. The most important security feature is encryption of the image's filename. Be aware though, that on Macs it is brain-dead simple to steal the image no matter what you do, just a fact of life on the web.
- Block MSimagebar
- The next security feature is to block the MSimagebar from opening. It really only increases security when added to filename Encryption. But you may also select this option merely to prevent the MSimagebar from defacing your beautiful image, and not as part of any security scheme. Used alone, it really offers no security - you should at the very least turn Click-to-Close is ON.
- In the calling <a> tag, add Title tag and Make href =
- "javascript:;"
- If you have chosen not to encrypt the image's filename, then, rather than making the href link be the image's filename for all to see (see below) , then you might want to make that link be the null link "javascript:;". (Tip: Not "#" which will cause the page to jump to the top in IE when the link is clicked.)
- the imagename
- If security is not a concern, then you might specifically elect to have the href link of the object to which the behavior is applied be the image's filename - this specifically so that if the user has disabled javascript then the image will still appear albeit in a regular, plain, browser window.
- no changes
- Block the Behavior from altering the href link in any way
- Always open href document
- There are rare times when you wish to pop up the jspw3 window with an image, but ALSO, behind the popup move the user to a new page in their browser. If so, then have the href link be to that new page and it will open behind the popup window!
- Position on screen:
- You have the option of placing the popup centered on the screen or against any of the screen edges with your choice of space between the popup and that side. You can be inventive here - you will see that by "pushing" the image around the screen with the Side spacer (in either pixel or percent of screen width units) , you can control the popup window size and location in interesting and perhaps useful ways.
- Background image:
- (A CSS value) You may now choose a background image rather than using only a colored background. If you need to control repeat or position, do so manually in the CSS file. Tip: To test the Background image locally you may need to temporarily change the image path to document-relative. This is a browser issue, not related to jspw3.
- Caption:
- Toggles the addition of a caption below the image. This is ignored if no caption is found. Use * as a placeholder for the image's filename.
- Display:
- This text
- Here you may type in the caption. Use * as a placeholder for the image's filename.
- Scrollable text from file
- A distinct advantage of this captioning
method is that the caption is displayed as a scrollable
text field, so a long descriptive passage will fit nicely
under the image. This is accomplished, well first by
choosing this radiobutton, but then too by storing the
caption in an external file. There will need to be one
file for each and every image. Place these files in a folder
just below the page document. Give this folder a name equal
to the page's filename, e.g. "weddingphotos" (but
no file extension, so omit the .htm or .asp etc) and
give each file in that folder a name equal to the image's
filename, e.g. "unclebill.js" and "auntmartha.js" (but,
again, no file extension, so omit the .jpg or .swf) Then
each js file needs to be in this format:
theCaption="This caption may be quite lengthy indeed, really a description more than a caption ... blah blah blah ..." - MaxWidth:
- Default width is between the image width and the popup window width, with snaps to image width if nearby and snaps away from window width if too proximate. ImageWidth and WindowWidth - self evident.
- Height:
- Lineheight
- (a CSS value) Set the lineheight for the caption text - this will leave more room between rows of caption text, and if not using scrollable text will also increase the popup height to compensate. Tip: Lineheight is an abberation in jspw3, for if you later change this value manually in the CSS file, jspw3 will NOT know to recalculate the height of the popup window. If you are using a very wide margin or fullscreen then this will not likely matter, but use caution otherwise.
- Rows
- Set the number of rows of caption allowed.
- Color Text and Background:
- (CSS values) - self-evident.
- Close:
- Click anywhere to close ("CtC")
- Turn this off if you would like the popup to persist despite the user clicking anywhere on the screen. CtC must be off if you select the "Scrolling Caption" option to allow the user to click on the scrollbar without closing the window. Otherwise it is best to leave CtC on.
- Allow multiple windows
- There may be occasions when you wish to have several popups remain open, in different locations on the screen. CtC (above) needs to be off to allow this.
- Seconds before auto-close
- The popup will close itself if you enter any non-zero value here.
- Closer button:
- Show button
- Adds a close button beneath the image, and allow a fixed height in pixels for it.
- Align
- You may direct the close button to be left, center, or right aligned. A CSS value.
- Text, Hover, Background and Hover
- (all CSS values) -self-evident.
Next, FAQs .....
