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

Lightshow Magic is a versatile tool. With some planning, and a few CSS hooks, it can even be hung on a wall. Let's do some home improvement!

Part 1: Overview and Setup

In this tutorial, we'll create a virtual room, with a wall on which we will place 8 empty picture frames in three groupings. Each grouping will use a separate Lightshow, with thumbnails positioned so that they fill the empty picture frames.

Before you begin

Create a new folder in your defined Dreamweaver site and name it: wallhanging.

Download the work files ZIP archive

Unzip the archive. Inside you'll find 3 folders and a workpage.htm file in the root:

Move all 3 folders and the workpage.htm file into the wallhanging folder you created.

And here are the contents of your new folders:

We've provided all the assets you need to create your Lightshows and we also included the original room images in editable Fireworks format so that you can study it and see how it relates to the finished page. Let's take a brief look at the Fireworks image before we begin.

Open Fireworks and then open wallhangings.png

Like any good decorator, we've taken all the vital measurements to ensure the frames in each of the 3 groupings are the same size and equilaterally separated. We've also noted the x and y coordinates of each grouping's top left edge. These coordinates will determine how we position our Lightshows.

Open the included workpage

Open workpage.htm, which is in the root of your wallhangings folder. The page is ready for your Lightshows. The virtual room is assigned as a background image to the wall-wrapper DIV, which is sized to the dimensions of the image and centered. There is a heading above and a footer below. The CSS styles are in the document's head.

We set a document-wide font-family, text color, background-color, margin, and padding. CSS shorthand is used for the margin, with the first value being both top and bottom, and the second value left and right.

body {
font-family: Calibri, Arial, sans-serif;
color: #CCC;
background-color: #000;
margin: 40px 0;
padding: 0px;
}

We set the background for the wall-wrapper DIV to the room.jpg image (our virtual room) and assign a width and height equal to the size of the image. Margin is set to zero top and bottom, and auto left and right—which centers the DIV. Position is set to relative, which will allow us to absolutely position our Lightshows inside.

#wall-wrapper {
background-image: url(images/room.jpg);
background-repeat: no-repeat;
margin: 0 auto;
height: 750px;
width: 1000px;
position: relative;
}

The level 1 heading is set to the same width as the wall-wrapper and centered using auto left and right margins. Top margin is set to zero and bottom margin to 6px. The rest of the properties simply size and style the text.

h1 {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.35em;
margin: 0 auto 6px auto;
color: #555;
width: 1000px;
}

The footer is set to the same width as the wall-wrapper and centered using auto left and right margins

#footer {
width: 1000px;
margin: 0 auto;
}

This rule styles the content inside the footer DIV, which is nested inside another DIV that is assigned a class of content.

#footer .content {
padding: 12px 0;
font-size: 10px;
text-transform: uppercase;
color: #555;
}

Note: Adobe is not fully compatible with the latest XP and Vista Service Packs. Trying to select folders in Adobe dialogs (not just the ones launched by our extensions but also Adobe features like the Define Site dialog) only works correctly if you select a root folder. If your target folder is a sub-folder you must manually type in the folder name when you are returned to our interface. Adobe has released to us a special Hotfix that you can install. See PVII Knowledge Base Item for Solution

Part 2: Creating the Lightshows

Now we're ready to create and position 3 Lightshows that match up perfectly to the 3 wall-hanging groups on your page.

Part 2: Creating and Positioning the Lightshows