Shadowbox.js Media Viewer 1.0 beta
22 Jan 2008 | tags: JavaScript, Projects, Shadowbox | 127 Comments »
Update: Version 1.0 is now available.
A few weeks ago, I was looking for a Lightbox-like script that would allow me to display more than just pictures. In addition to static images, my client required the ability to display various types of movies including QuickTime and SWF. The only script that fit the bill was Lightwindow—a nice piece of work to be sure—but it required the Prototype + Scriptaculous combo and I was already using YUI.
Besides, I thought, it would be really great to have a full-featured media viewing application that was library agnostic. Then, if I need to use a different framework for some particular reason, I can easily switch.
Thus was born Shadowbox—a cross-browser, cross-platform, cleanly-coded and fully-documented media viewer application built entirely in JavaScript. It’s currently in beta testing phase, so please let me know on this post if you find any bugs.
More info here.
Edit: Please don’t post support-type questions on this thread (i.e. “How do I …?”). I don’t currently have time to respond to them. The comments section below will be monitored closely for the sake of other visitors.
Update (β2): Fixed a small bug that wouldn’t allow thumbnail galleries.
Update (β3): Added adapter for MooTools library.
Update (β4): Several changes:
- Added Dojo Toolkit adapter (thanks Peter Higgins)
- Replaced
resizeLgImagesoption withhandleLgImages. The new option gives the user the ability to drag images that are too large for the view instead of simply resizing them. - Added a buffered listener on window resize to prevent jittery window resizing
Update (β5): Various bug fixes and improvements:
- Fixed bug in rendering of error handling messages
- Added support for explicitly specifying dimensions of images
- Added support for resizing of Flash content when the browser window is too small. Uses
handleLgImagesoption. - Added
onFinishcallback - Fixed a bug in iframe sizing when dynamic image resizing is enabled
- Extended
Element.setOpacityin MooTools adapter to fix visibility issues - Added support for advanced setup that can bypass the need to modify HTML source
- Added plugin to jQuery adapter with support for metadata (thanks Mike Alsup)
- Moved private
file_typesproperty to publicEXTENSIONSto allow customization for experienced users who wish to add more file types - Added
text-align:leftattribute to CSS to override any other setting that may exist in parent elements
Update (β6): Two bug fixes:
- Fixed bug in
setup()that prevented jQuery object from being passed directly (thanks Mike Alsup) - Fixed bug in MooTools adapter that did not correctly prevent an event’s default behavior in IE (thanks Alex)
Update (β7): Several fixes and improvements:
- Added i18n support in the form of a customizable
textoption that can be used oninit() - Added support for inline content from elements within the current page
- Added
animSequenceoption to allow further control over the dimension animation sequence - Fixed bug in
setup()that processed links with norelattribute (thanks Frederic) - Moved
Shadowbox.EXTENSIONStooptions.extto allow users to modify it in the same manner as other options - Fixed various issues with the CSS files
I’m getting very close to a 1.0 release so please keep the bug reports coming if you find any!
Update (β8): Fixed two small bugs that I introduced in the β7 release (thanks Frederic & guy).
[…] (no relation to the singer) wanted to address that and I think he’s done a stellar job with his newly released Shadowbox LightBox component: A few weeks ago, I was looking for a Lightbox-like script that would allow me to display more than […]
[…] (no relation to the singer) wanted to address that and I think he’s done a stellar job with his newly released Shadowbox LightBox component: A few weeks ago, I was looking for a Lightbox-like script that would allow me to display more than […]
[…] (no relation to the singer) wanted to address that and I think he’s done a stellar job with his newly released Shadowbox LightBox component: A few weeks ago, I was looking for a Lightbox-like script that would allow me to display more than […]
[…] Shadowbox, website authors can display pictures and movies in all major browsers without navigating away from […]
Here is the MooTools adapter. I needed it…so I built it. NB: Mootools 1.11 with Fx.Styles/Window.DomReady/Element.Event
if(typeof MooTools == 'undefined'){throw 'Unable to load Shadowbox, MooTools framework not found.';}var Shadowbox = {};Shadowbox.lib = {getStyle:function(A,B){return A.getStyle(B);},setStyle:function(A,B,C){if(typeof B!='object'){var temp={};temp[B]=C;B=temp;}A.setStyles(B);},get:function(A){return $(A);},remove:function(A){A.remove();},getTarget:function(A){return A.target;},preventDefault:function(A){A.preventDefault();},addEvent:function(A,B,C){A.addEvent(B,C);},removeEvent:function(A,B,C){A.removeEvent(B,C);},animate:function(A,B,C,D){var myEffects=new Fx.Styles(A,{duration:1000*C,onComplete:D});var o={};for(var p in B){switch(p){case 'opacity':o.opacity=String(B.opacity.to);break;default:o[p]=String(B[p].to);}}myEffects.start(o);}};@Grincheux: Thanks! I used to do a lot in MooTools but not so much anymore. I’ll be sure to include a MooTools adapter in the package soon.
Just genius, thanks!
i’d be more than happy to see an official mootools adapter within the downloaded package thanks in advance.
Absolutely superb… this will be my permanent replacement for Lightbox and Thickbox. At least it works with Spry without any trouble. Just one thing, are you going to allow image links. At the moment, only text links seem to be allowed when trying to display an image. I cant really replace a gallery of thumbnails with text.
Nevertheless, cheers for a good job.. keep it up…
Eman: I’m looking into expanding the demos section of the gallery to include image links as well. Thanks!
[…] (no relation to the singer) wanted to address that and I think he’s done a stellar job with his newly released Shadowbox LightBox component: A few weeks ago, I was looking for a Lightbox-like script that would allow me to display more than […]
Amazing tool you’ve produced. I’ve only 1 question: I’ve tried getting Youtube to work on your demo site with IE6 but it produces nothing…just a white area. Whereas IE7 and the other browsers are not having that problem. Am I the only one seeing this or has this issue been brought up?
@Michael: I couldn’t find ANY way to contact you, so this is the best I’ve got lol. I’m implementing shadowbox testing on my site, and I finally got it to work with YUI (I wanted to use prototype but couldn’t figure out the initializing part!) So its working, BUT the issue is that when I apply the effect on an image, it doesn’t work. Like , rather than a text link bringing up the shadowbox, I click on a thumbnail, and it wont work, but if i just replace that image tag with some text, the link then works just fine and shadowbox works great…any ideas?
@nick: It should be fixed now. ;)
I like it very very much, you’ve done a very good job. Bravo.
Would you consider incorporating a “loupe” like these for viewing large images in a gallery?
http://ajaxian.com/archives/tjpzoom-3-more-image-zooming
@Michael: Any chance you can help me out on the ‘initializing’ with prototype/scriptaculous? I got it all to work great with YUI, but I’m already loading the proto/scrip libraries, so I might as well use that method, But I can’t seem to make it work. I’m initializing in my body
onload, should it just beonload="Shadowbox.init()"?@Nick: Using the body onload method with Prototype + Scriptaculous should work just fine. Are you sure you’re including Scriptaculous’ Effect class as well as the main Prototype framework? Are you getting any exceptions thrown when the page loads? Use Firefox + Firebug to check if you aren’t sure how.
Thanks for adding support for panning over large images. For increased usability, may I suggest that you also include a navigation palette in the corner: http://graphicssoft.about.com/od/photoshop/ig/documents/Navigator.htm
Great Work. The only script that I found that manages to launch wired QT movies across all browsers with no problems. Thank You.
In your Mootools adapter, if you replace FX.Styles by Fx.Morph, your adapter will be compatible with mootools beta 1.2. Just replace
var anim = new Fx.Styles(el, config);withvar anim = new Fx.Morph(el, config);. I had a problem with IE7 where overlay was ok on the first run of the shadowbox and then never showing again. The solution was to replace :if(options.animate){ SL.setStyle(el, 'opacity', 0); el.style.visibility = 'visible';with
if(options.animate){ el.style.visibility = 'visible'; SL.setStyle(el, 'opacity', 0);now it’s working great under IE7 with Mootools beta 1.2.
Hi Mike
we tested Shadowbox and it is great!
we also found a bug: error messages keep being shown even after user closed the window and opened up a new one.
we have not Quicktime plugin in our Firefox, IE7 browsers. Then we opened up your mpeg4 example and got a Quicktime error at the top of the Shadowbox window. But after that we closed this window and opened a new one with a YouTube video (that we watched without seeing any error before) and the same Quicktime missing error message is still shown.
@Michael: There seem to be a bug with MooTools adapter. It is not IE7 compatible (works fine with FF). Instead of showing an overlay with the image, a click will take you to that image as if it is displayed as a standalone image in the browser. Can this be fixed?
@frayde: Interesting bug you’ve discovered. I looked at the MooTools code. The Element.setOpacity method actually toys with the element’s
visibilitysetting. If I were you, I’d take this issue up with them.Yes, i’m gonna post this issue on mootools forum. I’m trying to make it work with the new mootools right now. My last problem is the drag functionnality which doesn’t work… I’m on it. I’ll post something here if i manage to make this work.
thanks again for your work.
@frayde: Drag functionality works just fine for me using MooTools 1.11 in Firefox.
Thanks for making such a nice utility. In the download section, it would be nice to have a few download options to choose from instead of downloading a 6.5mb file every time a new point release is made. Maybe a version without the examples? Or something like what jQuery does? Just my $.02
Hot scripts mate. I enhanced to support streaming mp3’s. Would make a great addition to your next build.
http://www.boscage.com/tools/shadowbox/shadowbox.js
I know Drag functionality works with mootools 1.11. I’m talking about Mootools 1.2 beta, but i certainly broke something in your script :), that’s a non negligible possibility :)
excellent work mjijackson!
I have a litle question: ¿how can I launch Shadowbox when a event is activated?
It’s to say, for example, I need that when DOM is ready open a picture with Shadowbox.
Thanks from Barcelona!
This is excellent, well done Michael.
Can I make one suggestion though? IE seems to choke on
e.preventDefault()in the MooTools js adapter file. Replacing it withnew Event(e).stop();seemed to work for me.@Michael: Hi, this is great. Thank you so much for your work! But I have a problem: I can´t make it work with
AREAlinks, onlyAlinks. Is there any way to work with this?@Alex: Thanks for the bug report. Should be fixed in β6.
@pedro: Shadowbox doesn’t currently support
AREAtags. I’ll probably include this in a future release though.Hi, We are Usho and Josh, two italian guys. We have developed a plug-in for Wordpress, that integrates your project easily. It’s right that you know it and we are willing to cooperate if necessary. Now the article is written in Italian, but we are translating it…
@Usho’s Hunc: Grazie di avermelo fatto sapere. Buon lavoro. Anche questo blog e’ costruito su WP, e potrei usare una cosa del genere qui!
Translation: Thanks for letting me know. Good work. This blog is also built on WordPress, and I could use something like that here!
Hi, good job on the shadowbox! Any chance we’ll see some i18n features for the cancel, close, next & previous text sometime soon?
Kim: I don’t know why I didn’t think of that earlier. That’s a great idea. I’ll include it in the next build.
I’m all in for i18n features, too :)
[…] (no relation to the singer) wanted to address that and I think he’s done a stellar job with his newly released Shadowbox LightBox component: A few weeks ago, I was looking for a Lightbox-like script that would allow me to display more than […]
Great script Michael, I was pleasantly surprised at its speed considering all the “foolproofing” you do. :)
I’m having an issue though. I’m building a page that uses HTTPRequest object to load content into a div on user request. The content is a list of webpages that I’d like to load using shadowbox and they use the gallery option i.e. rel=’shadowbox[gallery]’. I basically just init shadowbox w/o setup and then call setup() when user loads the list of pages. Thing is, there are several lists, and everytime one is loaded (even the same one), they get added to the same shadowbox gallery as the previous list. So even though each list has only 5 pages, as I load them one after another the shadowbox gallery grows to 10, 15, 20, etc.
It’s true that each list of pages uses the same gallery name and I could specify a different name but the thing is that these lists are dynamically generated and instead of creating a new gallery name everytime I would prefer to simply clear the gallery when I call setup(). However, I’m having trouble figuring out how to do that, I do know that ‘current_gallery = null;’ is not it :)
How would I go about doing that? Thanks
@Michael: Needless to say, you have a fine product on your hand that after some research is clearly better than the popular alternatives.
I’m considering it for a project but have a need (two related needs actually). As others have discussed above, there seems to be a need for support of an already-in-page DIV as the source to show. Is this doable now/in the future ?
The other need is for Shadowbox to be explicitly call-able for a single element using JS, as opposed to being opened via the onclick handlers created by .setup.
An example tying the above two together is a simple ajax call. After the call is successful, a hidden div is populated with the rendered response. I’d like to then use the ajax onComplete handler to tell shadowbox to show that DIV.
What are your thoughts? Is this going too much outside your scope of a media viewer?
@Michael: Your shadowbox is on top of the state of the art of every “Lightsomething’ I have tested over there. It runs on every major Browser in a very cool way. So, I decided to implement it with a SWF to display contents from a flash Coverflow script of my own. You can test and download it on my blog. Greetings from France.
@Mina: Shadowbox was never meant to display HTML content, except in an iframe. I have to admit though, I knew people were going to try and use it for HTML. I personally think it’s a little bit too much for straight HTML content, but I’ll probably include some of that functionality in the next release.
@osamwal: Nice work! Now all you have to do is link to me instead of Lightbox. ;)
@Michael: I personally think it’s a natural progression. It’s such a great media viewer it would be a shame to have to include yet-another-library for the purposes of DIV popups (with a different look/feel/controls) if shadowbox has most of the infrastructure for doing the job. Let me know if I could help in any way. Again your work and product are very much appreciated.
@Michael: Sounds great!
Another thing I’ve noticed is that long descriptions is clipped. You think it would be possible to check the height of the title/description element, and instead of clipping maybe shrinking the Image/flash/other content instead?
I don’t know, but I don’t think I’m the only one in the world with clients who like to attach medium- to long-sized descriptions to their images. I might give it a try next week, see if I can make it work like described above.
Not sure if this is just a bug when using YUI or not. Set ‘handleLgImages’ to ‘drag’ and use an image that will only be too large for the viewing frame vertically. When you drag to view the hidden portion of the image, the image jumps to the right and there is empty space on the left side of the viewing frame.
@myk: I would definitely describe that as a bug. Could you show me a sample page?
@Michael: Shadowbox is very cool, but I agree with Nina about need for support of an already-in-page DIV as the source to show. We are looking for solutions to play flash videos in a panel like yours but also want to be able to add html code for features like sharing, comments, ratings and tracking code. I look forward to future releases, great work.
@Michael: First of all congratulation for this script wich will become (I guess) a sort of de-facto standard for modal windows. That said, I also wish to thank you for the jQuery adapter wich I used to rebuild my portfolio at http://summer.gcmingati.net. One thing could be added as a feature to display LARGE flash files that need to be preloaded. In my opinion when you call a flash file
it would be useful to let shadowbox add a “preload” option.
In my gallery, there are two large flash files (Learjet 31 and FCO). Since they are more than 3MB in size, I needed a preloader so I was forced to call them inside an HTML template. In that template there’s a SWF object script that calls the preloader.swf, and the preloader calls the flash movies. Those steps should be automated. When a user wants to preload a flash movie, Shadowbox should build the page and fill it with a preloader that calls the movie, all automatically.
Thanks and keep up the great work!!!
I’m getting this error on all pages that include shadowbox but do not have any links that open in Shadowbox (using jQuery):
@Andy: I’m working on it.
@GianCarlo: That is an excellent idea. I would like to implement it, but unfortunately my Flash skills are not up to par. Would you like to send me a copy of your SWF object file? I would be more than happy to incorporate it.
@Frederic: That’s strange…nobody else has reported that bug. Could you point me to a sample page?
The easiest way to reproduce it is to remove the “rel” attribute from the link in the transitional_test.html file included in the download.
And the result: http://bildr.no/view/151799
@Fred: I see what you mean. It will be fixed in the next update. Thanks for the report.
Shadowbox is the best media viewer I’ve seen yet and I am currently replacing the other viewers in my projects with it. :)
In my CakePHP projects, I have the following problem:
The pages are delivered in the form
http://example.com/controller. When I want to show one of the pages inside a shadowbox, it doesn’t show up, instead, I get the following error in Firebug:although I’ve set a content type in the header of the specified file. I have the dim feeling that this is a general problem, but perhaps you have an idea what could be the reason for this error.
Great job on Shadowbox. I am busy writing a tutorial on integrating Shadowbox with RapidWeaver (Mac). A few issues first of all taking your example YUI setup seems to have issues with RapidWeaver, not necessarily your fault. So my initial question is based on looking at your web page I see no MooTools initialisation script.
@Kb: In order to initialize with MooTools, as with any other framework, you simply need to call
Shadowbox.initas soon as the DOM loads. For MooTools, the syntax can be found here. In your page, it will look like this:window.addEvent('domready', Shadowbox.init);Thanks for your help. I created a quick test page in RapidWeaver. For the purpose of testing this works fine :) but it has yet to be tested with the other RapidWeaver plugins that use MooTools.
I think there is a problem with the gallery in beta 7. Clicking next, previous or any of the images numbers will return a white page.
http://mjijackson.com/shadowbox/#demos
This happens in Firefox, Opera and IE7. However it works in Safari.
Sorry for the double post but there seems to be another problem when using jQuery. If you try to close the shadowbox then the overlay stays.
Also the next, previous etc links still give the white page mentioned in the above comment while in Safari the content of the shadowbox turns black instead.
The error returned in the error console is “Shadowbox.play is not a function” on line 1513.
The overlay problem happens in Firefox, Opera, IE7 and Safari.
thumbnail gallery does not work in shadowbox 1.7 - when you click next instead of seeing the next picture the browser prints the word “true” to the screen (on a clean white screen)
A short tutorial on RapidWeaver integration is online here. It is by no means in-depth but it gives a taster as to what is possible. :)
@Frederic and guy: Sorry about the bugs! They were introduced while I was experimenting with the code a little. I hadn’t noticed them because I usually use the keyboard to navigate the galleries. They are fixed in β8.
First off, great plugin!
I have a link to an image on my site currently and I change the href using javascript based on the value of a dropdown. I’d really like to use shadowbox for this image, but right now even if the image URL changes, shadow box still brings up the same (initial) image. Is there a way I can have shadowbox rescan this image as part of my onchange script?
I really like Shadowbox! I tried a bunch of similar scripts (MOODalBox, Squeezebox) but Shadowbox is the by far the best I’ve found that works with the Mootools Framework.
2 comments, regarding minor modifications I made to your script:
–Image path: I would suggest adding an option to define the image path. The project I’m working on keeps all of its images in the same directory. Your script looks for them in “images/image.ext”. I modified it to look in the correct path for my project.. you might want to allow this as an option.
–Filetypes: The URL structure of the project I’m working on is /path1/path2/ with no actual files or filenames. I found the ext array, and added ” (empty string) to the iframe extensions, to allow Shadowbox to recognize the path as a html file.
Other than those 2 comments, I’ve got nothing to say except great work!
Having the same issue as white rabbit.
I’m loading image galleries via an AJAX call and the gallery counters don’t reset, every time a gallery of the same name is loaded it adds to the gallery instead of resetting it first.
So if I have rel=”shadowbox[gal1]” the first time it loads no problem. However if I run another search and that same result is returned in the list that gallery then doubles up.
How can I manually reset the galleries when calling Shadowbox.setup() after my onComplete AJAX callback?
Using Prototype with Shadowbox.
Thanks to anyone that can help with this!
Resolved my issue. Had to modify Shadowbox.setup() to include this
as the first line of the function. Making sure there are no leftovers from a previous call.
Hope this helps someone.
Fred B: If you clear the cache, none of the links you’ve previously set up with Shadowbox (up to that point) will work. I suppose that if they’re always new links, that doesn’t matter much. What I really need to do is incorporate some feature that lets you remove links that have already been set up. That way, when you remove those links with an Ajax call, the new gallery will only contain the new links…but my guess is that when you clear out old galleries, you’re not going to want to go through the trouble of passing through all of the old links.
@Michael: Shadowbox is simply the best. Nice work!!! Any way to turn off scrollbars?
loannis: There aren’t any scrollbars unless the content is HTML and it overflows the bounds of the set dimensions of the box. If you’d like to alter this behavior, change the CSS:
to
@Michael: I would like to ask you if is possible to include hyperlink inside text in description of the image. I want to display popup pictures with text: for more information about this picture click HERE - this will be link to any URL. Is this possible?
@Michael: I have tried that but it will only remove the scrollbars on inline content not on external URLs.
P.S. The more a fiddle around the more I find that you have done an excellent job.
Milos: Shadowbox does not currently support textual descriptions of images. You could include some escaped HTML in the
titleattribute of your link, but that would not be correct semantically.ioannis: If you don’t want iframes to scroll, change the
scrollingattribute in the privateloadContentmethod fromto
However, the
autosetting should prevent scrollbars from appearing in the iframe if they are not needed. I can’t imagine why you would want to turn off scrolling if it is in fact needed to view the external page properly.Milos, I found out how to add links to description text from the lightbox2 page. This method works in shadowbox!
http://www.huddletogether.com/projects/lightbox2/#support
@Michael: The scrollbars appear in some places that they should not. It is not a problem with your code. If you are interested look at http://innerspace.gr and press the mail button (left side down).
Hi all, thanks for the answer. But i have found another problem in Shadowbox. When i try to open window with the following link with parameter, the ShadowBox still loading the page (probably cannot find it).
Without parameters the page is displayed OK in Shadowbox, but i need to give some parameters to the PHP script.
I’m am loving Shadowbox. You’re doing a fantastic job with this. One small suggestion, though. Could you put the version number in a comment at the top of the shadowbox.js file so that it’s easy to tell which version is currently had. I see you’re at B8 now; I only downloaded this a few days ago, and I’m not sure whether I’m using B8 or a prior version, as your updates aren’t dated.
A translation to the Spanish language (es_ES):
var options = { text: { cancel: 'Cerrar', loading: 'cargando', close: '<span class="shortcut">C</span>errar', next: '<span class="shortcut">S</span>iguiente', prev: '<span class="shortcut">A</span>nterior', errors: { single: 'Para poder ver este contenido necesitas instalar el plugin <a href="{0}">{1}</a>.', shared: 'Para poder ver este contenido necesitas instalar estos dos plugins: <a href="{0}">{1}</a> y <a href="{2}">{3}</a>.', either: 'Para poder ver este contenido necesitas instalar el plugin alguno de estos plugins: <a href="{0}">{1}</a> o <a href="{2}">{3}</a>.' } }, keysClose: ['c', 27], keysNext: ['s', 39], keysPrev: ['a', 37] };I wrote a little piece of code that maybe you will find useful. If you have a link inside the shadowbox and you want the window to open full and not inside the shadowbox place this code inside the
<a>:@Milos: That’s odd. Shadowbox doesn’t modify the URL’s. Any clue what might need to be modified?
@theturninggate: Shadowbox already includes the version number in several places. For starters, it is always listed in the script header under the
@versiondirective. If you want to check it at runtime, I’ve added theShadowbox.getVersion()function in β8, so you could also use that. Also, each download is given a different name so you could get the version number easily from that as well. For example, a zip file namedshadowbox-1.0b8.zipmeans that it contains version 1.0β8 of the code.@Iván: Thanks for that. I’m sure that will be very useful for the Spanish-speaking users.
Mike, I found it. I first opened the shadowbox.js file in Coda, and it didn’t show the comments or line-breaks. I’m not sure what that was all about. Tried it in skEdit, and can see everything.
Again, I’m loving this. I can’t wait to see 1.0. Great work!
@theturninggate: You’re a Mac user, so you really should be using TextMate anyways… ;)
We have linked to your project here.
First I would like to say I am completely impressed with Shadowbox. It is going to look great on the project I am currently working on developing.
I have a .swf file loading in the shadowbox window that shows various animations and movies. Is there a way to disable the left mouse click from closing the window? I want to make it so the only way to close the window is hit the Esc key or the Close button.
@Bryan: I will add this option in the final release.
bug report: IE6 + mootools adapter + shadowbox-beta8
when u close shadowbox on ‘Close’ link : line 1990: id is null or not an object error
fix: if(target && target.id && target.id == ’shadowbox_container’) Shadowbox.close();
or in shadowbox-mootools.js: getTarget: function(e){return e.target || {};},
@Michael: I downloaded version 1.0b8:
As mentioned above I needed to pop-up the div after an ajax call completes successfully. I came up with this as a way of JS-initiated (as opposed to user-click generated) initiation of shadowbox. If this is not the best way to do it your comments are welcome. If it is, others may find it helpful (uses prototype):
function popup(element, width, height) { element = $(element); if (!element.dummy_shadowbox_link) { element.dummy_shadowbox_link = new Element("a", {"href": "#"+ element.id}); } Shadowbox.setup(element.dummy_shadowbox_link, { "displayNav": false, "width": width + 'px', "height": height + 'px' }); Shadowbox.open(element.dummy_shadowbox_link); }Hi, great to have a framework independent lightbox! I have one problem in IE7 though. When I click a thumbnail, the shadowbox appear at the far bottom of the page, and partly under the shadow. Otherwise it works perfectly, keep up the good work!
@Michael: Excellent script. I’m using v1.0b7 with jQuery/Drupal and its working very well.
One suggestion: I had a few issues with IE6 after adding it to a site. Specifically, relative positioned divs in the header area of the site were being overlapped in an unpredictable way after adding Shadowbox.
The fix was to initialize the shadowbox div in the same style that it is set to on close (display: none; visibility: hidden;)
Line 337 [Original]:
Line 337 [Patched]:
@Mina: You’re welcome. ;) I wouldn’t suggest doing what you’re doing. You’re creating an expando element on another element. From what I understand of memory leaks in IE, this could easily cause one. I am working on integrating better support for Ajax applications into Shadowbox before I finalize the 1.0 API. Why don’t you briefly describe to me what you’re doing with it so that I can get an idea of what people are trying to use it for?
@Markus: That’s strange…I’ve tested it in IE7 and it works fine. Also, nobody has reported this bug but you. Could it be due to some styles that you have applied to other elements on the page?
@Brett: Did you try altering the CSS first without setting styles directly on the element? If so, did it work?
@Michael: I did try with a CSS change first and was unsuccessful. I’ve just tried again and it worked this time (browser cache I suppose). So, I guess the fix is to add
display: noneto #shadowbox.@Brett: Thanks for the feedback. Unless I find some good reason not to, this will be added to the next release.
@Michael
Thanks for the IE memory leak warning. Will investigate.
I’m using shadowbox as a gallery viewer, but also as a generic “modal popup window” viewer.
The gallery stuff is simple as that’s what you’ve built it for.
The other stuff is where the initial request for inline DIV support came in.
One example scenario I’m using it for is a simple “add this user as a friiend” button when viewing a user’s profile: 1. User clicks on button 2. JS onclick handler does an AJAX call to the back-end, which returns an HTML chunk “are you sure ? |YES| |NO|” - which is inserted inside the DOM 3. The onSuccess handler of the AJAX call now needs to show this DIV - hence calling the generic popup() method I pasted above to show it
The 2 buttons “YES” “NO” inside the confirmation popup are in turn AJAX calls, which the onComplete handlers of take care of closing Shadowbox and updating the main DOM with the friendship request.
Admittedly the above is a fairly convoluted example, but I wanted to show you what we’re doing with it (site not actually publicly accessible ATM).
I think that, if you’re going for more AJAX support in shadowbox, there should be a de-coupling of the shadowbox behavior & targets (divs/flvs/galleries) from the links. Right now an “A”nchor link is required to specify the options for shadowbox (via rel=”x” or JS, but an anchor is required nonetheless). If Shadowbox can provide an API for JS consumption that simply accepts options+targets it would be a great, generic-enough solution for AJAX and other JS-driven needs.
Just my $0.02
Again, could not thank you enough for this superb library.
Hi,
Here is the thing, im having problem with the CSS..
See what happen in this images
http://img229.imageshack.us/img229/6034/scr1a5863e7gi1.png
So, i don’t know why this happen
Feature Request:
Implement a base path variable in options for specifying the base path or url to the images folder and flvplayer.swf.
This would be beneficial when both of the above are located in the same location. It will decrease the amount of code required to specify the location of the loadingImage, overlayBgImage and flvPlayer.
I have made the changes and have created a diff located at:
http://sivel.net/patch/shadowbox/basePath-sivel-20080216.diff
This base file of the patch is shadowbox.js from the 1.08b download.
@Chris Drackett: you can simply add Shadowbox.setup(); after changing the href, like so:
$(”imageEnlarge”).href = “lgimages/” + image; Shadowbox.setup();
Might be too late, but maybe it’ll help someone else. =)
@Markus Hedlund: i had the same problem, but i realized it went away when i added these lines to the top
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">take off the space between the < and the ! and paste that ABOVE your
<html>tag at the way top. i used the transitional DTD instead of the strict because i was having compatibility problems with Firefox.hello i have a question .
is it possible to call shadowbox from a flash? like as geturl??
Hi
I have question, it is possible to use the shadowbox within adobe spry like this:
td spry:detailregion=”dsProducts” id=”boxshot”>
Using the YUI library
many thanks, I hav e sample url. mark
This such amazing code, Thank you. I was wondering If anyone had any ideas on how to implement it from flash.
I’m also getting the ‘content type cannot be determined’ error. Does this only determine content type using file extensions? Is there any way to tell it what type to expect?
Ben
here is a site i am working on http://smeermedia.com/testfmf/2006%20Video/2006%20Video.html,
i followed the screencast tutorial that Kb put together regarding integrating with Rapidweaver. Everything works great but i can’t get it to work in Explorer, if anyone can help me out i would great appreciate it, i will even pay you.
I really want to get this to work.
any idea to call shadowbox from flash?
Hi all, please could you recommend me a filmstrip scroller for ShadowBox which can display thumbnails of each gallery on one row and allow me horizontaly scrolling the gallery ? I know about CMotion script, but this one does not support multiple galleries on one page.I know about this http://www.thumbnailscroller.com/, but i am not sure if it is working with ShadowBox.
Milos
Any idea how work this with the onclick function because i am getting the data from a xml file with spry nested data.
example url: http://www.jt.nl/media/ew/jtbioscopen/mark/trailers/index.html
Click on the image and it is not working, any idea how to get this work, Many thanks and I am willing to pay for it.
@Mark: After you get the data back and load it into the page, use
Shadowbox.setupto set up the link.Hi, i have problems with .wmp videos in Firefox. The moviecontrols are hidden afert 1sec and you only see a little strip of the movie on the right site. Can anybody help me? (moviecontrols are on!)
@Michael: I solved my problem with IE7. The issue was, I didn’t have a DOCTYPE (don’t ask me why).
Thanks!
@nighthawk4900: Thanks, didn’t see that you had already posted the answer.
I added a public function so the Shadowbox can be resized after it is loaded (useful for inline content).
Add the following code under the
var resizeContent = function(height, width, callback) {...}block.Shadowbox.resize = function(height, width, callback) { resizeContent(height, width, callback); }
Now you can call this function from inside the Shadowbox popup.
I´m so surprised with this work, looks pretty amazing… I´ve just put my sand granite to you Michael…. please keep the good work.
What am I doing wrong? Please help! Links as this one:
Kontaktformularjust open in the same window, but no shadowbox!Here’s the code:
duo mosïk
etc.
scip: bug report: IE6 + mootools adapter + shadowbox-beta8This works on me! Thanks to scip
I have been going at this for a while and looked tirelessly but can someone provide the proper and simple install instructions lol? Thanks. maybe I am looking in the wrong place.
I like this Shadowbox thing, thanx! There is one thing I’d love to see with swf displaying in Shadowbox: Moviecontrols. Is that possible?
I started to use this great media viewer in a few projects and I will keep on using it. Just a small thing I noticed (I am using JQuery) if: - handleUnsupported is set to ‘remove’ - quicktime plug-in is not installed on the machine - the quicktime movie has the same relative name ie shadowbox[category]
Shadowbox doesn’t work at all in this case, all images opens in the main window
Apart from this, great stuff!
Is there any way to get working shadowbox from an iframe ? If i put a link in an iframe, shadowbox open inside of the iframe and not in the parent frame.
I know Lytebox or LightWindow do this, but i don’t use them, i want Shadowbox which is far more better :)
Yeah very great work and thx…
But if we could have the troubleshooting, me and leeloo, because i have the same pb and i wouldn’t change for another script for nothing in tha world !!
:p thx
To Fred B:
Thanks so much - that solved my issue!
I am so digging ShadowBox!
Hi there, I am trying to get the shadowbox working with mootools but nothing happened so on!!! I have put on these lines to my area and right after those lines i put the following code
window.addEvent(’domready’, Shadowbox.init);
With this… i cant make it work at all!!! Where is the mistake?
I posted a question at the Nabble forum, but it seems to be a bit quiet in there. It was just a quick “Moving ‘title’ down to where ‘counter’ is” DIV tag type question. Thanks for the work you’ve done on ShadowBox, and thanks for any help given.
Great work! I’ve just been integrating Shadowbox in the project I’m working on right now and it just works beautifully. Just one thing, the site is in three languages (Catalan, Spanish, English) and I guess the only way to deal with the different ‘next’, ‘previous’ etc is to put three different shadowbox.js in the scripts folder… isn’t there a more elegant way? Like it’d be great if I could just pass that as options within the init. I’m actually tempted to substitute the with image icons to avoid words entirely.
… two days later… I just found out about the text: object to include in the init. FANTASTIC!!
I am really liking this way of displaying media however on my site i am using a ajax script to dynamically change a div content however when the div changes then i the shadowbox fails to initialise from that div. Is there any way to re-initialise it without reloading the whole page?
From another div that is static it still works, just not in the dynamically called ones.
Anyways good work.
Having looked at half a dozen lightbox clones, I picked Shadowbox as the best from the list on Planetozh, but have the same problem that Panos had - I’ve checked that Shadowbox.init() is being called, but a clicked link just opens normally, with no sign of shadowbox magic (or JS errors). I’m using the latest trunk of Mootools (r1545), so I’m guessing some method calls have changed in Mootools since whichever version you last tested against. As Mootools (and other JS libraries?) are in flux, would be useful to know against which version your adapters work, or to get them updated. I’ll try looking into this a bit more tomorrow, but if you or anyone has any pointers/fixes, would appreciate hearing them.
thanks, Claude
Typical - just moments after posting, I thought to try changing Fx.styles to fx.morph (as frayde mentioned above), and this got it working. Sorry….looking forward to playing with the script now.
May i suggest a way to load external HTML inline with Ajax? The setTimeout is to force IE to render the box before making the request..
And another thing i needed was to read the HTML from the box before it closed
So i could validate it eg onBeforeClose: function(html) { if (statement) html.getElement(”form”).send(); elseif (something) ;//do else ;// nothing }
Hi there, fantastic job! Shadowbox is great. Is out there a ‘feature request list?’ Will be extremely nice to have a shadowbox to display images larger than the viewport ,extending his layer beyond page size and scroll to top…
Regards, Stefano
Hi …. I’m enjying the shadowbox work. Like some others I had some display problems using IE7, the box container was under the overlay and far away at the bottom of the page. I did just change this in the showbox.js file :
isIE7 = ua.indexOf(’msie 12′) > -1,
wich deactivate the specific behaviours for IE7 and it’s now working fine.
Kalisto