Applying the ShowPic behaviour - 2

Create the null link

Creating a null link in the Property Inspector. Simply click on the thumbnail image, text link, button, or whatever you plan to use as the trigger. Then type "javascript:;" (without the quotes) in the link box of Property Inspector. Make sure to include the colon (:) and semi-colon (;) in the right order.

Highlighting the <a> tag. Highlight the link you have just created, by clicking the <a> tag in the status bar. You are now ready to apply the ShowPic behaviour.

Apply the ShowPic behaviour

Open the behaviours panel, and check that it says <a> Actions next to the + and - buttons at the top left of the panel. If not, go back and repeat the previous step, highlighting the <a> tag.

Selecting the ShowPic behaviour from the pop up menu. Click on the + button, and navigate to Studio VII > ShowPic by PVII on the pop up menu. Click to open the behaviour interface.

In the dialog box that appears, there are two items to complete - first, browse to the select the full size image you want to display; then select the ShowPic layer it will appear in.

This may appear repetitive, but it is necessary to make sure the right image, layer and behaviour are all matched with one another. As with the creation of the ShowPic layer earlier, avoid the temptation to type in the image path yourself. Select the appropriate ShowPic layer from the drop down menu in the lower half of the dialog box. Only layers that have already been created will appear, which finally clears up the mystery as to why you cannot apply the behaviour before creating the layer. Once you're happy with everything, click OK.

Almost there...

Go to the Commands menu > Studio VII > Apply N4 Return False Fix. This is required even if you do not plan to support Netscape 4.x.

Congratulations, you've successfully deployed the PVII ShowPic behaviour. Well, almost. If you're using it outside the Park Avenue templates, you need to know what to do with your style sheets, and whether to apply the Scrub behaviour.

Style sheets

Remember when you inserted the ShowPic layer, there was an option "Use Park Ave Styles"? If left in its default state (checked), it inserts into your code 3 CSS classes:

imgCaptionshd - for the caption
imgCaptionsbg - this holds the loading.gif image and/or formats any text message you want to display while the full size image is loading
imgCaptions - for the descriptive text

If you are just adapting Park Avenue, these CSS classes are already defined in the accompanying style sheets, and if you're happy with the styles created by PVII, there's only one thing you need do - set the absolute path for loading.gif in the v4sheet.css.

The best way to edit your style sheets is with a a dedicated editor like TopStyle. Otherwise, open v4sheet.css in an ordinary text editor like Notepad (do NOT use Word or any other wordprocessing program). The definition for imgCaptionsbg begins on line 33:

.imgCaptionsbg {
background-image : url(http://www.mysite.com/assets/img_main/loading.gif);
background-repeat : no-repeat;
color : #D4D0C8;
font : 12px "Trebuchet MS", "Comic Sans MS", Arial, sans-serif;
}

Replace the www.mysite.com with the address of your own web server, including any other parts of the full path Netscape will need to find loading.gif.

You may be wondering why there's a style for font in there too. That's a mystery Project Seven has never explained - and it appears to have been left in by mistake. If you put anything inside the paragraph, it will pick up the font styling, but it will also appear either above or below the full size image once it loads. Of course, if you want to use a different loading image from the one supplied in the Park Avenue pack, just create a suitable lightweight image of your own and change the url of the background-image accordingly.

If you're using ShowPic in a site you've created yourself, you will need to add the three CSS classes to your style sheets. The simple way is to copy and paste them from the Park Avenue style sheets and then adapt them to your own preferred style.

CAUTION: ShowPic places each element (caption, image and descriptive text) in a paragraph and applies the style to the <p> tag. If you have specified padding or margins for your default paragraph style, they will also be applied to your ShowPic layer, producing unexpected results. You may need to experiment with different style rules to get things right, depending on other aspects of your design.

To scrub or not to scrub...