GreyBox 5

Nice. My suggestion to you would be:

Restrict scrolling so that it can't happen. It messes up stuff your looking at and it also makes the script look incomplete because as you scroll the darkened window will "jump."

Also maybe add in address bar support?

Otherwise very nice!

Hi Steve

The scrolling of the darkened window is actually a design choice (not a bug :]). It's pretty hard to disable scrolling smartly, but I will look into this issue.

I won't add an address bar, I don't think it is that useful.

Kind regards,
Amir

Hmm I just thought about this...

Grey box is definitely a great platform. A spin off product of it might be like a virtual pop-up desktop/screen. All that would need to be done would be add drag and drop support, and multiple windows, and possible more "gadget" type widgets.

Just a totally random idea - throwing it out there.

Steve:
Great idea. One could make something like Dashboard. I don't know how useful it would be, but it would be quite cool.

I like the arrows at the top used for navigation. I can't really think of anything to change/improve except for maybe navigating with the arrow keys (but that's just something to code if you're really bored - I haven't seen it implemented anywhere on the web).

greetings,

Alex

Hi Alex

Using arrows for navigation is an excellent idea and I have added it to my todo list. I also like the top navigation :)

Thanks for the suggestion.

I would like to see more comments from other people.

Take a little time and answer these questions:

What do you like about GreyBox?

What do you hate about it?

If you could add one thing to GreyBox, what would that be?

What do you like about GreyBox?

It gives you a "Mac-like" focus window that prompts the user in a friendly way. GreyBox is simple enough to implement just about anywhere where you want to draw attention to the user.

What do you hate about it?

Can't think of anything right now that is bad. Javascript experts probably could say something about the code(there are always those type of people) ;) but I think it's about as conform as it's going to get. The include files (along with the effects file) do take up several hundred lines - but that is okay since it's also used for other interestign AJS stuff.

Things I would add if I could program better:

I showed this to a colleague today and the first thing he said was "can you make it so that it shows the URL of the page you are flipping through on the top of the black bar?" So if you have amix.dk loaded it shows "amix.dk" on the menu in the middle somewhere. Maybe there is a way to add an argument at the end of the code that toggles this on and off??!?

The ability to change the fade color would be awesome. This should also be an argument at the end of the code if possible.

In the example "website in fullscreen mode" there should be a way to close the window with "c" on the keyboard(or some combination). If you press "h" (for help) it should draw a div on the bottom of the content window with the keyboard shortcuts listed.

Other possible keyboard actions:

"z" for zoom - to zoom to 98-99%(100%?)

"o" for overview - if you have for example 20 pictures it zooms out and shows you a preview of the image and if you click the image it zooms back.

"f" to view the file information (type, size, create etc.)

Make it so that at the end of the code there is another additional "block of arguments" for cool features - for example:

show url, fade color, toggle keyboard actions on/off

so basically

[y, #f00, n]

Hi again Alex

Damn, you sure got lots of ideas - thanks for taking time and writing about them!

It's actually already pretty easy to change the fade color - it's done through CSS.

My idea is also that people can easily customize GreyBox design through CSS. It's also pretty easy to extend functionality since I use a smart "class" design. Actually, GreyBox 5 is almost a framework for creating kick-ass pop-ups :)

Could you maybe give me an example where it would be useful to know the URL of the page in GreyBox?

Kind regards,
Amir

Amir,
I just checked your drag-n-drop examples and they all have an error.

Situation:
Instead of dragging, try simply clicking on the dragable layer. It will give you a JS error. Any idea why?

PS: if you do dragging, everything works, but clicking does not.

:-)
Arthur

Amir,
after further review I got the fix for the problem.

solution:
when you use the AJS.hideElement, you should make sure that the element actually does exist. Simply check if the args in "var args = AJS.flattenList(arguments)" actually has at least one element.

hope that helps!

:-)
Arthur

Nice !

Once again, you've pushed the limits. I definitely like this new version of greybox.
That'll look nice in Skeletonz

Rgds,
Fred

Arthur:
Thanks. The bug is now fixed and a new version 3.52 of AJS is released. Next time it would probably be more effective to mail me the bug.

Fred:
I don't know if you noticed, but I have integrated GreyBox 5 into Skeletonz. Anyway, your gallery plugin is going to be kick ass :]

On a side note:
GreyBox 5 is actually sort-of backward compatible.

@amix: I figured out the fading color stuff in the css file - it was a bit late in the night and my brain shut off ;)

>Could you maybe give me an example where it would be useful >to know the URL of the page in GreyBox?

As my colleague said "Imagine if you have a website that contains a collection of all your web projects and you want to display the site(s) and URL(s) at the same time without switching away from the main site".

I'm not too sure if it would be useful or make sense, but I thought I'd share this with you.

It would be cool if the closing animation of "Launch google.com in fullscreen window" would not fade out but instead "go up" like in OSX AND fade out at the same time.

I know this is nit-picking but I'm all out of ideas. ;)

Alex:
I think I will implement URL shower as showcase for how powerful/customizable GreyBox really is.

I could add more wild animations, but I really _hate_ animations that aren't hardware powered.

Anyways, thanks for sharing your ideas.

Is it me or does the script actually break Firefox's "back" button?

Do this: navigate to http://orangoo.com/labs/GreyBo... Fso that it's not the first link opened in the browser. The click on any of the demos. Close the demo & try to use the "back" button. Nothing happens in Firefox 2.0

Mark:
Whoa, I get the same result. I will try to solve this.

Thanks a lot for the report.

Any tricks on how to update a field in the darkened window when user selects/write something in the active child window field. I was using a popup window to do that but GreyBox is such a nice way to display popups..I am using window.opener.document.forms[0].owner.value = "some value";
to populate the parent windows field.
Any help from anyone would be appreciated.

Hello there, your script is looking good! I particlarly like the fact that the navigation (next, previous, close and caption) are on fixed places (instead of the standard original Lightbox script) and not constantly reloaded between images.

I've been looking for Javascript lightbox scripts to use for my new illustration portfolio and one thing I notice in many scripts I've found, is that none of them standardly features direct link URLs to the popped-up large images. I'd like to make it possible for visitors to direct link to the portfolio page with a specific image already enlarged, instead of them rightclicking the large image, and directly linking to the image.

The only javascript gallery I've found capable of doing this is footoo: http://www.maxkiesler.com/foot...
If you click a thumbnail there, the large image gets this URL http://www.maxkiesler.com/foot...
instead of http://www.maxkiesler.com/foot..., or just the same URL.

Here are two other scripts that I like:
- http://www.digitalia.be/softwa...
- http://vikjavev.no/highslide/ (creator answered that creating direct link URL is possible, but I haven't tried it yet)

What I like about it:
- Easy to use
- Supports iFrames
- Looks pretty
- Love that there is time spent on making it lightweight

What I dislike:
- The scrolling/background skipping issue makes it feel "cheap". I don't think that feel is worth the benefit of being able to scroll a blackened-out window. Other scripts seem to be able to disable the scrolling:
http://particletree.com/exampl...

- Wish it used prototype because it's so common nowadays (every rails app uses it) instead of requiring an additional javascript library (AJS).

One more thing I dislike, which is likely going to force me to have to leave it, is the lack of backward compatibility with each upgrade.

The APIs change fairly dramatically, totally breaking all of the code I've written to manipulate greybox for my specific needs. I'd much prefer to work with a library that provides a consistent API over time, deprecates methods if they're going to be phased out, etc. The newest upgrade seems so different (added files, changed filenames, removed static methods, init calls, etc) that this may be my cue to find a more stable/consistent library to base my project on.

With the talk of greybox being a "platform" are there any plans to put some formality around the API so that people can build on this platform with a reasonable expectation that there will be API consistency from release to release?

Hi,

I have seen greybox in action and I think it is really cool, however I cant get it to work on my site. Is there a support area anywhere that I can go and try and figure out why?

I dont really understand, it all looks so simple - I guess its just me!

Matt

Great work here! I've got the thing going already and it is nice! Thanks for the script.

Two things... I'm seeing a strange jump in the page in IE7 when the page loads which may be the scrolling thing mentioned before. (works fine in Firefox)

And also in IE7, the bar at the top in the gallery version or single image version goes off the edge of the page making it have an auto scroll bar and the close graphic is barely in view.

Where is the size handled for the bar?

Figured it out, I believe. It seems that IE7 is having an issue with the padding in the CSS section ".GB_header .inner" in relation to the left side padding. For simplicity I deleted both the left and right and now the button is on the screen albeit nailed to the right edge of the browser window but...

Congrats on the new release of greybox

What i like
-create a nice alternative to popups
-image gallery & now even a link galery
-easy visual customize through css
-its now non obstrusive
-small

what i dont like
-the scrolling issue

suggestion
-for the gallery maybe you can create some sort of menu bar to navigate as an alternative to the next/prev button
-add an option to enable scrolling as noob user like me cant do it by ourself

BUT

I'd say your work is very inspiring and I would like to thank you for releasing this project to the public and i really appreciate all your work
Thank you very much

Great job Amix !! I really like your work

For your own convenience, I found a little bug with IE7, may not apply with previous version of IE ( don't know didn
t test it).

Here is the bug, if you have a text input control and a thumbnail(powered by greybox) on the same parent window, clicking on the thumbnail to enlarge the picture in its layer and then closing it, will prevent you to regain access to the input control...In other words, once you close a greybox layer, you can not write in the text input form element anymore.

Keep up with the good job.
Starbuck

I am sorry that you had to wait some days on your replies. I have been very busy.

Jim:
One can use parent.parent from GreyBox windows.

Framboos:
Interesting. Thanks for the idea, I will see if I can implement something similar.

Tom:
LighBox Gone Wild does not disable scrolling. Or any other scripts for that matter. And there is a reason for this: If you disable scrolling (overflow: hidden), the browser automatically scrolls to the top.

API has changed only a TINY bit. The only thing that has changed is GB_IMAGE_DIR is changed to GB_ROOT_DIR. You can still use the old API functions. So I don't understand your issue.

Matt:
I will create a Google group in the near future.

Kyle:
I haven't tested in IE 7, but I will now that I got a MacBook :)

nijai:
Thanks :) And I have notified your feature request.

Starbuck:
Thanks for the notification, I will fix IE 7 problems after 15. dec.

Hi Amir, congrats for that apply which is great !

I made up a blog where people can watch videos with a flash video player. The video are displayed in small size, like 300x400 px.

They can clic to a link just below each video and open a "fullscreen" view of the video, thanks to the Greybox. It enables them to not open a new window in their web explorer, and I think it is great.

However, I have an issue with it. When the Greybox launches, it replaces the flash movies in the background by a blank space, and whenever you clic on 'close' on the greybox, the blank spaces are not replaced back by the tiny flash videos. All you can do is refresh the page to see the small flash video again.

I tried to play with the "vmode" inside tags, it doesn't work. Any idea ?

Thanks.

Hmm... can't seem to get the grey background and elements to load. Everytime I click the link I created for Greybox, it just opens the object against a white background. What am I doing wrong?

Paul:
Your GB_ROOT_DIR isn't set properly.

Hi Amix,

I really like your greybox window.
We've started a new project at the university using your greybox window for input forms like registration and so on. We are also using the wicket-framework, which is quite powerful. But we are figuring some problems closing the window. Is there any possibility to put a close link in the content of the window? Or to add the function to the onSubmit method? Or am I totally blind not to see it...

Thanks for support!

Frozone

Frozone:
From a page inside the GreyBox you can use following to close the window:

<a href="#" onclick="return parent.parent.GB_hide()">Close GreyBox</a>

hi amix,

great work!

is it possible to put the window focus on the content of the grey box?
i am having trouble with a login page (FF works great, only IE7).
When i enter the username and password in ie7 it wont log in.
Must have something to do that the page is not foucused.
I am a noob so sorry for bothering you.

Thanks for you support in advance.
greetings from germany
robert

Thanks for a very good and appealing script!

Only problem is that it triggers the protection bar in IE7 on default IE7 settings -and that is a problem. Most novice users wont dear to allow content (or understand what the problem is in the first place) and simply wont be presented the greybox at all.

Any idea what exactly triggers the IE7 ?

I feel i have to add a comment to my previous post regarding IE7 and protection bar.
It seems that when i am running the demo html files locally on my computer -this triggering is true. When i uploaded it to my server and tested it from within a php file on http -it does not trigger any IE7 protection.

Note:
the window close command (as mentioned a couple comments up) /onclick="return parent.parent.GB_hide()"/ completely crashes Opera 9.0 (..the only Opera i have tested) and is forcing Opera to shut-down and restart.

Any Fix?

Dear Amir,
thank you very much for your great job.

I like your stuff very much. It's easy and nice.
I have small problem with images loaded through greybox.
When I load some picture in overlay I can see small white dots, which I have no in original picture.
Here you can see the original image:
http://www.igga.ru/galleries/m...
it's clear, but here I've some "bugs" (4th image):
http://www.igga.ru/galleries/m...
Can you help me to fix this?

With the best regards from snowy Moscow,
IggA

Super interface - I am working on adding it to my site :)

I have an issue with the focus when loading Google.com.
To test, please open the http://orangoo.com/labs/GreyBo... address using IE and click on any of the "Launch Google.com..." links.
My IE will croak with "Can't move focus to the control..." when Google's javascript will try to set to focus to the search box using function sf() {document.f.q.focus();} .

Firefox doesn't complain, but still the caret is not positioned in the search box.

I know this might be too much to fix for technologies that weren't actually built from the start to support such super web interfaces, but.. if that wouln't be too hard, it would be great to have a fix for this.

Thanks :)

Dear Amix,

Is there any chance the problem with the back button under Firefox 2.0 is solved? I am using your wonderful Greybox here :http://www.mcomproperties.com/detalles.asp?ref=ZD0004805H (click any image) but if it doesnt work we will need to get back to nada :(

Kind regards,
-- Carlos

I am also keen to know about the back button problem in FF 2.0. I really to have this fixed or I'll unfortunately have to consider another script.

On another note, is there anyway to provide a link within the greybox popup that will close the popup and then change the url on the main page? With a normal popup window I simply use:

javascript:window.opener.location.href='www.example.com'; window.close();

Thanks for any help with either of these.

Adrian

I think another great feature would be for users to be able to move the box somewhere and go back to access the main page. I am starting to think that maybe I really just need to use a standard browser popup window.

Thanks,
Adrian

One problem solved - a simple javascript:top.location.href='http://www.example.com'; does the trick - even automatically closes the greybox window.

One problem solved - a simple javascript:top.location.href='http://www.example.com'; does the trick - even automatically closes the greybox window.

This is absolutely fantastic....great work and thanks for sharing. has anyone been able to use this out of flash? That would be the ultimate for this user anyway.

Hi there,
First of all i love the greybox!!

Also one question, is there a way to use it with flash buttons?
To open a greybox window?

on(release){
.....
}

Thanks!!
robin

Hi, Thank you for all the work that has gone into this great mod - it's very much appreciated!

Is there any way to use a submit button (in a form which is displayed within the GB window) which will submit a form and also close the GB window? I have tried to use the following which closes the form but leaves the (blank) window open:



Thanks again.

whoops - sorry!!!

here is the code:


input type="submit" value="Update" onKeyUp="return parent.parent.GB_hide()"


I want to close the GB (GB_hide() and refresh the parent window at the same time. I can't figure out how to do it. Any suggestions? Thanks!

Problem with flash video in greybox-

I am trying to use greybox to show Flash videos using one of the standard .flv player control sets. When I click on one of the buttons on the player, part of the control bar disappears. I am using SWFObject to load the .swfs. This problem only happens when the pages load inside greybox, and I have only encountered it on Firefox (newest version) on a Mac. Safari works fine. Any ideas?

Oops -

Mean to post the link for my last comment. Page is here:

http://integritive.com/clients...

click on the first video link to see my problem.

-Thanks

I couldn't implement Adrian's fix from last March to solve FX 2.0 broken back button problem. I inserted the code top.location.href=top.location; after line 37 in gb_scripts.js (Greybox 5.5) but it didn't help. The back button remains broken. Any suggestion?
By the way, this Greybox is just great!

Unused, You can close the greybox window and refresh the parent by using the following, instead of that listed above:

<SCRIPT>parent.parent.location.href="parent.html";</SCRIPT>

I was looking to do the same thing until this dawned on me.

Good Script but not croww browser.
Persist problem with IE and not solve !

Hi! I like greybox a lot, but I'm also having the same problem as Igga. When opening some images they appear with little white dots over them! It just happens in IE. The image is OK as saving it you get it without the dots. The problem is just when displaying it in the iframe.

It seems that something is over the image... ¿Any idea?

Anybody find a work around to the flash bug noted by gflogic and other?

Has anyone found a solution for the FLASH-FIREFOX bug. Im calling a greybox window from flash, but greybox can't sit on top of the flash movie, its like if both are fighting to stay on top. I've found a link to a possible solution
(http://dolbex.com/index.php?/archives/101-Lightbox,-GreyBox,-ThickBox-Firefox-Flash-Errors.html)

But I dont get it where to place the line: onClick":"makeVisible('flashmovie')"

Any ideas?? solutions??

Is there a way to use Grybox on Submit button? Submit button does not have rel attribute. How can I submit the page first to see my selected value in 2nd page using grybox?

How can I submit my form first before my href launches new popup window using rel="gb_page_fs[]".

Also, Is there a way to launch new page using Greybox with Submit button than just HREF? Please help if anyone has done this.

It looks like authour is doing that on click of Preview comment. Can you tell me How this is done?

Is there any progress with BACK button issue? When several times clicked on image and closing it, it still adds another entry into browser 'back' history, causing back button not to work.

Any chance to get a fix on this annoying thing?

hi, sir, I have a problem.

I use Greybox to show article, but when the article have visited, the link not change color anymore,

have any suggent to fix it?

thanks.

This css change (noted by the comment) will improve the look of the header table of the greybox window when using YUI reset-fonts-grids (or any other css which might affect table rendering). Without this change, the header will hang over the edge of the window by one pixel on either side, so it's not a big deal. Here's the fix anyway:

.GB_Window .header {
    border-bottom: 1px solid #aaa;
    border-top: 1px solid #999;
    border-left: 3px solid #ccc;
    border-right: 3px solid #ccc;
    border-collapse: separate; /* override any other styles which may cause a little funny lip on the table, like YUI's reset-fonts-grids.css */
    margin: 0;

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

greybox is great!
peace,
James

Sorry! I just screwed up your layout! Feel free to add line breaks to my long comment line in above comment.

I'm lost. I like the product and the pop up is working fine. I'm using it to open a login window. So I need it to close and load the subsequent "logged in" page in the parent
So far I've seen scripts that you can make a text link to close the window, or one that it closes a half a second after it loads. I need it to close onSubmit and at the same time log in the user.

It obviously has to be something in the popup, either in the action or the button submission?

xzcxzcz

Hi sir,
I have problem in changing the greybox title dynamically and auto sizing the greybox.

Can anybody help me!

Thanks

Anyone who has a solution for the FLASH/ FIREFOX PROBLEM like BUZZ mentioned. I have the same problem...-> http://www.hohnecker.at/deutsc... just click on one of the 6 small pics...

another thing is (flashnewbie) does anyone know how to start the greybox from a link integrated in flash?

thx and greybox is really great!

I am attempting to use greybox to edit certain parts of a form. Example, a user clicks a button, opening a greybox with several options to choose from, and then the greybox closes, populating the parent form with the selected value.

I'm not sure how to do this with greybox without creating a separate page altogether. I'd like to display a particular div in the greybox, so that it will remain inside the form of the parent page. So it would really be all one page.

Does that make sense? Does anyone know how I can do that?

Nevermind! We ended up using a custom solution instead.

I would like to group web pages together and be able the size them. I'm using a code I got from a help forum, but can't get it to work.

Here's the code:

In the head:

The html code:

 

<a href="http://www.xxlblasphemy.com" onclick="return
GB_showSizeSet(MyShowSet, 1);">Launch XXL Blasphemy Centered Fixed
Size</a>
<a href="http://www.xxlblasphemy.com" onclick="return
GB_showSizeSet(MyShowSet, 2);">Launch XXL Blasphemy Centered Fixed
Size</a> 

It just goes to the link in a new window.

I could uses the normal group function, but don't need the full screen.

For some reason, the code didn't show.
In the head:

still no head:
In the head:

Last time:

GB_showSizeSet = function(set, start_index, callback_fn) {
var options = {
type: 'page',
fullscreen: false,
center_win: true,
show_loading: false,
width: 600,
height: 500
}
var gb_sets = new GB_Sets(options, set);
gb_sets.addCallback(callback_fn);
gb_sets.showSet(start_index-1);
return false;
}

Svaka cast i hvala za Greybox.

Thank you!

I beleive greybox will be my solution to servers not supporting php to send forms from flash...
i wrote a simple html and it works perfectly, but the thing is i can't seem to get the script right for the flash. i have found this on other forums:
-enter this action script for the button:
yourButtonInstanceName.onRelease = function()
{
getURL("javascript:myFunction()");
}

-then place this java script in the header of the html holding the swf file-broken script so it can appear:
script type="text/javascript"
function myFunction()
{
a href="http://google.com/" title="Google"
rel="gb_page_fs[]"Launch google.com in fullscreen
window }
script

but it doesn't work, what am I doing wrong?

thanx

I am trying to close the greybox from the code behind using VB.NET with the followinh line:

Response.Write("")

But, it does not work.

Any Ideas how can i do this?

Thank you

I am trying to close the greybox from the code behind using VB.NET with the followinh line:

Response.Write(xxxx)

where xxxx is equal to :

script language=javascript>Return Parent.Parent.GB_hide()</script>


But, it does not work.

Any Ideas how can i do this?

Thank you

Is there any way I can load xml files in to GreyBox.

Hello,
Regarding the issue with the back button in Firefox, i think i found a solution.
First i came with this suggestion:
http://efrtw.spaces.live.com/B...

I did tweak the script a bit more, and now it seems to work fine in firefox.
Here is the new script for version 5.53:
http://myfreefilehosting.com/f...

Thank you for the great script. We are using it on

http://demo.youjoomla.com/inde...

could you try and help us with the scroll flicker?

Best regards

Hmmm...
I was (like others) looking for a solution to the blacked-out parent window scrolling, but it seems amix is too busy, or has stopped supporting/working on GreyBox for over a year now...

Has anyone been able to solve the problem?

Best regards

Solution for GreyBox appearing behind flash movie in Firefox...

http://www.communitymx.com/con...

In short (Dreamweaver)...
1. Select the Flash movie in your document in design view.
2. Choose Parameters in the Properties inspector.
3. In the Parameter column, enter wmode. In the Value column, enter opaque.
4. Save your document.

Hope that helps

Gus:
I don't know why your code is not working.
I am using this code to close on image button Click.
it is working ... may be it helps you.

Protected Sub ImageButton1_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs) Handles

ImageButton1.Click
Response.Write("")

End Sub

Response.Write(script'>parent.parent.GB_hide();</script>")

JANI! THANK YOU!!!
Works great, the back button in Firefox!

Amix,
Please don't disable the scrolling option

I have a grey box question:
I have several videos that open in grey box.
I would like to add a watermark to each video
and I don't want to reproduct each video
with the watermark.
I have created an example in "GIMP" of how I want the watermark to look.
Here is the example:
http:www.blazingplr.com/images...

Instead of going through all of the trouble of
reproducing each and every video, can I just
create a semi-transparent layer in "GIMP" and add it
to the grey box script, so that whenever
I open the grey box, no matter what is being
opened in the grey box, that layer/watermark will
always be there?
Thanks for any feedback.
E.J.

I am having an issue with greybox. I added the gb_scripts.js file to have the back button work in firefox. When I do, it doubles all of the of pictures in the gallery.

Anybody run into this problem and know of a fix?

Thanks in advance.
-Jason

i would like to show a div (which is hidden ) in the grey box popup when a button is clicked on client side

is it possible & how to do it.

please help me ...

thanks in advance
satish

Thickbox and light box both are very light.

Hello, I'd like greybox to display flash video content in a pop-up window off my main page. This works fine but how can I disable a flash mp3 player that is playing on the main page when the website user clicks the greybox link to open the flash video. What I get is both of them playing at the same time which won't work. How do I disable flash content on the main page while the popup window is open? This would be a lifesaver if I could figure it out.

thanks

Jason

Amazing work! Though after breaking my head for almost one day now, I am not able to get an element focus on the child window that Greybox opens, alert's work fine even the changing the value of that element works fine, just with focus it is having some issues, and gives me an error telling "Can't move focus... "
I have tried using AJS.AEV(.... as well but to no avail.