Back to Tweaks Main | Buy Now [$95] | Lightshow Magic Home | Main Examples Page

Lightshow Gallery on the Wall

Lightshow Magic is the ultimate presentation tool plugin for Dreamweaver

See Finished Page...

Part 2: Creating the Lightshows

Now it's time to create the Lightshows and hang them on the wall in our virtual room.

All 3 Lightshows will be created inside the wall-wrapper DIV.

the first Lightshow

To make sure the insertion point is correct, establish it in your page source code.

Choose View > Split Code

Locate the wall-wrapper DIV and place your cursor on the blank line inside, as indicated by the red arrow in the screen capture below.

Create the first Lightshow

For this tutorial, we will be using the Automatic Using Fireworks Image Build Mode. If you do not have Fireworks, you can download a 30-day trial version from Adobe.

Choose Insert > Studio VII > Lightshow Magic by PVII...

The LSM interface will open

Click the Add Image(s) button

Do not change the Destination Folder. This folder is managed by Lightshow Magic and should not be changed unless you have read the User Guide and thoroughly understand how to manage it yourself.

The Fireworks Mode Image Selection dialog will open.

Set Thumbnail Size to 60

Set Scale to Fit Within to 500 x 500

Click the Browse button to the right of the Source Image Folder box and browse to the pics sub-folder inside your wallhanging folder

The Choose Source Image Folder will open

If you see a message indicating that No items match your search, ignore it. This is a Dreamweaver folder selection dialog and it is not programmed to show the files inside the folder.

Click the Select button

The images inside the pics folder are returned to the Lightshow interface.

Hold down the Shift key as you click to select the following 4 images:

Click OK

The images you selected are processed in Fireworks and added to the main Lightshow Magic interface.

Uncheck the Thumbnail Rollover option but leave all other options set to their default values.

Click OK

Your Lightshow is created and appears at the top of the wall-wrapper DIV.

Now we need to get the Lightshow thumbnails positioned so that they fit inside the 4 frames of the first wall grouping. To do that we'll use CSS to position the Lightshow and to alter the way the thumbnails look.

Create a new Style Sheet

Create a new style sheet in the source code of your workpage.htm document. To do so, locate the following 2 lines of code in the head:

<link href="p7lsm/p7lsm01/p7LSM01.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="p7lsm/p7LSMscripts.js"></script>

Make a new line below it, and create a style sheet by copying and pasting the following code:

<style type="text/css">
<!--

-->
</style>

Note: Your new style sheet must come below the link to the default p7LSM01.css file.

Position the first Lightshow

When you create a Lightshow, the system assigns an ID to the root Lightshow DIV. The first Lightshow you create is assigned the ID p7LSM_1. We'll use this ID to create a CSS rule for the first Lightshow. In the rule we'll position the first Lightshow absolutely, based on the top and left edges of the virtual room background image. We'll also set a width.

The first frame, as depicted in the illustration below, is 350 pixels from the left edge and 120 pixels from the top edge of the virtual room. Those should, then, be the left and top position values that we set for the first Lightshow. However, we want a 2 pixel matte around each frame, so we'll add those 2 pixels to the top and left values—making them 352 left and 122 top.

Each of the frames in the first grouping is 48 pixels wide, with a 12 pixel gap between them. If we want to display 2 images per row, the width of the first Lightshow should be 48 + 12 + 48 + 12 = 120. The images will display in a 2-by-2 matrix because they are, by default, floated. The third and fourth images will not fit in the first row and will wrap to a second line, which is exactly what we want them to do.

Create this new style rule inside your new style sheet:

#p7LSM_1 {
position: absolute;
left: 352px;
top: 122px;
width: 120px;
}

Don't worry about how things look in Design View yet. We have a few more CSS rules to make.

Now we'll need to make special CSS rules for the thumbnail images, list items, links, and hovered link styles. These styles will turn off borders and padding from the default Lightshow style sheet. We'll also set margins to match up with the separation between the frames in our virtual groupings. Additionally, we'll set height and width for the images to match the wall frames and a hover effect using CSS opacity.

Each frame in the first grouping of our virtual room is 48 pixels wide by 60 pixels high. Since we want a 2 pixel matte, we'll need to subtract 4 pixels from each dimension.

#p7LSM_1.p7LSM01 .p7LSM_trigs img {
border: 0;
width: 44px;
height: 56px;
}

We're very close. The images are sized and positioned correctly, but the border and padding properties from the default LSM style sheet are causing the boxes surrounding the images to be larger.

We'll fix this by adding 2 more CSS rules that will turn off borders and padding on the LI and A elements, while assigning margins to separate each image according to the separation built into the virtual frames of our wallhanging group.

We turn off padding and borders for the LI. We set margins to separate each frame on the bottom and right sides so they will match up with our virtual wallhanging frames.

#p7LSM_1.p7LSM01 .p7LSM_trigs li {
padding: 0;
border: 0;
margin-bottom: 14px;
margin-right: 16px;
}

We turn off borders on the A element. Then we set CSS opacity (and Microsoft's proprietary opacity filter) to make the images 20% transparent. The opacity is, of course, optional. But we like the effect, which will become apparent once the next rule is added.

#p7LSM_1.p7LSM01 .p7LSM_trigs a {
border: 0;
opacity: .80;
filter: alpha(opacity=80);
}

This rule sets opacity back to 100% (opaque) on hover. The effect is a subtle lighting up of the image as you hover over it with your mouse.

#p7LSM_1.p7LSM01 .p7LSM_trigs li a:hover {
opacity: 1;
filter: alpha(opacity=100);
}

Now let's see how things look.

That's better.

Create the Second Lightshow

It's all downhill from here. For this Lightshow, we're going to be using a different way of handling thumbnail images. Instead of setting a fixed size for the images, we're going to let them be their natural size—but then we're going to set a height and width on the A element and set overflow to hidden, thereby cropping them to fit in our virtual wall frames.

Let's create the second Lightshow.

Establish an Insertion Point for the Second Lightshow

Each of the 3 Lightshows need to be inside the wall-wrapper DIV. You need to make sure that your insertion point is inside wall-wrapper and comes after the first Lightshow DIV. We'll do that by going into Code View and using Dreamweaver's Tag Selector bar to select the root DIV for the first Lightshow, which is p7LSM_1.

Place your cursor anywhere inside the <div id="p7LSM_1" class="p7LSM01"> tag.

On your Tag Selector bar, which runs along the bottom of your Dreamweaver window (just above the Property Inspector), click the <div.p7LSM01#p7LSM_1> tag.

The entire DIV will highlight in blue.

Place your cursor at the end of the line containing the last highlighted </div> tag.

Press Enter (or Return) once to create a new line.

This is your insertion point for the second Lightshow (as marked by the red arrow).

Stay in Code View. With your cursor on the new line, open the Lightshow Magic interface.

Choose Insert > Studio VII > Lightshow Magic by PVII...

The LSM interface will open

Click the Add Image(s) button

Do not change the Destination Folder. This folder is managed by Lightshow Magic and should not be changed unless you have read the User Guide and thoroughly understand how to manage it yourself.

The Fireworks Mode Image Selection dialog will open.

Set Thumbnail Size to 180

Set Scale to Fit Within to 500 x 500

Click the Browse button to the right of the Source Image Folder box and browse to the pics sub-folder inside your wallhanging folder

The Choose Source Image Folder will open

Browse to the pics sub-folder inside your wallhanging folder

If you see a message indicating that No items match your search, ignore it. This is a Dreamweaver folder selection dialog and it is not programmed to show the files inside the folder.

Click the Select button

The images inside the pics folder are returned to the Lightshow interface.

Hold down the Shift key as you click to select the following 2 images:

Click OK

The images you selected are processed in Fireworks and added to the main Lightshow Magic interface.

Uncheck the Thumbnail Rollover option but leave all other options set to their default values.

Click OK

Your Lightshow is created and appears at the top of the wall-wrapper DIV. Because we haven't positioned it yet, it will appear to be above the first Lightshow.

Position the Second Lightshow

The second Lightshow you create is assigned the ID p7LSM_2. We'll use this ID to create a CSS rule to position the second Lightshow based on the top and left edges of the virtual room background image. We'll also set a width.

The first frame of the second grouping, as depicted in the illustration below, is 552 pixels from the left edge and 98 pixels from the top edge of the virtual room. Those should be left and top position values that we set for the this Lightshow. However, we want a 2 pixel matte around each frame, so we'll add those 2 pixels to the top and left values—making them 554 left and 100 top.

Both frames in the first grouping are 60 pixels wide, with a 12 pixel gap between them. So the width of the Lightshow should be 60 + 12 + 60 + 12 = 144. The images will display side-by-side.

Create this new style rule inside your new style sheet:

#p7LSM_2 {
position: absolute;
width: 144px;
top: 100px;
left: 554px;
}

Now we'll need to make special CSS rules for the thumbnail images, list items, links, and hovered link styles. These styles will turn off borders and padding from the default Lightshow style sheet. We'll also set margins to match up with the separation between the frames in our virtual groupings. Additionally, we'll set height and width for the images to match the wall frames and a hover effect using CSS opacity.

Each frame in this grouping is 60 pixels wide by 180 pixels high. Since our thumbnails were set to 180 pixels, we won't set a width and height. But we will turn off borders.

#p7LSM_2.p7LSM01 .p7LSM_trigs img {
width: auto !important;
height: auto !important;
border: 0;
}

We turn off padding and borders for the LI. We set right margin to separate each frame so they will match up with our virtual wallhanging frames.

#p7LSM_2.p7LSM01 .p7LSM_trigs li {
padding: 0;
border: 0;
margin-right: 16px;
}

The images are positioned correctly, but the border and padding properties from the default LSM style sheet are causing the boxes surrounding the images to be larger, and the images are way too wide—forcing them to appear on separate lines.

We'll fix this by adding another CSS rule to assign height and width on the A element. We'll also set overflow hidden, which will effectively crop the image to fit within the dimensions we set.

We turn off borders on the A element. We set height and width to fit within the grouping's frames, which are 60 x 180. But since we want a 2 pixel matte, we'll subtract 4 pixels from each side. We then set overflow to hidden ensuring our images are constrained to the dimensions we set. Then we set CSS opacity as we did for the first Lightshow.

#p7LSM_2.p7LSM01 .p7LSM_trigs a {
border: 0;
width: 56px;
height: 176px;
overflow: hidden;
opacity: .80;
filter: alpha(opacity=80);
}

This rule sets opacity back to 100% (opaque) on hover.

#p7LSM_2.p7LSM01 .p7LSM_trigs li a:hover {
opacity: 1;
filter: alpha(opacity=100);
}

Now let's see how things look.

That's better. one more show to go.

The third Lightshow is similar to the first, but has 2 images instead of 4.

Establish an Insertion Point for the Third Lightshow

You need to make sure that your insertion point is inside wall-wrapper and comes after the second Lightshow DIV. Go into Code View and locate the root DIV for the second Lightshow, which is p7LSM_2. Place your cursor anywhere inside the DIV.

On your Tag Selector bar, which runs along the bottom of your Dreamweaver window (just above the Property Inspector), click the <div.p7LSM01#p7LSM_2> tag.

The entire DIV will highlight in blue.

Place your cursor at the end of the line containing the last highlighted </div> tag.

Press Enter (or Return) once to create a new line.

This is your insertion point for the third Lightshow (as marked by the red arrow).

Stay in Code View. With your cursor on the new line, open the Lightshow Magic interface.

Click the Add Image(s) button

Do not change the Destination Folder. This folder is managed by Lightshow Magic and should not be changed unless you have read the User Guide and thoroughly understand how to manage it yourself.

The Fireworks Mode Image Selection dialog will open.

Set Thumbnail Size to 60

Set Scale to Fit Within to 500 x 500

Click the Browse button to the right of the Source Image Folder box and browse to the pics sub-folder inside your wallhanging folder

The Choose Source Image Folder will open

Browse to the pics sub-folder inside your wallhanging folder

If you see a message indicating that No items match your search, ignore it. This is a Dreamweaver folder selection dialog and it is not programmed to show the files inside the folder.

Click the Select button

The images inside the pics folder are returned to the Lightshow interface.

Hold down the Shift key as you click to select the following 2 images:

Click OK

The images you selected are processed in Fireworks and added to the main Lightshow Magic interface.

Uncheck the Thumbnail Rollover option but leave all other options set to their default values.

Click OK

Your Lightshow is created and appears at the top of the wall-wrapper DIV. Because we haven't positioned it yet, it will appear to be above the first Lightshow.

Position the Third Lightshow

The third Lightshow is assigned the ID p7LSM_3. We'll use this ID to create a CSS rule to position this Lightshow absolutely, based on the top and left edges of the virtual room background image. We'll also set a width.

The first frame in the third grouping, as depicted in the illustration below, is 778 pixels from the left edge and 134 pixels from the top edge of the virtual room. Those should be the left and top position values that we set for this Lightshow. However, we need to factor a 2 pixel matte around each frame, so we'll add those 2 pixels to the top and left values—making them 780 left and 136 top.

Each of the frames in this grouping is 48 pixels wide, with a 12 pixel gap between them. So the width of this Lightshow should be 48 + 12 + 48 + 12 = 120. The images will display side-by-side because they are floated.

Create this new style rule inside your new style sheet:

#p7LSM_3 {
position: absolute;
width: 120px;
top: 136px;
left: 780px;
}

Now we'll need to make special CSS rules for the thumbnail images, list items, links, and hovered link styles. These styles will turn off borders and padding from the default Lightshow style sheet. We'll also set margins to match up with the separation between the frames in our virtual grouping. Additionally, we'll set height and width for the images to match the wall frames and a hover effect using CSS opacity.

Each frame in the grouping is 48 pixels wide by 60 pixels high. Since we want a 2 pixel matte, we'll need to subtract 4 pixels from each dimension.

#p7LSM_3.p7LSM01 .p7LSM_trigs img {
border: 0;
width: 44px;
height: 56px;
}

We're very close. The images are sized and positioned correctly, but the border and padding properties from the default LSM style sheet are causing the boxes surrounding the images to be larger.

We'll fix this by adding 2 more CSS rules that will turn off borders and padding on the LI and A elements, while assigning a margin to separate each image according to the separation built into the virtual frames of our wallhanging group.

We turn off padding and borders for the LI. We set margins to separate each frame on the bottom and right sides so they will match up with our virtual wallhanging frames.

#p7LSM_3.p7LSM01 .p7LSM_trigs li {
padding: 0;
border: 0;
margin-right: 16px;
}

We turn off borders on the A element. Then we set CSS opacity (and Microsoft's proprietary opacity filter) to make the images 20% transparent.

#p7LSM_3.p7LSM01 .p7LSM_trigs a {
display:block;
float:left;
border: 0;
opacity: .80;
filter: alpha(opacity=80);
}

This rule sets opacity back to 100% (opaque) on hover.

#p7LSM_3.p7LSM01 .p7LSM_trigs li a:hover {
opacity: 1;
filter: alpha(opacity=100);
}

Now let's see how things look.

That's better.

So there you have it a virtual room with virtual art controlled by Lightshow Magic and a little CSS.

Part 1: Overview and Setup