iBox
UPDATE March 11, 2008 iBox v2 is now out. Get it now!
UPDATE August 18, 2006: Just uploaded a new version (1.2.1) of iBox. Only file updated is ibox.js
UPDATE August 15, 2006: Just uploaded a new version (1.2) of iBox. Only file updated is ibox.js
UPDATED June 27: Just uploaded a new version that fixes the problems mentioned in the comments section. Please re-upload ibox.css and ibox.js
I use Lightbox (v1) on iBegin. It is a great way of loading images without reloading a page. I did have to modify it for my needs (more on that later) but it fit the bill.
Then one of my friends (Amir, who has created some wonderful stuff - read his blog) showed me GreyBox. Wonderful concept - take Lightbox, and extend it to content. This would be useful to me as on the frontpage of iBegin Toronto we use an inline popup for search tips.
Then I ran into Thickbox. A very nice implementation, it pushed the envelope further by letting you pull in a page and even specify height and width. Sheer brilliance!
Yet none fully fit the bill of what I needed. All had one common problem - they assumed JS was enabled. For example, lightbox popped an image. For a non JS user, they ended up at an image. This is where I had to modify Lightbox - a user with JS enabled saw the image properly load - a user without JS enabled was forwarded to a page that still had all the necessary navigation links and so forth. The Thickbox example for a login box was great, but again, what if JS was disabled? You ended up at a page that was rather ugly.
Furthermore, both Lightbox (v2) and Thickbox needed external libraries. And in our case (and I imagine others too), while Scriptaculous and Jquery and so forth are very nice, I really had no use for them.
And so I introduce iBox.
Some benefits of iBox:
1. Size. The Thickbox link above mentions this, but we take it even further. The total JS is under 11kb.
2. Versatility. Images, inline divs, and external HTML pages - iBox can load any of the three.
3. Support for non-JS users. Eg Login means ibox-login.html pops up for JS users, and a proper login page (login.html) for non-JS users. This was our biggest motivation in creating this - there are enough non-JS users that supporting them is important.
4. Compatibility - the script is self-contained. It won’t break if you use prototype, moo.fx, scriptaculous, etc.
I have included how to use inside readme.txt. Suffice to say that it is very easy to use.
Demo: click here
Download: click here
License: MIT Open Source. All we ask is spread the word (and let us know about any bugs).
June 21st, 2006 at 3:30 pm
Just a note: on your example for those with JS turned off, the forum login page you have as an example itself requires JS. When I clicked the link with JS turned off I got the “this page requires JS” error.
June 21st, 2006 at 3:33 pm
June 21st, 2006 at 5:17 pm
how does it handle scrolling while the overlay is up?
June 21st, 2006 at 5:27 pm
@Ryan: Yeah - I will update that page to make it more clear
@Adam: It keeps the overlay centered and follows you around. It also adds a scroll bar if the content exceeds the size of the overlay.
June 21st, 2006 at 5:34 pm
Hey, i really really think your sight looks great. It’s very clean. I am learning how to do sight design myself for a blog basically and I noticed the evoBlog link below. when i clicked on it, it gave a coming soon. Any tips/tricks you can give me. May I contact you further for some help maybe.
June 21st, 2006 at 5:47 pm
“same comment as tinus i like it had it up and running in a few minutes, and it just works.
however one of my friends( i assume i can call him a friend ;)) noticed that in safari the overlay doesn not cover the entire screen, anyone have any ideas, im going to post this on his site also, but maybe some JS guru may know a quick answer”
http://www.stylegala.com/news/public200606/1930.htm#comments
June 21st, 2006 at 5:47 pm
iBox?
Remind me of something I’ve seen on reddit yesterday.
Pretty Hilarious, check it out! Introducing the Apple iBox:
http://geeksaresexy.blogspot.com/2006/06/video-introducing-apple-ibox.html
June 21st, 2006 at 5:50 pm
Nice site. I like your layout.
What happens if the user clicks on the ‘div overlay’ with javascript turned off? Does that also redirect them to something else?
June 21st, 2006 at 5:52 pm
This is a great looking script! One question though: what’s the license? I didn’t see any indication… If you hadn’t really thought about it and aren’t very particular, I usually suggest MIT:
http://www.opensource.org/licenses/mit-license.php
It’s no nonsense and easy (”do whatever you want and just don’t sue me”).
June 21st, 2006 at 5:54 pm
@Steve: If you look at the example, we provide support for non-JS users. You can select where they go
@Kevin: Yep OS. I will update the post.
June 21st, 2006 at 5:57 pm
Steve, when testing this with JS off, only on the demo page, the div overlay link did nothing. Other than that, the degradation is perfect!
June 21st, 2006 at 6:06 pm
I’m using Firefox 1.5.0.4 on Ubuntu Dapper. When I load the first picture or the last div link the main page content jumps a few px to the left and then back again. This only happens on the first load (i.e. cache cleared).
June 21st, 2006 at 6:14 pm
I see lots of concern about people having JS turned off. Is this really an issue? I tried surfing the web with JS turned off and found it pretty painful. Any statistics on how many people turn off javascript? My thinking is that people who turn off JS probably don’t have any money and live at home with their mom.
June 21st, 2006 at 6:15 pm
is it possible to get a smoother overlay? in Opera anf Firefox i see only three steps and its lacking some kind of crossover.
June 21st, 2006 at 6:16 pm
@Phil: There are two reasons to support non-JS users:
1. We own a stats tracker on another domain. Tracking roughly 500k uniques a day, we find that 3-5% of people do not have JS on
2. JS can break my favorite habit - middle-click to open up in a new tab. This way I can middle-click if I want to and not have any odd results.
June 21st, 2006 at 6:26 pm
Here is a bug in Safari, although a bit of a rare situation. If you open an iBox image and then click the browser’s back button, followed by the browser’s forward button, the image is gone and the dimmed background is still there and the only way to get it to go away is to reload the page. Incidentally, each browser seems to behave differently in this situation.
June 21st, 2006 at 6:29 pm
Brilliantly executed. This will greately improve the usability of the sites I build. Tool tips, previews, etc. Keep up the great work.
June 21st, 2006 at 6:30 pm
Nice work. I will try it. I’ve been thinking about using it for a contact form.
June 21st, 2006 at 6:32 pm
Nice work. Can someone help me get this to work with wordpress? I dont know how to include the files correctly, I can use the demo by itself tho.
June 21st, 2006 at 6:54 pm
Nice execution to support non-JS browsers. Noticed bug in that overlay doesn’t resize with window (tested w/ FF 1.5, IE 6.0). Could this be fixed with just setting width/height to 100%?
June 21st, 2006 at 6:57 pm
Most impressive Ahmed. I’ll definately be looking at how I can integrate it into my site (I’ve held off on Lightbox integration because I understand there are compatibility issues between the K2 WordPress theme and Lightbox code). There is WordPress plugin for Lightbox I believe; perhaps someone will give iBox the same treatment?
June 21st, 2006 at 7:06 pm
Already integrating this into http://www.youpickthenews.com (click the images next to the story).
-YouPickTheNews.com
June 21st, 2006 at 7:20 pm
Try this:
* Make your window size fairly small (not maximized)
* Click on an image.. it works nicely
* Maximize the window
I think your code to set the box size should probably be called onResize?
June 21st, 2006 at 7:46 pm
This is incredible. Thanks so much for the leg work! looks great. good work!
June 21st, 2006 at 7:55 pm
What would be the best way to have the ibox appear on the page load? (w/o the user having to click something to trigger the content… they would then click to dismiss the ibox)
June 21st, 2006 at 9:00 pm
Some installation instructions would be appreciated
(and yes, my name is Ahmed too - please don’t get us confused!)
June 21st, 2006 at 9:44 pm
Browser compatibility? We’ve gotta realize that even Scriptaculous doesn’t have good compatibility guidelines… Firefox isn’t the only browser out there, and isn’t the only ‘good’ browser.
June 21st, 2006 at 9:54 pm
Hey, they’re writing about you in Wired. Congrats!
June 21st, 2006 at 11:42 pm
IE 6 bug: iBox doesn’t overlap form and plug-ins. I wish it were as simple as changing the z-index, but that doesn’t work. Here’s an article with more on the subject: http://www.brainjar.com/css/positioning/default5.asp (scroll down to Overlaping Form Controls and Plug-ins) Is there an easier/better way to solve this problem?
Very nice work Ahmed! I just gotta get around IE (as always, unfortunately)
June 22nd, 2006 at 1:06 am
I dont know if this is intended, but if you click and hold on a picture overlay, scrollbars appear around the picture. If you drag a bit before releasing the mouse button, the scrollbars will stay. This is on FireFox 1.5.0.4
June 22nd, 2006 at 2:24 am
Heya Ahmed,
Nice work there. Indeed it’s lightweight. I’ll play more with it soon.
WordPress iBox plug and play
June 22nd, 2006 at 2:49 am
Hey, is there any way to incorporate a movie in place of a picture in the overlay? Awesome coding.
~Dot
June 22nd, 2006 at 3:17 am
Excellent, the lightbox is really great!
June 22nd, 2006 at 4:29 am
Played around with it for a while and came up with this solution:
Added:
“var selectElems = document.getElementsByTagName(’select’);
for(var i = 0; i < selectElems.length; ++i) {
selectElems[i].style.visibility = ‘hidden’;
}”
(under showbg function) and
“var selectElems = document.getElementsByTagName(’select’);
for(var i = 0; i < selectElems.length; ++i) {
selectElems[i].style.visibility = ‘visible’;
}”
(under hidebg function)
Hope this helps!
also, iBox doesn’t gracefully handle resizing. any chance this will be fixed in a later release?
June 22nd, 2006 at 5:04 am
Sweet! I hacked up Lightbox to handle content the other day, but this looks much better and more flexible than what I came up with. Thanks!
- Scott
June 22nd, 2006 at 10:53 am
The big question……..does it handle flash video? I suppose i will have to test it thoroughly to see! Unless someone already has
June 22nd, 2006 at 2:36 pm
BUG
Couldn’t get it to work with a simple 1 image on a blank page. My image name was all UPPER case, and finally renaming and switching the link to lower case caused it to work.
Great script tho!!!
June 22nd, 2006 at 3:33 pm
@Peter
Re: triggering the event,
Took a little poking, but i made this method. I of course have a div id=”custom_alert” in my html.
customAlert = function(message){
var theMessage = getObject(”custom_alert”);
theMessage.innerHTML = message;
var params = new Object;
showBG();
showIbox(document.location+’#custom_alert’,”,params); // show ibox
return false;
}
June 22nd, 2006 at 5:49 pm
Mind if I port this to jquery? I like the features and implementation vs thickbox / greybox redux and would like to port it and blog about the process as an example of how to adapt code to jquery’s framework.
Email me and let me know what license it is using and whether or not my port would offend you as the original author.
June 22nd, 2006 at 8:06 pm
Is there functionality to group a set of related links like in lightbox where you click next/previous to navigate between images? I really like this implementation, but it is lacking (for my needs anyway) if this functionality is not available.
June 22nd, 2006 at 8:23 pm
nice stuff, surely Digging it.
but for people who already uses js libraries such as jQuery on a daily basis. i think it’s best to stick to what you have.
June 22nd, 2006 at 10:40 pm
Excellent! This looks great. I grabbed it, set it up on my site; within minutes it was working. Amazing… It works great for the preview shots that you want to blow up for greater detail.
Thanks a lot for this!
June 23rd, 2006 at 1:14 am
fukkin brilliant! i can see soooo many uses for this!
June 23rd, 2006 at 7:51 am
Can anyone explain why the ibox div the script creates in the onloaf event sometime shows as a white box below my page? It is as IE 6/7 sometimes shows a place holder for the div even though it is marked as display:none? Im sure the problem is directly related to ibox since when adding the script (without usng it) is adds the white space at the bottom and when removing the script reference everyting is OK
June 23rd, 2006 at 8:06 am
In the sample page, try the three images a few times… There is always a small “jump” of the content, but if you see the same image twice it works good. Some sort of caching issue?
June 23rd, 2006 at 3:07 pm
I’m normally not one to find something free and then ask for it to be improved, but I have a problem and I am so bad at client side code that it is going to take me hours to figure out.
I need to load a web page in the window that loads iframes and some other madness, but I want it to be as big as possible. Is there any way for me to do percentages for the size? Maybe there is something I could do to tell the window to come up x pixels smaller than the browser window sort of like the images do?
Anyone have any ideas?
June 24th, 2006 at 3:24 pm
Great stuff! It fits my need to a tee. But I’m having a bit of a problem…
Added the files,, rel=s, as per the readme. Works fine, BUT, there are scroll bars on the image display
. I put the same large image in your example code and no scroll bars. Can’t yet see where/why this occurs. Ideas?
Also not that the w3.org validator gives several errors for ibox.css…
Errors
URI : http://www.ibegin.com/ibox/ibox.css
Line: 13 Context : #ibox_w
Parse Error - opacity=0)
Line: 14 Context : #ibox_w
Parse Error - -moz-opacity: 0.0;
Line: 18
Parse Error - : 0.0; } #ibox_progress
I wonder if my problem is related to these?
Thanks again!
RR
June 24th, 2006 at 8:14 pm
More on the above problem. It was caused by an img margin set elsewhere in my site css. I made my style more specific and the problem when away.
Three more Safari/Mac observations…
1) The imgPreloader.height and imgPreloader.width variables appear to be read-only in Safari, so the images can’t resize.
2) The site I built does not have the Safari back button problem mentioned above. You bring up the ibox, go back, go forward and it is still there and clicking dismisses it as you’d expect. I did notice that if the scroll value is different between the two pages the ibox will move to match the page you came back from.
3) As someone mentions above, the ‘dim’ grey page overlay does not extend far enough on the right side. Looks like it might be related making room for the scroll bar? I can confirm that it appears nearly the same on Safari, Camino, and Mac Firefox. The gap appears larger in Safari.
Thanks again for a great widget!
RR
June 27th, 2006 at 6:55 pm
It fails on files with capitalized extensions. I fixed it by adding a toLowerCase() call on line 124, thus:
var urlType = url.toLowerCase().match(urlString);
June 28th, 2006 at 12:31 am
Been very busy with some work, so sorry have not been able to get back to everyone.
I have uploaded an updated version. Please re-download, and use the updated .css and .js file.
All the bugs should be fixed. If you posted a bug (or find a new one), please post it now.
@abba - sure, go ahead. Port it wherever you want
June 28th, 2006 at 1:27 am
Is there an easy way to hide Flash? The wmode method that many people describe does not work for me Firefox 1.5. I figured out how to do it out in Lightbox2 (http://www.huddletogether.com/projects/lightbox2) and posted about it at http://www.huddletogether.com/forum/comments.php?DiscussionID=124. I’m sure the solution here would be similar, but thus far, it keeps spitting errors at me about undefined properties. Any ideas?
June 28th, 2006 at 1:52 am
Solved my own question; this may be what Heidi is on to above, but my JavaScript skills are just lacking enough, I wasn’t quite sure what she was improving upon. Anyway, I used the second solution mentioned in the post above at http://www.huddletogether.com/forum/comments.php?DiscussionID=124 for Lightbox2. You first surround any Flash files in your HTML page (or whatever else you want to hide) with
. It is a good idea to surround that with a second div with inline CSS styled for the height and width. In other words, if my Flash movie is 700px by 300px, I put it in two divs like so:
This way, when you hide the movies, your page won’t cave in.
Anyway, once you’ve got all the stuff on your page surrounded twice like the above that you want to hide, look for these lines in ibox.js (they are sandwitched in the middle of the opening init function) and add the code marked below:
====
showIbox(url,title,params); // show ibox
window.onscroll = maintPos;
window.onresize = maintPos;
//hack starts here
for (i=0;i
document.getElementsByTagName("div").item(i).style.display = "none";
}
}
//end of hack
=====
then on the hideIbox function further down:
====
hideIbox = function() {
hideBG();
var ibox = getElem('ibox_wrapper');
ibox.style.display = "none";
clearIboxContent();
window.onscroll = null;
///hack begins here
for (i=0;i
document.getElementsByTagName("div").item(i).style.display = "block";
}
}
//end of hack before the last curley bracket
}
====
This will completely remove any contents between the
June 28th, 2006 at 1:59 am
Hmm. I see this blog doesn’t like impolite language. Everywhere you see “cl***” above? Just for the record, that is supposed to be “c-l-a-s-s.”
Hope that didn’t confuse anybody.
June 28th, 2006 at 5:47 am
@mrrena:
Thank’s for that! I’m sure it shall be on the next version update!
June 28th, 2006 at 6:20 am
Thanks j4s0n.
I doubt it will be included in an update though, unless Ahmed mentions it as an option in a directions sheet to show users how to wrap their movies in div tags. (Otherwise, it’d just be a feature taking up space, because if nobody knew about it…)
As a follow-up, though, I later found it works better if you add the first hack (the “hide Flash”) later on in the code: otherwise, it snaps the Flash file away so fast it forms a stark contrast with the gradual fade-in whereas moving it later in the code produces a more subtle effect. I finally put it under the “setOpacity” as that seemed to be about the last place it could go and still be implemented (the other “show Flash” works just fine where I suggested to put it above):
====
setOpacity = function (elemid,value) {
var e = getElem(elemid);
e.style.opacity = value/10;
e.style.filter = ‘alpha(opacity=’ + value*10 + ‘)’;
//hack starts here
for (i=0;i
document.getElementsByTagName("div").item(i).style.display = "none";
}
}
//end here
====
====
Hey Ahmed, I have a question specifically for you (or, for that matter, anyone else who may have found a way to do this): Zak, above, writes:
===
Is there functionality to group a set of related links like in lightbox where you click next/previous to navigate between images? I really like this implementation, but it is lacking (for my needs anyway) if this functionality is not available.
===
I'd really like to know the same thing, especially for use with inline divs, my primary usage at the moment. I know the new release of Lightbox 2 allows this functionality; also Scott mentions in his comment on Cody's ThickBox forum how to make ThickBox do the same: see http://codylindley.com/Javascript/257/thickbox-one-box-to-rule-them-all#c000839. However, neither of these support inline divs like yours does. And I would think there would be a way to do this either with a little greater knowledge of the existing code or with a minor modification. You put the thing together, Ahmed: do you have any pointers? or is this a feature that too few people are interested in to warrant further development?
June 28th, 2006 at 6:31 am
Okay, I know I’m dominating this blog and for that I apologize, but I wasn’t sure my question was clear, Ahmed. I am not that interested personally in grouping images with the « rel=”lightbox[some_group_name]”» that Lokesh uses in Lightbox, though I suspect that is what Zak has in mind. What I *would* like to do, however–and I think this is more basic–is to be able to have a link in an inline div linking to another inline div and so on. In other words, I am hoping to allow the user to navigate from one div to the next much like Lightbox does with images. Since I am concerned with inline divs, if they are grouped or not is not as important to me as that would be to Zak, who appears to be using your program mainly for images. Any ideas?
June 29th, 2006 at 1:03 am
@mrrena I’ve just tried the functions you’ve posted, but I discovered something problematic about them. After you’ve closed the ibox, the flash starts over from frame one. I was hoping to use ibox for a replacement for thickbox (lighter codebase) as a way of showing large images over top of my flash website. I’ve easily gotten thickbox to overlay my flash page using z-indexes in the css. Thickbox still has a number of problems (along with filesize) that make it difficult for me to use. and lightboxv2 is out of the question till it uses moo.fx. ah well, I’ll keep my eye on ibox, it looks promising.
June 29th, 2006 at 6:50 am
First of all, this is sweet! I love how small it is and easy to set up, thanks! Secondly, I agree with mrrena and it would be great if there was a way to navigate through pictures with the iBox.
June 29th, 2006 at 8:51 am
Love the code. Love how it doesn’t break moofx (thickbox im looking at YOU)
didn’t love how it added scrollbars to my image pop up.
Now im normally pretty quick with these things, but i had been sick all week and not the sharpest knife in the draw. Turns out after about an hour of mucking around, that the doctype plays a part.
Using your xml transitional doctype renders the popup fine. Using html 4.01 strict, does not. … might be worth documenting or adding a fix for. If i manage to write a coherent fix in the next day on these meds, ill post it.
Lucky my laptop isnt classd as heavy or i would be under orders not to operate it..
June 29th, 2006 at 11:26 am
I’ve just added iBox to my site, and have came across a problem.
When the page loads, Firefox gives this error:
It seems to be in setOpacity = function (elemid,value), the line: e.style.opacity = value/10; is causing the problem.
Any ideas?
June 29th, 2006 at 1:37 pm
@tane piper: seems like you’re using it WP, can you link us with the error? it maybe the cause of porting iBox in wordpress. Cause it works well with us. can you link us?
@marc b: Using html 4.01 strict, yes it does break the ibox (scrollbar on images)
June 29th, 2006 at 3:02 pm
@***Prophet: yes, the snippet I use completely removes Flash (or any other element) from the document stream and then re-instantiates it. That’s why it restarts on the first frame and also why my strong suggestion to surround that element with a div styled to the exact dimensions to keep the page from collapsing. You are actually removing that element from the page entirely when you use that method!
@marc b: Try removing the “overflow: auto” from “#ibox_content” in your CSS. I don’t promise it will work, but it very well might. The downside (assuming it works) is that if you ever do need scrollbars for any reason, they will not appear.
June 29th, 2006 at 7:18 pm
It appears that it will only display the “title” that is passed in IE and not in Firefox.
June 29th, 2006 at 7:48 pm
I changed the “title” to “name” where it says var title = this.title to make it var title = this.name and then used the name attribute in my a tag I don’t know why Firefox doesn’t like pulling in the title, but it doesn’t.
June 30th, 2006 at 1:42 am
@AHFX: really? it works fine with me in FF. if you have changed it to [this.name], i guess there’s not much problem. Unless there are plans for iBox to use the [name] attribute for other purpose.
June 30th, 2006 at 5:15 pm
It is only the “title” that appears below the picture on the left hand side that won’t appear for me in FireFox. (Running 1.5.0.4) If it is only my machine I’d love to know. I’d love to know if anyone has created a “timeout” function to work in ibox. I’ve had it “hang” a couple of times looking for pictures or the whatnot.
June 30th, 2006 at 5:27 pm
@j4s0n thanks for your reply. After some more investigation, I found that the extension SEO Links 1.0 causes it to not work. Don’t ask me why, but it was the culprit. Thanks again for the great component.
July 1st, 2006 at 12:20 am
I want to use iBox to keep users from clicking a form submit button twice. I’m using -
onclick="javascript:document.myFrom.submit(); return false" rel="ibox" >Submit Form
It pops up the Ibox Div but doesn’t submit the form.
When I remove the “rel=ibox” submits the form but of course the ibox div isn’t triggered. Any suggestions?
July 1st, 2006 at 2:44 pm
Thank you for this. Of course I ran into problems though. I have registered a *.go as my main servlet handling method and since there is a hardcoded check in the js, it didnt work at first. I added my servlet extension and now it works. Perhaps the default behaviour should be the ibox_type = 2 tree of the decision in showIBox?
July 2nd, 2006 at 9:08 pm
Just integrated iBox; pleased to say it has no issues with K2 for WordPress (as Lightbox had). My only “issue” is a cosmetic one; the opacity screen doesn’t cover the full width of my page (it spans 95% or so in Safari, 98% or so in Firefox). Weird. Here’s an example. Anyone got any ideas?
July 2nd, 2006 at 10:23 pm
Very well done!
One bug I have found is related to the CASE of the filename (not just the extension). If there is an uppercase character at all, it will cause problems. The script is converting the URL to an all lowercase string, resulting in a missing file.
Temporary resolution was to comment out line 124 (below)
// url = url.toLowerCase(); // have to lowercase
July 3rd, 2006 at 12:05 am
@AHFX: yah, thanks. but not me to thank. Thank Ahmed.
@LouBBOS: currently, iBox ASSIGNS but not ADD onclick events on your tags. That means, it gets overridden. That’s why your isnt submitting. And for best practices, i don’t usually use tags as a way to submit forms, preferably buttons, for POST of course.
@Ronald: Good you’ve found that. As you see, without that condition iBox will not able to find out what will it be displaying, in the case now, an Image or an External HTML snipped (thru AJAX) or an inline DIV, adding your extension would fix it. Another info, Code borrowed and slightly modified from Thickbox. So good thanks to thickbox
@Bruce: and for those who comments about the (overlay not covering the entire page). As you see, that does not appear in the case if you have no scrollbar in your browser. Let’s say you only have a height of 300px that does not necessarily needs a scrollbar w/ exception on IE, which always have scrollbars. But you will notice it when you get a height enough to cause the browser to produce the scrollbar.
Now the problem, if we try to make the overlay’s width 100% of the screen. It will cause the browser to have a horizontal scrollbar, which is not very good
@Chris: yah, very true. That issue was raised by another user which have all his file extensions on UpperCase, so it was made to lowercase.
July 3rd, 2006 at 12:09 am
@Bruce: Sorry let me rephrase my answer above:
“As you see, that does not appear in the case if you have no scrollbar in your browser.” to
As you see, that does appear in the case if you have no scrollbar in your browser. and if you notice, the width of the missing area was as much as width of your/our scrollbars in FF, Safari…
And, if someone has a workaround for this. Please post here.
July 4th, 2006 at 6:09 am
Personally I think that ibox is one of the best implementations of the many variations of ‘lightbox’ that Ive seen. One more modification would make it rule over all the other ‘lighboxes’ out there and that is to enable next/previous navigation among a group of images (with preloading of the next image while viewing the current one as in Lightbox 2). Is this modification possible with ibox Ahmed? Thanks very much for your labors on this.
July 4th, 2006 at 3:54 pm
Thanks for the compliment Terry
As of this time we do not intend on adding that. Using the lightbox v2 implementation as an example, I just don’t see enough people using it or even needing it.
July 4th, 2006 at 6:34 pm
Did some more testing; works for me (with K2 theme) in Safari, Firefox Mac + Windows, but not in IE6. I have no idea why this would be. Any suggestions?
July 5th, 2006 at 12:09 am
Ahmed, I know of many many sites that use the Lightbox 2.0, including my own. The navigation capability is a big asset of LB 2 for photo galleries which are very common. The main disadvantage though of LB 2 is the file sizes of the javascripts (prototype, etc) which degrade page loading time, especially for dialup users. Ibox is much lighter and more versatile but I do understand that if next/previous navigation is added to ibox, it may increase the file size somewhat. –Terry
July 5th, 2006 at 8:07 pm
Ahmed,
Love the iBox; thank you very much!
Could I ask for a changelog for the June 27 update? I’ve customized my implementation, and I don’t want to overwrite my changes. If I got a list of what you changed, I could easily incorporate those changes into my customized implementation.
Thanks again! -Scott
July 6th, 2006 at 6:06 am
Hi Ahmed - Thanks for iBox! Very nice.
Up and running on http://www.instarmusic.com/music.html (click the LP and the EP to see the in-page loading).
Thanks again for the useful and easy to use emhancement! (Oh, credit and link to you is given on the news page).
- Karl / http://www.instarmusic.com
July 6th, 2006 at 10:14 am
Hi there,
fantatic script! But I’m having problems with IE6, too. The targeted URI is missing the stylesheet (for instance i’m linking to wp-login.php in my blog). The URI is formed like http://host/... instead of http://host/subdir/subdir/ibox/...
With all other browsers the < ?php get_settings('siteurl'); ?> seems to work fine. Any ideas? I’m using a subdomain, so maybe that’s a hint.
Thanks,
Axel
July 6th, 2006 at 6:04 pm
Still trying to fire off iBox and submit a form at the same time. If I use a link (a href) the js kills my onClick ’submit form’. But if I use-
the js doesn’t recognize it. So is there a way to do what I need to do? Thanks
July 6th, 2006 at 6:39 pm
I’ve got a question similar to LouBBOS:
The ibox examples I’ve seen use syntax like this to display the ibox:
But I’d like to use it something like this:
Yes No MaybeWould using some form of an onclick event handler permit the ibox to display if user clicks the “Yes” radio button?
Thanks.
July 6th, 2006 at 11:27 pm
This partially works:
YesBut if anyone can advise how to pass the params for ibox width and height, it would be appreciated.
Thanks.
July 7th, 2006 at 2:53 am
I used ibox to open a htm file that has an embedded media player in it. It opens and runs fine, but when closing creates an error message in both FF and Opera, which closes the browser. IE plays and closes fine.
Click on the “Weather Video” at the bottom of this page:
http://www.edgesz28.com/edgesZ28/jokes/weather-video.htm
Is there any modification that will prevent the error in FF and Opera?
Thanks, Ed
July 7th, 2006 at 1:38 pm
@jsnovice: as you notice the showIbox function requires 3 parameters and the 3rd parameter uses an array, maybe you can hack in by creating a function that returns an Array
function createIboxSize(width,height) {
var params = new Array();
params[’height’] = height;
params[’width’] = width;
return params;
}
showIbox(’theURL.html’,'theTitle’,createIboxSize(300,300));
Hope this helps
@Ed: Your example works for me in FF. Except the media player’s on top of iBox. That has to be fixed, by hacking your
@Axel Seeger: Can you give us an exact URL?
July 7th, 2006 at 4:58 pm
Hey, a colleague told me one way to pass params for ibox height and width to an onclick handler. It involves using an object literal, like this:
YesCreating a function would probably work, too. Thanks j4s0n.
July 10th, 2006 at 8:57 pm
Hi Ahmed, this is very nice. I must try it asap.. Thanks
July 11th, 2006 at 4:24 am
For some reason scroll bars do not appear in IE when the content overflows an AJAX-loaded iBox, but the scroll bars appear as expected in FireFox. In IE the iBox just expands to the size of the full content, ignoring my size parameters. Any ideas?
July 11th, 2006 at 5:12 am
I love this script but I can’t use it unless the gap in the overlay on the right side of the screen is corrected (I’m seeing it in Safari and Firefox on the Mac).
Would also love a little alpha fade back out of the black on close.
July 11th, 2006 at 6:03 am
Putting
min-height:100%; height: auto; _height:100%;
on the ibox_w css definition will cause the overlay to grow with the browser window if it is manipulated while showing a feature div (thanks to Johan and his comment on the Thickbox site for this)
And on line 61 of the js file, changing this
else {box_w.style.width = pagesize.width-20+’px’;}
to
else {box_w.style.width = pagesize.width-0+’px’;}
removes the right side margin in firefox/safari mac (although I’m certain it breaks something else!)
July 11th, 2006 at 6:40 am
Seems I was able to fix the IE no-scrollbar problem by changing the CSS for #ibox_wrapper to include
overflow: hidden;
Strange, but it works. Now I’m off to bed to dream of a future where nobody uses IE.
July 11th, 2006 at 5:52 pm
AhmedF, thank you for the nice and easy-to-use script.
Jennifer, the fix for the gap doesn’t fix it if one resizes the browser window with the ibox showing - the gap creeps back in.
July 12th, 2006 at 4:21 pm
I can confirm that the case of the filename for the larger image is important; took me ages to track down why an image wasn’t loading; worked when I renamed in lowercase.
I mentioned here before (and e-mailed Ahmed but with no reply) that I’m having problems with IE6. On my home computer the dark screen loads, but there is no image overlay. On my work computer, running the same version of IE6 and same OS (Win XP), the screen doesn’t appear at all but on clicking the thumbnail loads the large image in a new page. JavaScript is enabled on both machines. Can anyone confirm a similar experience? I may have to ditch iBox if I can’t resolve this (the only way to “escape” the misbehaviour on my home machine is to reload the page).
July 12th, 2006 at 8:48 pm
Can you layer input boxes in this fashion with a label to grab comments quickly?
Thanks for sharing!
July 13th, 2006 at 1:40 pm
On the off-chance someone reads these comments, I’ve upload a screen capture to illustrate the problem I’m having with iBox using IE6 (only) here:
http://www.bioneural.net/gallery2/main.php?g2_itemId=702
It should look like this (Firefox):
http://www.bioneural.net/gallery2/main.php?g2_itemId=699
Maybe Ahmed should think about opening a support forum for iBox users?
July 13th, 2006 at 1:49 pm
Sorry Bruce - did not mean to ignore you
I will get it looked into.
July 13th, 2006 at 5:48 pm
Me again.
Another display bug I’ve found is in IE Firefox: when there is already a vertical scroll on the window, clicking for the overlay will automatically induce a horizontal scroll at the bottom.
July 14th, 2006 at 6:16 am
I’ve been trying to implement this very elegant interface enhancement of yours on a Rails site I’m working on. So far I’m unable to get an rhtml generated page to load in the iBox. Has anyone gotten this to work? Admittedly I’m not terribly adept with rails yet (slow convert from asp) so I might be missing something simple. If you can help, thanks! Otherwise, iBox seems fantastic.
July 14th, 2006 at 3:47 pm
I’ve been looking at the various *box techniques lately and this seems to be the one that i’ll end up using! My only requests are drag/resize capabilities
July 14th, 2006 at 7:06 pm
Oh. My. Goodness.
This makes my design company’s portfolio look 100-times better! Thank you so much for sharing this. It took me a while to figure out what I was doing wrong (over thinking, as usual) but the results were WELL worth the time spent. It’s awesome and oh-so-simple.
You Rock!
Thanks again.
July 15th, 2006 at 10:59 pm
I fully agree with Laura’s comment above. This is an excellent piece of kit, and allows even the most mundane page to become uber-superb.
You can see my implementation of it in action here, and also view my blog, where I have posted the benefits (and a tirade on how much I like this code) of the script here.
July 16th, 2006 at 2:34 am
I have a form in my website which starts a subscribing proccess (to FeedBurner email deliveries). The form is presently called via an iBox, but the form tag has this code in it:
target=”popupwindow” onsubmit=”window.open(’http://www.feedburner.com’, ‘popupwindow’, ’scrollbars=yes,width=550,height=520′);return true”
This calls a popup window that continues the handling of the subscription proccess (captcha, confirmation). I would like all this to be handled through the very same iBox - Is it possible to do it?
All help will be much appreciated. Thanks!
July 18th, 2006 at 9:51 am
As stated in the comment above, I am currently using iBox on my page here: http://www.flashdesignwebsites.com/new/portfolio.php.
It works great in IE, and also in Firefox, however, there is a weird bug in Firefox 1.5.0.4. 80% of the time, it works exactly as it is meant to, however, sometimes it just locks up on the “loading” graphic, until you click to return to the normal page, and click another thumbnail. Is there any reason for this?
Also, I tested it in Opera 9, and it works fine, although the screen does not actually fade, it just switches to black, but this is a minor issue
July 21st, 2006 at 4:46 pm
eduardo, check the second time -20 is displayed under
maintPos = function()
this should help with the 20px gap.
July 22nd, 2006 at 6:31 am
i used showBG(); showIbox(’theURL.html’,'theTitle’,{ width:760, height:500 } )” and it worked fine on a button, but when i use it in the “onload” statment under body and it comes back with an error. it works in firefox though any tips?
July 23rd, 2006 at 1:14 am
Hey thom,
Thank you, i had applied Jennifer’s fix on only the first courrence of that -20px. Now it works fine.
Cody,
Was that for me? I tried it, but doesn’t work: the background “flashes” off then on, then the iBox is shown but when the new page loads, it takes the whole window (taking the palce of my website instead of being displayed IN the iBox). Thanks anyway for your suggestion.
July 23rd, 2006 at 12:55 pm
I have got a question regarding ibox.
I’m trying to get this to work with cakephp (http://cakephp.org/) and they use thtml as extensions. How do i get ibox to work when in the link there is no extension (like http://mysite/post/1)
hope anyone knows the answer.
ps. I really like ibox!
July 25th, 2006 at 12:05 am
sorry, i ment, that i need it to work on the “onload” statement, i am trying to make it so, when a user is not logged in, the ibox will load on the page startup. i used the code above
(
) on a button and it worked. but when i used it on the onload function it comes up with an error, but in firefox it works. any ideas on how to make it load on the page load
July 25th, 2006 at 12:23 am
@Cody, i think the problem is, iBox has its own onload event and initializes everything it needs on that window.onload event. the most necessary function call is this on which creates the wrapper, and the divs necessary for our ibox to work, you have to call that first before anything else, as those elements generated by that function are needed to be created before being referenced by other functions.
In your case:
//create our ibox
createIbox(document.getElementsByTagName(”body”)[0]);
showBG();
showIbox(’ibox-login.html’,'theTitle’,{width:275, height:130} );
Try this for a start, if this does not work, please reply w/ the results
July 25th, 2006 at 12:24 am
dammit, got a grammar error, this is the function i’m talking about the second line
//create our ibox
createIbox(document.getElementsByTagName(”body”)[0]);
July 25th, 2006 at 12:41 am
it worked, except for that the overlay convers only half the page, right after my post i also used settimout and got it to work too. both came with the same result, it works perfectly except it only covers half the page.
July 25th, 2006 at 3:34 am
Has anyone else encountered problems when trying to display a hidden div with select form elements? Everything else shows up fine, just not the dropdown boxes. Hints anyone?
July 25th, 2006 at 4:23 am
@cody: ahh good. try calling maintPos() function after all your calls. that makes iBox resize.
@Matt: it seems to be a bug. as a comment and solution by Heidi above. iBox hides
July 25th, 2006 at 4:27 am
@Matt: for an immediate fix find, selectVisibility() somewhere around line 65+ and comment all the lines like this
selectVisibility = function(v) {
//var selectElems = document.getElementsByTagName(’select’);
//for(var i = 0; i < selectElems.length; ++i) {
// selectElems[i].style.visibility = v;
//}
}
that just ignores the function calls.
July 25th, 2006 at 11:11 am
Hi all. I have been working with iBox for about 3 weeks and I love it! As a novice it is very easy to come to grips with!
One issue I am having is that I hav ecreated an email form using iBox. It all works fine until I press the ‘Send’ button. A label is set to show saying ‘Thanks for email…’ etc. The problem is that the iBox frame disappears and the form appears in it’s own browser window? Is there anyway to keep the form in the iBox window after postback?
July 25th, 2006 at 11:40 am
j4s0n thank you! it works perfectly, i love YOU.
July 25th, 2006 at 12:26 pm
j4s0n you are my new hero
July 25th, 2006 at 1:04 pm
One more issue…I am trying to use ibox with a form that includes a JS date picker (pops up when user clicks the icon) and ibox either seems to not allow this or kills it. Any ideas?
July 25th, 2006 at 3:14 pm
* Blushing * lol, joke.
@Matt: hah, link us
July 25th, 2006 at 3:23 pm
For everyone who wants their iBox content replace itself when it’s being shown, like an acknowledgement blah blah. There’s a function you can use setIBoxContent() which actually simply just do an innerHTML on iBox. for
July 25th, 2006 at 9:05 pm
Hi j4s0n,
Thanks for the help so far - just awesome! Any idea how I would include this in my code? I’m not too flash on that front.
At the moment a user clicks on btnSend to process the email form, I then want to respond with confirmation in the iBox window. He is my sample code for the button click:
Sub btnSend_Click(sender As Object, e As EventArgs)
lblMessageSent.Visible = True
btnSend.Enabled = False
End Sub
Is there where I put the setIboxContent rather than user lblMessageSent?
Thanks again for your help and patience…
iParty
July 26th, 2006 at 2:04 am
Is it a bug that iBox ignores the width/height params when specifying an image?
Even on the demo script it would appear as if all 3 images are “auto-detected” despite explicitly defining width/height in the first 2… try changing the width/height and nothing changes.
Also the demo works fine but scrollbars always appear for me when loading images… haven’t figured out why this is happening.
July 26th, 2006 at 2:08 am
I discovered that rendering the iBox with a XHTML 1.0 strict doctype will always return scrollbars on the images… however if I use transitional the scrollbars work as intended.
Maybe this should be looked into as it’s kinda lame to be forced to use transitional.
July 26th, 2006 at 5:51 am
@iParty: i see your using ASP.NET? Because I can’t answer that ;( , let’s wait for someone here, to help you out
@Anjin: k, it will be look into.
July 26th, 2006 at 1:54 pm
j4s0n,
Thank you, that answers my question. I just can’t code it myself, but thanks anyway!
July 27th, 2006 at 2:20 pm
j4s0n,
Here is the code I can’t get to work in ibox, if you need to see the actual scripts included in the head section let me know…
(It has 7/27 because that happened to be the current date obviously)
Any ideas?
July 28th, 2006 at 2:36 pm
Any thoughts on Matt’s question above about ibox conflicting with the calandar pop-up?
- christopher
July 29th, 2006 at 5:44 am
Thanks J4s0n,
I have got this far in the button click event:
Response.Write (”
July 29th, 2006 at 12:45 pm
A quick hack to make iBox work reliably in IE6!:
http://www.bioneural.net/gallery2/main.php?g2_itemId=702
July 29th, 2006 at 11:11 pm
Bruce,
have you had issues with drop-down “bleed-throughs” when using ibox? (drop down menus in the background are visible through ibox window and content in ibox)
also, have you had issues with running drop downs in ibox? we’re having issues(per Matt above)
Help Please help all of you smart people!!!
August 1st, 2006 at 3:25 pm
This is great stuff, Thanks a ton.
Here’s a question for you: When I try this:
showIbox(’http://www.www.com/actions/phpetal.php?mode=edit&file=/tested.txt’,”,createIboxSize(599,499))”
or this:
some link
I get the screen fade to the background color, but my page does not show up. When I eliminate the &file=/tested.txt bit things work as I would expect. Any ideas on how to deal with the “/” I need to have in my URL?
Thanks again,
Jason
August 1st, 2006 at 8:53 pm
Great Script!
I am having some trouble integrating a php page into this, maybe you can tell me what I’m doing wrong: http://hamlettinstruments.com/beta/about_hamlett.php You will see a UL that has links in it. It is supposd to load a grey page with black text. When I click the link, I only load a white page.
Thanks in adavance, adam
August 2nd, 2006 at 1:16 am
@Christopher: as stated on my comment above, it’s a bug on iBox which actually hides all
Select elements on iBox.
this was done as Select controls because it goes above the overlay, so the solution was
to hide them.
although the problem was it hides all! for an immediate fix find, selectVisibility()
somewhere around line 65+ and comment all the lines like this
selectVisibility = function(v) {
//var selectElems = document.getElementsByTagName(’select’);
//for(var i = 0; i < selectElems.length; ++i) {
// selectElems[i].style.visibility = v;
//}
}
that just ignores the function calls.
@Jason: In regards to having "/" on your url can you do this?
http://www.www.com/actions/phpetal.php?mode=edit&file=%2Ftested.txt
as you see backslashes are kinda sensitive so we have to add extra care on it, so use
this “%2F”
@Adam: probably an AJAX trouble, Another thing is that external pages probably at best
etc… tags on w/ them, it will work although, it getsshouldnt have another
your xhtml malformed.
August 2nd, 2006 at 7:45 am
Still working on my previous issue and will post the result when I solve.
Now trying to work out how to change the CSS for the ‘click to close link’. It currently picks up the A:Link etc. from the main page CSS. Wanting to change to link color to white.
Any ideas would be great.
Thanks again,
iParty
August 2nd, 2006 at 1:48 pm
J4son,
I feel pretty dumb (b/c I am!) but any ideas how to address this issue that matt had mentioned above? (i’ve re-pasted his comment below)
You’re the best!!! and thanks
Here is the code I can’t get to work in ibox, if you need to see the actual scripts included in the head section let me know…
(It has 7/27 because that happened to be the current date obviously)
Any ideas?
August 2nd, 2006 at 1:49 pm
I stripped that out, and it still didnt work. any otehr ideas?
August 3rd, 2006 at 5:06 pm
Hi - maybe somebody is able to help me?
I got this file:
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Test-Link
If I click on “Test-Link”, the following file should be opened. The problem is: the ibox opens but without any content.
Here’s the file, which should be opened:
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">