Shadowbox3b

Adobe Dreamweaver Exchange

http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1880023

Shadowbox3b

By ITLogic

Shadowbox3b is a freeware that can be downloaded from the Adobe Exchange. This is a simple walkthrough of how to use it.

Installing Shadowbox3b in Dreamweaver CS4:

1) Click on download. If you are not logged in to Adobe, you will need to do so now.

2) Open Adobe Extension Manager CS4.

3) Click Install.

4) Select the file Shadowbox3b.mxp.

5) Open Dreamweaver CS4. If it was already open, you will need to quit and reopen it.

Using Shadowbox3b in Dreamweaver CS4:

1) Click on Shadowbox3b in the Insert Menu (ITLogic > Shadowbox3b).

2) Go to the source code of the HTML document. Find the following code:

<a id="shadowbox3b_1" onclick="shadowbox3b_1();" href="#">Link object that opens shadowbox goes here</a>

The only thing you should change in the code is "link object that opens shadowbox goes here"

4) Go back to the source code of the HTML document. Find the following code:

// BeginWebWidget Shadowbox3b

function shadowbox3b_1(){

Shadowbox.open({

content: '<div id="welcome-msg">Welcome to my website!</div>',

player: "html",

title: "Welcome",

height: 350,

width: 350,

gallery: ""

});

};

// EndWebWidget Shadowbox3b

5) This code is the base of the shadowbox action. The content can be any of the following:

- text

- image

- video

- flash

- web pages

- and some others which will be explained in later posts

The player can be:

- "swf"

- "flv"

- "wmp"

- "iframe"

- "html"

- "qt"

- "img"

- and again, some others which will be explained later

The title will be displayed in the top left corner of the shadowbox. The height and width are the size dimensions of the shadowbox (in pixels or percent).

6) Change what you want to change, then save the document.

Congratulations, you've just created your first shadowbox. When uploading to a server, make sure you include the scripts folder. Please realize that I am in no way stating that I have created this code. I am just further explaining how it can be used.