Need help getting started with GreyBox

alicia1234
alicia1234 used Ask the Experts™
on
I know php but I don't know Javascript. I'm trying to use GreyBox. I am having no luck just trying to duplicate one of their examples. It's as if GreyBox isn't even there.

My directory structure is:
greyboxtest.php is in root

greyboxtest.php
lib
   greybox
      AJS.js
      AJS-fx.js
         etc ..

The only files I loaded into my website from the GreyBox extracted files was the "greybox" directory. Do I need to have all those other files too?

Confused about how I should be specifying the src's. The installation instructions said to set the GB_ROOT_DIR and I did that. But they didn't say anything about appending that to the other included scripts but I don't see how it could work without it!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Grey Box Test</title>
<script type="text/javascript">
    var GB_ROOT_DIR = "/lib/greybox/";
</script>
<script type="text/javascript" src="/lib/greybox/AJS.js"></script>
<script type="text/javascript" src="/lib/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="/lib/greybox/gb_scripts.js"></script>
<link href="/lib/greybox/gb_styles.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<a href="http://google.com/" onclick="return GB_showCenter('Google', this.href)">Visit Google</a></body>
</html>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
the file is looking in a folder called ="/lib/greybox
if you only put the folder /greybox - that would be why its not working.
is there an unpack command or install command in the greybox?  I suggest you put the files
in the lib folder, with a sub folder of greybox:

lib/greybox/AJS.js
lib/greybox/AJS_fx.js
lib/greybox/gb_scripts.js
lib/greybox/gb_styles.css
checkout:
http://apan.net/tools/grey/installation.html
its seems its up to you where you put grey box but you may statei it
1.Append following to your header section (in between <header>...</header>). 
GB_ROOT_DIR is the URL where static files are located: 
<script type="text/javascript">
    var GB_ROOT_DIR = "http://mydomain.com/greybox/";
</script>
GB_ROOT_DIR should be absolute. 
2.Append also following scripts and one stylesheet: 
<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" />
AJS_fx.js is optional, it's used for effects. If you don't wish effects, then don't include AJS_fx.js in your header section. 
3.That's it, you are now ready to use GreyBox! 

Open in new window

in the example I've mentioned the greybox files are in the folder greybox
the GB_ROOT_DIR should be the absolute path  GB_ROOT_DIR = "http://mydomain.com/greybox/";
note the javascript src point to the same path...
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
the structure is /lib/greybox/AJS.js just as you suggested.

Author

Commented:
Yes, I know what the installation said and that's what I tried to do and it didn't work.. So here's what I originally had, and you'll see it's what you said, but it's not working. thanks.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Grey Box Test</title>
<script type="text/javascript">
    var GB_ROOT_DIR = "http://localhost/generousportions/";
</script>
<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<a href="http://google.com/" onclick="return GB_showCenter('Google', this.href)">Visit Google</a></body>
</html>

Open in new window

this is wrong...
var GB_ROOT_DIR = "http://localhost/generousportions/";
is your website on your machine?  it would be easier to have a real website
or just try var GB_ROOT_DIR = "/generousportions/";

and you have uploaded thefolder greybox and in that folde there are the files?
maybe try...

<script type="text/javascript" src="/greybox/AJS.js"></script>
<script type="text/javascript" src="/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="/greybox/gb_scripts.js"></script>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" />
</head>

Author

Commented:
OK. I started over and mimicked the structure in the distribution files using the examples there.

I got the following code to work.

My directory structure is:

/lib/greybox/AJS.js
/lib/greybox/AJS_fx.js
/lib/grebox/gb_scripts.js
...etc

greyboxtext.php is in the /lib directory.

Now read my next post.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Grey Box Test</title>
<script type="text/javascript">
    var GB_ROOT_DIR = "./greybox/";
</script>
<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<a href="http://google.com/" onclick="return GB_showCenter('Google', this.href)">Visit Google</a></body>
</html>

Open in new window

Author

Commented:
Please refer to just previous post. So I had it working.

Then I moved the greyboxtest.php file up one level to my root, and let Dreamweaver update the urls.

See posted code.

I do get the grayed out background and the small 500x500 window displaying in the center BUT the center window is saying "The page cannot be found".  Why on earth would this be happening?




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Grey Box Test</title>
<script type="text/javascript">
    var GB_ROOT_DIR = "./greybox/";
</script>
<script type="text/javascript" src="lib/greybox/AJS.js"></script>
<script type="text/javascript" src="lib/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="lib/greybox/gb_scripts.js"></script>
<link href="lib/greybox/gb_styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<a href="http://google.com/" onclick="return GB_showCenter('Google', this.href)">Visit Google</a></body>
</html>

Open in new window

Author

Commented:
Got it to work. Had to change GB_ROOT_DIR to "lib/greybox/". Note that "/lib/greybox" gave the same page not found. Not really sure why, but "lib/greybox" works.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Grey Box Test</title>
<script type="text/javascript">
    var GB_ROOT_DIR = "lib/greybox/";
</script>
<script type="text/javascript" src="lib/greybox/AJS.js"></script>
<script type="text/javascript" src="lib/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="lib/greybox/gb_scripts.js"></script>
<link href="lib/greybox/gb_styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<a href="http://www.google.com/" onclick="return GB_showCenter('Google', this.href)">Visit Google</a></body>
</html>

Open in new window

well line 15 doesn't correct
try:
<a href="http://google.com/" title="Google" rel="gb_page_fs[]">Launch google.com in fullscreen window</a>
or use an image.......
<a href="greybox/salt.jpg" rel="gb_imageset[nice_pics]" title="Salt flats in Chile">
   <img src="greybox/salt_thumb.gif" />
</a>
ok ignore my last post then :-)
 - I tihnk when you move it to a website it may need the full domain there...

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial