ShowPic by PVII
ShowPic by PVII is an image display system designed to be used in gallery or thumbnail-based image display pages. The system works by creating a layer (div) for each image that you wish to display. This layer is initially created using a small, transparent placeholder image (usually named shim.gif) set to the exact size of your fullsize image. This layer also contains an editable caption and a full text description. You can insert a series of pre-formatted layers... one for each image. Since the image in each layer is initially the same (the transparent placeholder image), the impact on page loading time is very small. The Insert ShowPic by PVII Command makes creating these layers a breeze.
Download the ShowPic by PVII extension
To display a fullsize image, a ShowPic behavior is placed on a thumbnail or a text link. Clicking the thumbnail or link loads the associated full-size image into the layer, makes the layer visible, while also hiding all other ShowPic layers. Since the placeholder image was preset to the full image size, your images will never be distorted. This allows you to present many different image sizes, each one displayed with its natural width and height. The full-size images are only loaded into the browser as needed (when the user clicks a thumbnail image, e.g.).
For complete step-by-step instructions be sure to check out our free Show Pic tutorial
This suite contains:
- Insert ShowPic Layer Command - Allows you to easily create a ShowPic layer, including the caption and descriptive text.
- ShowPic by PVII Behavior - Apply to a thumbnail or link to display the ShowPic layer containing the fullsize image, its caption, and descriptive text.
Overview
The ShowPic Command can be used to create any number of pre-formatted ShowPic Layers. A layer is created on your page that contains the caption, placeholder image, and descriptive text for an image you select. This layer follows a naming convention: P7ShowPLx, where x is the number of the layer in the sequence it was inserted. If, for example, you create fifteen ShowPic layers, they will be named P7ShowPL1 through P7ShowPL15.
The interface supplies "boilerplate" text for the Caption and Description. You can edit the text in the ShowPic window or after the Layer is inserted on your page.
Creating a New ShowPic Layer
- Choose Insert--> Studio VII--> ShowPic Layer by PVII to open the interface.
- Browse to the full size image that you wish to display.
- Browse to the place-holder image (shim.gif) in the same directory.
- Enter a text Caption for the image.
- Enter the Descriptive Text for the image.
- Click OK to create the new ShowPic layer.
The Interface:
The Insert ShowPic Layer interface is a breeze to work in. Simply browse to your fullsize image, browse to your placeholder shim, edit the Caption and Descriptive Text, set Position and Options, then click OK.
Full Size Image: Click the Browse button to select a fullsize image. The "Select Image Source" dialog box will open. Navigate to your image then click the Select button. The path to your fullsize image will now be displayed in the Full Size Image entry field. This image will not be initially displayed in the ShowPic layer… but its dimensions will be used to determine the proper size of the placeholder image (shim.gif). This insures that the fullsize image dimensions will match perfectly with the placeholder image when the full size image is actually loaded (using the ShowPic Behavior).
Shim Image: This is a small (just a few bytes in size), transparent placeholder image. It loads with your page and is replaced by the fullsize image when instructed to by the ShowPic Behavior. The same Placeholder Image can be used for all ShowPic Layers in your site. Click the Browse button to select your shim image. The "Select Image Source" dialog box will open. Navigate to the image (usually shim.gif) and click the Select button. The path to your shim image will be displayed in the Shim Image entry field.
Caption: This box is initially set to contain default text that describes this ShowPic layer: "Caption for Image Number X" where X is the number of this new ShowPic layer. You can edit the Caption while in the ShowPic window or afterwards, on your page, just as you would ordinary text in a Layer (which is, in fact, what it is ). The Caption is placed in a paragraph just above the fullsize image. While there is no limit to the amount of text you can enter here, we suggest that you keep it short enough so that when rendered it will not be wider than the image. The Caption will only be created if the "Use Caption" box is checked.
Descriptive Text: This box is initially set to contain default "boilerplate" text. As with the Caption, you can edit the text in the ShowPic window or after it is inserted on your page. The descriptive text is placed in a paragraph just below the full size image. The Descriptive Text will only be created if the "Use Descriptive Text" box is checked.
Position: Set the Top and Left coordinates of the Layer to position it precisely where you want it to appear. The Left and Top values are preset to the same postion as the last ShowPic layer inserted on the page (or to zero if this is the first ShowPic layer on the page).
Left Postion: This setting determines the distance from the Layer's left edge to the browser window's left edge.
Top Position: This setting determines the distance from the Layer's top edge to the browser window's top edge.
Options:
Use Park Ave Styles: This option allows seamless ShowPic layer-Park Avenue Design Pack™ integration (Requires the Park Avenue Design Pack). Use this option if you want to create the ShowPic layer with Park Avenue CSS classes assigned to each component as follows:
- The Caption paragraph will be assigned the "imgCaptionshd" class.
- The Image paragraph will be assigned the "imgCaptionsbg" class.
- The Descriptive Text paragraph will be assigned the "imgCaptions" class.
Use Caption: When Use Caption box is checked, the ShowPic Layer is created with a paragraph above the image that displays the text entered in the Caption box. This paragraph will not be created if the box in unchecked.
Use Descriptive Text: When Use Descriptive Text box is checked, the ShowPic Layer is created with a paragraph below the image that displays the text in the Descriptive Text box. This paragraph will not be created if the box in unchecked.
Insert At Cursor: By default, ShowPic Layers will always create a new Layer as an absolutely positioned DIV with the <body> tag as its parent. The html code will be inserted at the end of any other code already on the page. There may be times, however, that you want to insert (nest) this ShowPic layer inside another layer on your page. When this box is checked, the new Layer will be inserted at your cursor location. Use this option with caution because incorrect layer placement may cause the layer to render incorrectly in certain browsers.
Using the ShowPic Behaviors
The ShowPic Behavior is usually placed on a thumbnail image (or other link) that acts as a trigger. The behavior allows you to select a fullsize image and one of the existing ShowPic Layers on your page. When the user clicks the thumbnail or link, the full size image is loaded and replaces an existing placeholder image (shim.gif)- and the selected ShowPic Layer becomes visible while all other ShowPic Layers are hidden.
Creating a ShowPic by PVII event
Select (click) a thumbnail image or null link to act as the trigger for the behavior.
- Click the plus button (+) on the Behaviors Panel.
- Choose Studio VII - ShowPic by PVII to open the interface.
- Browse to the full size image that you wish to display.
- Select the associated P7ShowPL Layer from the Layer Name list.
- Click OK to apply the behavior.
Apply a Return False to each Event
To ensure that the scripts fire consistently, you should apply a return false to each onClick event. If you are not sure how to do that, our Return False Fix command will do it for you automatically. Go to our Extensions page, download and then install the Return False Fix. Close and then restart Dreamweaver after installing.
- Choose Commands--> Studio VII--> Apply Return False Fix by PVII
- Click Apply
Modifying an existing ShowPic behavior
- Select the thumbnail or link that contains an existing ShowPic behavior.
- Double-click the ShowPic by PVII event in the Behavior panel to open the ShowPic interface.
- Change the image and/or Layer selection.
- Click OK to apply the revised behavior.
The Interface:
The ShowPic interface allows you to select a full size image and presentation Layer.
Image Path: Click the Browse button to select the fullsize image that you wish to display. The "Select Image Source" dialog box will open. Navigate to the fullsize image and click the Select button. This image will be loaded into the selected P7ShowPLX Layer, replacing the placeholder image already there
Layer Name: Choose from a listing of all the ShowPic Layers currently on the page. The fullsize image you picked will load into this layer (replacing the placeholder) and the layer will become visible while all other ShowPic layers are hidden.
ShowPic | back to main listing