PDA

Click to See Complete Forum and Search --> : experienced greybox users: help

GoverNment
08-06-2008, 11:59 AM
Hello, i'm trying to install greybox to my website for photo album, could anyone please tell me what i need to change in the code? and do i need to download or upload anything into my files on the website besides my pictures?

http://orangoo.com/labs/GreyBox/?referrer=free-css.com
GoverNment
08-06-2008, 03:08 PM
hello, i downloaded it and now i got all the codes, but i dont know where to put the AJS im not to familar with it so any help is greatly!!! appreciated
LeeU
08-06-2008, 04:57 PM
There is a forum and a discussion list over on the GreyBox site. It should provide the help you need. If not, give the specific problem you are having and we'll see what we can do.
GoverNment
08-06-2008, 05:25 PM
oh sorry, i'll have to go check out thier forum, sorry
LeeU
08-06-2008, 07:39 PM
No problem. We're always willing to help. I just figured they would know more about what you're asking.
GoverNment
08-12-2008, 08:17 PM
hey, i posted for help on the greybox forums, haven't got much advice.

so i'm going to give it a shot here. What i need to know is how to get the thumbnails showing and how to get the effects going once a photo is open
LeeU
08-13-2008, 09:21 AM
You're going to need to give a bit more explanation. What do you mean by "thumbnails showing" and "getting the effects going"?
GoverNment
08-13-2008, 07:24 PM
sorry for the lack of detail...what i mean is when i downloaded all the greybox codes for the image gallery im confused with what to use and what not to use. So i want to get the image thumbnail to appear and so when you click the thumbnail it opens in the greybox and has the effect of next picture and previous picture with the caption of it.

hope this is easy to understand
LeeU
08-14-2008, 11:52 AM
im confused with what to use and what not to use.
According to the FAQ (http://orangoo.com/labs/GreyBox/FAQ/):
"You only require the greybox folder inside the greybox folder for functionality, the other files are source files and documentation."

So i want to get the image thumbnail to appear and so when you click the thumbnail it opens in the greybox and has the effect of next picture and previous picture with the caption of it.
You can find that info here (http://orangoo.com/labs/greybox/normal_usage.html), under the heading: "Showing a group of images".
GoverNment
08-14-2008, 12:35 PM
According to the FAQ (http://orangoo.com/labs/GreyBox/FAQ/):
"You only require the greybox folder inside the greybox folder for functionality, the other files are source files and documentation."


You can find that info here (http://orangoo.com/labs/greybox/normal_usage.html), under the heading: "Showing a group of images".

oh, i completely missed the faqs thanks alot, and for the set of images it has

"<a href="URL" title="CAPTION" rel="gb_imageset[NAME]">HTML</a>
<a href="URL" title="CAPTION" rel="gb_imageset[NAME]">HTML</a>
"
for the syntax what is the [NAME] Mean?
LeeU
08-14-2008, 01:14 PM
It's the name you give to the image set, as shown below, from the example:

<a href="static_files/salt.jpg" rel="gb_imageset[nice_pics]" title="Salt flats in Chile">Salt flats</a>
<a href="static_files/night_valley.jpg" rel="gb_imageset[nice_pics]" title="Night valley">Night valley</a>
GoverNment
08-15-2008, 09:43 AM
It's the name you give to the image set, as shown below, from the example:

<a href="static_files/salt.jpg" rel="gb_imageset[nice_pics]" title="Salt flats in Chile">Salt flats</a>
<a href="static_files/night_valley.jpg" rel="gb_imageset[nice_pics]" title="Night valley">Night valley</a>

oh okay so it's like an album name, got it. thanks alot.
GoverNment
08-15-2008, 06:50 PM
still, having problems, i'm not sure if i'm missing out on something or what, but this is what i have on my test page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Greybox</title>

<script type="text/javascript">
var GB_ROOT_DIR = "/greybox/";
</script>

<script type="text/javascript">var GB_ROOT_DIR = "/assets/files/greybox/";</script>
<script type="text/javascript" src="/greybox/AJS.js"></script>
<script type="text/javascript" src="/gb_scripts.js"></script>
</head>
<body>

<style type="text/css">
#GB_overlay {
background-color: #000;
position: absolute;
margin: auto;
top: 0;
left: 0;
z-index: 100;
}

#GB_window {
left: 0;
top: 0;
font-size: 1px;
position: absolute;
overflow: visible;
z-index: 150;
}

#GB_window .content {
width: auto;
margin: 0;
padding: 0;
}

#GB_frame {
border: 0;
margin: 0;
padding: 0;
overflow: auto;
white-space: nowrap;
}


.GB_Gallery {
margin: 0 22px 0 22px;
}

.GB_Gallery .content {
background-color: #fff;
border: 3px solid #ddd;
}

.GB_header {
top: 10px;
left: 0;
margin: 0;
z-index: 500;
position: absolute;
border-bottom: 2px solid #555;
border-top: 2px solid #555;
}

.GB_header .inner {
background-color: #333;
font-family: Arial, Verdana, sans-serif;
padding: 2px 20px 2px 20px;
}

.GB_header table {
margin: 0;
width: 100%;
border-collapse: collapse;
}

.GB_header .caption {
text-align: left;
color: #eee;
white-space: nowrap;
font-size: 20px;
}

.GB_header .close {
text-align: right;
}

.GB_header .close img {
z-index: 500;
cursor: pointer;
}

.GB_header .middle {
white-space: nowrap;
text-align: center;
}


#GB_middle {
color: #eee;
}

#GB_middle img {
cursor: pointer;
vertical-align: middle;
}

#GB_middle .disabled {
cursor: default;
}

#GB_middle .left {
padding-right: 10px;
}

#GB_middle .right {
padding-left: 10px;
}


.GB_Window .content {
background-color: #fff;
border: 3px solid #ccc;
border-top: none;
}

.GB_Window .header {
border-bottom: 1px solid #aaa;
border-top: 1px solid #999;
border-left: 3px solid #ccc;
border-right: 3px solid #ccc;
margin: 0;

height: 22px;
font-size: 12px;
padding: 3px 0;
color: #333;
}

.GB_Window .caption {
font-size: 12px;
text-align: left;
font-weight: bold;
white-space: nowrap;
padding-right: 20px;
}

.GB_Window .close { text-align: right; }
.GB_Window .close span {
font-size: 12px;
cursor: pointer;
}
.GB_Window .close img {
cursor: pointer;
padding: 0 3px 0 0;
}

.GB_Window .on { border-bottom: 1px solid #333; }
.GB_Window .click { border-bottom: 1px solid red; }

</style>






<script>
insertCode(
'<a href="http://static.flickr.com/119/294309231_a3d2a339b9.jpg"\n'+
'onclick="return GB_showImage(\'Flower\', this.href)">Test image one</a>'
);
</script>

<h4>Example rendered:</h4>
<a href="http://diberadin.com/images/new/orange.jpg" onclick="return GB_showImage('Flower', this.href)">Test image one</a>





<script>
insertCode(
'<a href="http://static.flickr.com/119/294309231_a3d2a339b9.jpg"\n'+
'onclick="return GB_showImage(\'Flower\', this.href)">Test image one</a>'
);
</script>


<a href="www.diberadin.com/images/new/orange.jpg" title="CAPTION" rel="gb_imageset[test]">show image</a>
<a href="URL" title="CAPTION" rel="gb_imageset[test]">won't work</a>




</body>
</html>


still not working on :mad: http://www.diberadin.com/greybox.htm
LeeU
08-18-2008, 02:14 PM
Try using the styles as a separate sheet, as shown in the directions.


Also, try putting all of your files GreyBox in the same directory, including the style sheet:
<script type="text/javascript">
var GB_ROOT_DIR = "/scripts/greybox/";
</script>

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