Our newest extensions:
   Password Protect 6 - control access to pages
  JustSo Photo Album 3
  JustSo Picture Window3
  JustSoPicWinTo3 conversion
  JustSo Alt Tagger - be Accessible
  CSS Calendars - create beautiful calendars.

JustSo Picture Window2 (ver 1.1.24) for DW4.01/UD4.01, MX, MX2004
UserInterface Tips Examples Issues       [auf Deutsch]

Jspw2 is DEFUNCT - now see jspw3.

Jspw2 has been replaced by jspw3.
If you purchased jspw2 and did not receive a copy of jspw3 from me free via email, let me know!

Like its predecessor, JSPW2 assesses the user's monitor resolution and then pops up your image resized as needed to be certain it always fits on-screen without scroll bars (unless you opt for scrollbars!). Over the years many of you have asked for more flexibility and options. Over many, many months, JSPW2 was completely rewritten to add many of these capabilities and at the same time adds support for Opera7 (but see Known Issues) and Safari1.0 .

I am now offering a new Command to convert a page full of old jspw1 behaviors to jspw2. So you can update all your old pages easily - even those created originally by JustSo Photo Album! See the jspw1to2 conversion utility here.

New features include options for:

• Captions
• Control position on screen
• CSS controlled appearance, including Background images
• Filename encryption
• Blocking of MSImagebar
• Timed auto-close
• Click-to-Close
• Close button
• Show image when javascript off
• Window title and alt tag text
• Add Title to <A> tag
• Block jspw image resizing - allows scrollbars
• Allow multiple windows open
• Reset CSS and non-CSS values
• Safari 1.0, Opera 7 (see below)

Jspw2 is DEFUNCT - now see jspw3.

Jspw2 has been replaced by jspw3.
If you purchased jspw2 and did not receive a copy of jspw3 from me free via email, let me know!

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.

We'll describe each field, but first some 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".
• To add the behavior:
  • The first step is to add an href link to text, an image, or imagemap's <area> on your page. At this point the href can either be "#" or "javascript:;" or the image you wish to have open in the popup. (Tip: The most efficient thing to do is simply Browse for the image you want to appear in the popup right there in the Link box.  When you subsequently open the jspw2 UserInterface, that value will appear in the first box for you automatically.  Saves you time and typing.)
  • Then simply select the <a> tag for your text or image (or the imagemap's <area> tag) and go to the Behaviors Window . There click on JustSo Picture Window2.
• When you are ready to go online, don't forget to upload the images for your popups (in their proper folders) and also the folder "vwd_scripts" (with it contents) into the site root!
  

* * Now see the User Interface * *

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.

Save CSS values 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. Tip: Some .swf files must have their dimensions entered manually. When necessary, you will see an alert message asking you to do so.

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 table and move it to the left of your screen (if your monitor resolution is high enough to allow): All the "See it" jspw2 popup windows below - which show you each tab of the UserInterface - have their Click-to-Close feature turned OFF to keep them onscreen as you scroll thru the help text here. See Examples below for the more common scenario - where Click-to-Close is left ON.

TAB "Basic"   See it

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.

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 margin of a width 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.

TAB "Image"   See it

Resizing: Block JustSo image resizing The jspw2 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 jspw2 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 JSPW2 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 of the object to which the behavior is applied 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 jspw2 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!

TAB "Window"   See it

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 jspw2.

TAB "Caption"   See it

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.

Rows Set the number of rows of caption allowed. Tip: Lineheight is an abberation in jspw2, for if you later change this value manually in the CSS file, jspw2 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.

Color Text and Background (CSS values) - self-evident.

TAB "Close"   See it

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.

Jump to tips:

Efficient entry of links tip
Save CSS tip
Enter dimensions manally tip
"But use" background color vs background image tip
Null link tip
Background Image path in CSS tip
Block JustSo image resizing tip
Lineheight tip
Minimum popup height

The "see it" links above utilize jspw2 with Click-To-Close OFF and position set at upper right corner. Most often I actually leave CtC ON, but wanted to demonstrate here that with CtC OFF the user can scroll the main window to read text without having the popup image disappear.

Example1 - Animated gif with scrollable caption at Image width and Blocked MSImagebar, positioned to right with 5% spacer.

Example2 - Flash image with text caption at Default width.

Example3 - Jpeg image with encrypted imagename and blocked MSImagebar at fullscreen with "But use" bgcolor and a close button. The Title field is "A picture of *"

Example4 - Large gif to emulate a map where full detail is needed, so with Image Resize turned OFF resulting in fullsize image with scrollbars. Set to self-close in 10 secs.

REALWORLD Example1 - Thanks to David Zizza, here is an example applied to multiple imagemap hotspots.

REALWORLD Example2 - Thanks to Liz, here is an example of straightforward, very pretty, use of jspw2.

REALWORLD Example3 - Thanks to Kelley Rao, here is a beautiful website that uses jspw2 very effectively.

Jspw2 is DEFUNCT - now see jspw3.

Jspw2 has been replaced by jspw3.
If you purchased jspw2 and did not receive a copy of jspw3 from me free via email, let me know!

jspw2 does NOT update when you move a document to a new folder: I am working on a free utility that will update the behaviors (you will call the Command before OR after making the move), but for now be aware that this is a problem. (It can be done manually, but is time-consuming). Bottom line - do NOT move a page with JustSo Photo Album2 as it will simply not work.

Opera7: A frustrating glitch in this browser is that an echo of the image and caption appear in the popup the second (and subsequent) time a particular popup is opened. The echo disappears if you slightly resize the popup. If you know of a cure for this. do let me know! (programmatic resizing of the popup fails to exorcize the ghost the way manual resizing does, fyi) Also, Opera users must set their preferences to "Prefer separate windows."

Templates: Occasionally when I apply jspw2 twice or more to a DW template, Saving results in a VERY prolonged hourglass - but with patience an alert message eventually appears telling me DW was unable to update the behavior and to remove it to try again. You can ignore this message - turns out jspw2 IS applied correctly and all is well.) Also know that you CAN NOT use LOCAL-CSS FILES or EXTERNAL CAPTION FILES with templates or nested templates (unless you are willing to do some hand-coding outside DW).

Minimum popup height: Turns out that many browsers, other than IE, do not properly handle the position of the image within a popup whose total height less than about 140 pixels. So if your image height is below 140 pixels or so, be sure to use a Hug Margin such that

ImageHeight+2(Margin) >= 140.

Languages: Like many of my Extensions, jspw2 (et al) will likely only work with the latin charset (charset=iso-8859-1). If you have good or bad news on this score - please let me know. Bad: Cyrillic fails, Japanese fails.

Seems to work well in all these: (Thanks to Peter Parnaby for much of this information. If you find others that work, or that do not, please let me know!)

WinXP:

• Mozilla 1.2.1 Netscape 4.x, 7.01
• IE6.0
• Opera7 (with one glitch)

Win2k:

• Mozilla 1.2.1
• Firebird
• Netscape 4.x, 6.1, 7
• Opera 5.12, 7.01
• IE6.0

Windows 98:

• IE 4.72 (Fine on SERVER; fails on LOCAL machine)
• 5.0

• Netscape 6.1*, 7
• Netscape 4.x although click-to-close fails.
• IE 5.x*
• Opera 6.03 *windows don't resize to fit screen

Mac OS 8 :

• Netscape 4.x although click-to-close fails.
• IE 4.01*, 4.5, 5.0 and 5.2
  

Mac OSX:

• IE 5.2 (Fine on SERVER; trouble with commas in captions on LOCAL machine)
• Safari 1.0 final
• Netscape 7.1
• Camino 0.7
• Opera 6.03* windows don't resize to fit screen (preferences contol this)
• Mozilla 1.6*

* = tested on server (online), not tested locally.

Version history:

1.1.24 Now properly deletes all remnants of itself when the behavior is removed from the page.

1.1.21 Turns out that DW has a bug in its extension environment - it fails to encode commas properly. If your Title, Alt or Caption fields contain a comma, then the popup image fails to display properly. This version resolves this. (I have also emailed all current users a utility for finding and properly encoding any commas on their current pages' jspw2 behaviors.)

1.1.20 Altho by default image displayed hugged, the UI stated "fullscreen" (a recent error, it appears.) Now UI states "hug image" as it should.

1.1.16 returns path to external scripts as they had been in versions other than 1.1.15 - to document-relative; removes the message to Opera users; and permits manual entry of the image filename within the UserInterface.

1.1.15 fixes several small bugs, one large one for which a patch was sent to all owners, and one work-around for an issue affecting some DWmac users.

Jspw2 is DEFUNCT - now see jspw3.

Jspw2 has been replaced by jspw3.
If you purchased jspw2 and did not receive a copy of jspw3 from me free via email, let me know!

If you have other problems or suggestions I would like to hear from you, so please email me . We'll build an FAQ section as we go!

[ home | services | examples | contact me ]
Site © 1998 ValleyWebDesigns
We have a strict Privacy Policy