What do you use Shadowbox for?
12 Feb 2008 | tags: JavaScript, Shadowbox | 70 Comments »
Wow. One evening, about three weeks ago, I stayed up late working on a little JavaScript app called Shadowbox that I had been working on for several weeks. Before I went to bed, I shot off an email to the jQuery mailing list and made a quick post in the Ext.js forums just to see if anybody else would be interested in using it.
Little did I know.
With a big push from the ubiquitous Rey Bango, here’s what it has done so far:
- 8 beta releases
- 10,734 downloads from Google Code
- Over 1,500 bookmarks on Del.icio.us
- Adapters for 6 major JavaScript frameworks
- And a lot of traffic here on my site
Needless to say, I am very pleased that it has been received so well by the JavaScript community and that so many are getting use out of it. I have received quite a few emails with questions as well as comments on the original post, and I’ve responded to as many as I have time for. Please forgive me if I haven’t gotten around to answering your particular question…I’ve been swamped!
One thing that I have noticed is that quite a few people seem to be using it for purposes other than displaying static pictures and movies. I’ve e-talked with many individuals who are using Shadowbox for inline HTML content, image maps, and Ajax-powered galleries among other things, and I’d like to provide an API in 1.0 that will nicely accommodate several different methods of use.
So I guess my question is, what are YOU using Shadowbox for?
Please feel free to post links to anything you may have done with it. I’d like to see what you’ve come up with!
We’re playing around with using it instead of a modified Thickbox for http://www.foxycart.com. It looks better, but the biggest advantage is that Shadowbox can run javascript onload inside an iframe, which Thickbox has seriously trouble with (particularly if you want to manipulate the page with js onload; no go with Thickbox).
Example in case you want to see: http://themancan.com/shadowbox-1.0b8/index.test.html
Hi Michael, your script is wonderful for a live preview of my custom-built CMS.
My clients can have a fast preview of the page they are working on, without leaving the page. Very nice!
Screenshot here
Hi Michael
I actually just replied to this question (before seeing it) on the original post - http://mjijackson.com/2008/01/22/shadowbox-js-media-viewer-1-0-beta/#comment-141
If you’d like a more hands-on feel of my implementation drop me a private email with a username+password of your choosing.
@Brett: Very interesting idea. I think you could actually take it one step further and put the whole checkout process in the Shadowbox if you wanted to. Just make the “Next” link say “Checkout” and keep the “Close” link like you have it.
@Yari: Nice graphics for the CMS…very professional.
@Mina: I could move your post to this thread if you’d like. It would be more appropriate here. Thanks for your suggestions and patience. I agree with you about the need to make the whole activation mechanism more flexible. It’s just a little complicated to modify Shadowbox to perform a function it wasn’t built to do without adding a lot to the code base.
I use Shadowbox at my site, to show Google maps http://www.sirava.net/sk/ubytovanie/chata-vasil
The link is under “Mapa” at the right side.
Great work Michael
I have finally completed a more interesting screencast for the RapidWeaver community. Can you load PDFs into a Shadowbox also ? Regards Kb
Love Shadowbox. I was wondering if there is a way have Shadowbox window open automatically when the page loads? I would like to use it for a sort of splash page for a website to play a flv video on the home page. Thanks.
@Michael: Yes, the checkout could definitely be loaded in the shadowbox (all it’d take is a tweak to the target attribute of the “continue” button), but then you wouldn’t get the warm fuzzies from seeing the SSL lock in the address bar of the browser ;) But it’s definitely easy and possible.
Thanks again for creating it. It was a lifesaver for running javascript properly in the *box iframe.
@Michael: Hey, Shadowbox is simply great ! :)
@Kb: Sure, just add the pdf type extension to the ext array iframe option (jQuery syntax example):
<script type="text/javascript"> $(document).ready(function(){ var options = { ext: { img: ['png', 'jpg', 'jpeg', 'gif', 'bmp'], qt: ['dv', 'mov', 'moov', 'movie', 'mp4'], wmp: ['asf', 'wm', 'wmv'], qtwmp: ['avi', 'mpg', 'mpeg'], iframe: ['asp', 'aspx', 'cgi', 'cfm', 'doc', 'htm', 'html', 'pdf', 'pl', 'php', 'php3', 'php4', 'php5', 'phtml', 'rb', 'rhtml', 'shtml', 'txt', 'vbs'] }, handleUnsupported: 'remove' }; Shadowbox.init(options); }); </script>@Michael: Hi, your shadowbox is amazing! I have a little “magic” trouble or bug with shadowbox on my site. I have a flash antipixel on the header of the site. On FireFox 2.0.0.12 only, if I use shadowbox, flash antipixel is hidden! Load this page and look for “blogbabel” antipixel at the top of the screen, to the right of google rank. After a few seconds, it is no longer visible!
@Michael: If I don’t include the CSS and leave JavaScript init only, then all works properly. The trouble is JavaScript+CSS…
@Giovambattista: Try adding
display:noneto the#shadowboxrule in the CSS and see if that helps.Is there a way to have Shadowbox window open automatically when the page loads?? or by a javascript call?
I just came across your class, and it’s truly amazing what it can do, but… It doesn’t seem to work properly for me in IE7!
The odd thing is, that the examples in your site do work for me. Here is a sample page I’m using to make tests. In Firefox it works ok, but in IE the overlay only shows up the first time you click the link, all the subsequent times it doesn’t. I cannot understand, for the life of me, what’s wrong with it. Do you think you can help me?
Could it be due to the mootools version I’m using? I’m using MooTools v1.2, and had to modify the backend just a little bit in order to make Shadowbox work with it (you can see the js by yourself).
Thanks in advance.
@Michael: Yes… I find… the trouble is on css… I fix… Thanks
Referring to my previous comment which is awaiting moderation, I tried swapping mootools 1.2 with mootools 1.1 and indeed it works now. I’ll try and submit a bug report to the mootools crowd, but in the meantime, given your expertise with javascript and the DOM (I’m a total newbie!), I’d be thankful to you if you could still check it out and see what’s going wrong.
I haven’t had time to use Shadowbox for much other than to play with it, but I’m planning to use it for quite a lot when I find the time to get it all together.
So far, I’m employed it on two client websites, replacing a Slimbox/Mediabox combo. It’s integrated into my not-yet-live redesign of my personal site. And it will sometime soon be employed in at least two of my web photo gallery templates for Adobe Lightroom, in one template to display images; in another album indexing template, it will be used to launch web galleries atop the album index page in a Shadowbox. Those templates will then be distributed via my website and various Lightroom forums and hubs to professional photographers and Lightroom users all over the damn place.
Yes, I love Shadowbox, and I’ve got lots of plans for it. You’re doing incredible work on this, coming out of no where and kicking the pants off all of the pre-existing Lightbox scripts. There’s nothing I like so much as standards-compliant, ass-kicking apps.
Thank you!!
@luci: I think that will only work if you have some sort of PDF plugin installed in your browser.
@Fabio: Something in MooTools 1.2 breaks Shadowbox. If I get some time this weekend, I’ll look into it. On a side note, I think it’s a good gauge of how much work the framework is trying to do for you under the hood.
@theturninggate: Thanks. You’re welcome. ;)
Michael
Like so many, I love Shadowbox.
But… is there a way (without rewriting the base code) to make the pop up truly modal?
A careless click outside the lightbox area closes it. That’s great for galleries, presumably, but could be really frustrating for someone who’s just written a novella in my contact form but not sent it and accidentally closes everything.
(I have my eye on an alternate but I’d like to keep all my lightboxing in one dev tool — and I love the design philosophy you espouse.)
cheers,
TK
PS… in answer to your question, I’m using Shadowbox for a gallery of active web clients, so the ability to mix full pages with other content is brilliant.
I’m also likely to use it as the basis for a web gallery for a new visual artist client.
The contact form usage I mentioned in my post above is a link on my ‘afterhours’ page which is sort of hidden on my business site. It’s often the ‘entry portal’ for those who follow my sig line links on BBs and the like. I use a conventional contact form page elsewhere in the site because I emphasize accessibility and content over style but… well… ya gotta have some pizzazz someplace.
Hey, it is a fantastic utility. We used Thickbox earlier but Shadowbox is definitely sexier visually and is also quite easy to set-up.
Feature Request: I would however also want an option to scroll long images. Although drag is cool but many website visitors do not know about it. Scroll bars are obvious.
Thank you for a great tool.
I created a shadowbox for login form. When the user clicks on ‘login’ link, an external page ‘login.php’ is loaded from the index.php page using shadowbox:
The login.php appears nicely but once the user information is validated, I am not being able to goto index.php from login.php. How do I achieve that? What code needs to be placed in the login.php? Any javascript snipped in this child login.php page? Please help!
@Amit: I’ve been trying to do the same. I could do that using Lightbox sample from:
http://particletree.com/examples/lightbox/
They’ve used something like this in the child page:
<a href=”#” class=”lbAction” rel=”deactivate”><button>Cancel</button></a>
I would like to know if there is anything like ‘deactivate’ in the shadowbox that we can use in the child page to close the page itself.
@TK: This feature has already been integrated. In 1.0 you’ll be able to disable the overlay clicking behavior to make it more modal.
@MK: The power to do this is yours. You should be able to add an
overflow:autoto your#shadowbox_contentCSS rule to achieve the effect you desire.@Amit & Nayan: You could always just use
Shadowbox.close().@Michael: Thanks for Shadowbox. I really like it, and it’s easy to use. There is a lack of functionality that bothers me… ;) I can’t use it for image maps. It works only for anchor elements, and I really need to be able to use image maps as well. Also, how can I open a shadowbox window from javascript? I can’t figure out this part… Thanks again, and hoping for your reply! :)
@Michael: Really nice app! One problem/bug found with unsupported file types. Say, for example, there’s a stray .doc that gets picked up in the setup. The getPlayerType() function sets the type to “unsupported” - note that there is no hyphenated extension, just plain “unsupported”! This is good so far.
The problem is that the RE.unsupported regexp requires a hyphen extension, so when setupGallery() tests against RE.unsupported, it fails to match, and (testing in Firefox) the javascript produces error upon error of being unable to determine file type.
The solution I have used is 2-fold:
1) Modify the RE.unsupported regexp to be
2) in setupGallery(), change
if(options.handleUnsupported == 'link'){to
if(match[1] && options.handleUnsupported == 'link'){so that if the file type is completely unsupported (ie. nowhere in the options.ext object) it defaults to ‘remove’ handling rather than ‘link’ and lets the browser sort it out for itself.
Hope that helps.
Hmm…Turns out that wasn’t quite good enough, because although the browser handles it—by opening the downloaded doc in Word in my case—when you go back to the browser none of the other legitimate shadowbox links work!
Therefore the only sensible thing I can see to do is check the file type before adding the click handler and setting up the cache object, ie. just do absolutely nothing if the file extension is not somewhere within options.ext.
Therefore, in Shadowbox.init()
//Wizzud... // RE.img = new RegExp('\.(' + options.ext.img.join('|') + ')\s*$', 'i'); // RE.qt = new RegExp('\.(' + options.ext.qt.join('|') + ')\s*$', 'i'); // RE.wmp = new RegExp('\.(' + options.ext.wmp.join('|') + ')\s*$', 'i'); // RE.qtwmp = new RegExp('\.(' + options.ext.qtwmp.join('|') + ')\s*$', 'i'); // RE.iframe = new RegExp('\.(' + options.ext.iframe.join('|') + ')\s*$', 'i'); RE.supported = []; for(var i in options.ext){ RE[i] = options.ext[i].join('|'); RE.supported.push(RE[i]); RE[i] = new RegExp('\.(' + RE[i] + ')\s*$', 'i'); } RE.supported = new RegExp('\.(' + RE.supported.join('|') + ')\s*$', 'i');This gives a new RE RegExp of RE.supported. It seemed sensible to put the RegExps inside the loop to save a bit of code and possibly time.
Then, in Shadowbox.setup()
//Wizzud... if(RE.supported.test(link)){ if(typeof link.shadowboxCacheKey == 'undefined'){ // assign cache key expando // use integer primitive so no memory leak in IE link.shadowboxCacheKey = cache.length; SL.addEvent(link, 'click', handleClick); // add listener } cache[link.shadowboxCacheKey] = this.buildCacheObj(link, opts); //Wizzud... }This simply puts an if clause around the setup stuff (immediately after having set link=links[i]), which tests that the file extension is in RE.supported (ie. options.ext) before setting or applying anything.
Love the script! Great Job! I want to make it work with jQuery and want to make it work like the Prototype example.
document.observe('dom:loaded', function(){ Shadowbox.init({ skipSetup: true, // skip the automatic setup }); Shadowbox.setup($$('a.myclass'), { gallery: 'Vacation', continuous: true, counterType: 'skip' }); });How would i do this same thing in jQuery? Thanks again and sorry for the NEWB question! :-)
Also i was trying to add in the height and width using the option example with JQuery and it does not seem to be doing anything to a link that just has the rel attribute set to shadowbox.
Example :
$(document).ready(function(){ var options = { resizeLgImages: true, displayNav: true, continuous: true, initialHeight: '240', initialWidth: '320', handleLgImages: 'resize', handleUnsupported: 'remove', keysClose: ['c', 27] // c or esc }; Shadowbox.init(options); }); <a title="Alien" href="gallery/alien.flv" rel="shadowbox">Flash Video Link</a>@Zdeto: I’ll be adding support for image maps soon.
@Roger Barrett: Thanks for digging through the code to fix this bug. Most people aren’t that helpful. ;) I’ll look into this behavior and fix it.
@Aaron: Please read the docs to find out how to set the width and height for movie files.
Anyone have any idea or done this with JQuery? I would be sooooo appreciative!
document.observe('dom:loaded', function(){ Shadowbox.init({ skipSetup: true, // skip the automatic setup }); Shadowbox.setup($$('a.myclass'), { gallery: 'Vacation', continuous: true, counterType: 'skip' }); });@aaron: Here’s some jQuery code:
jQuery(function($){ var boxOpts = Shadowbox.getOptions(); //get shadowbox options boxOpts.ext.iframe.push('pdf'); //add pdf as display in iframe $.extend(boxOpts, {skipSetup:true, handleUnsupported:'remove', handleLgImages:'drag', counterType:'skip'}); //add in options Shadowbox.init(boxOpts); //initialise Shadowbox.setup($('a.myClass')); } });It’s not quite the same as the documented examples in that it gets the options defaults from Shadowbox first, modifies them, then supplies the modfied options back to Shadowbox.init(). I then call Shadowbox.setup(), passing in a jQuery object of the links I want Shadowbox to trigger on.
The options I have supplied to the init() are my standard ones. If I want to add more links a bit later in the page, maybe with different or additional options I can.
jQuery(function($){ var newA = $("<a href='pageInFrame.php'>Look here!</a>").appendTo('#myDiv'); Shadowbox.setup(newA, {animSequence:'sync', onClose:fnClosingPIF}); //you can also supply height, width and gallery as part of the options... Shadowbox.setup($('a.gal1'), {height:400, width:400, gallery:'a'}); Shadowbox.setup($('a.gal2'), {height:450, width:600, gallery:'b'}); });Note that the above are simply examples, and are by no means exhaustive of the possible approaches that can be taken.
@Roger: Careful…displaying PDF’s isn’t as easy as adding
'pdf'to the extensions array. You have to have the proper plugins to be able to view them.@Michael: Thank you for taking image maps into account. I’m looking forward to see it working. Actually, I tried to modify the Shadowbox by myself to make it work with maps, and I managed to do it. Unfortunately, after a while I’ve discovered that it’s IE6 functionality was messed up, so I must have broken something inside… :) So, I’ve given up for the moment, waiting for you to implement this.
But, in the meantime, I really need to find a way to open a Shadowbox window from javascript. Since the Shadowbox is pretty much based on the Lightwindow from Stickmanlabs, and I’ve used that one before I’ve found your Shadowbox, I expected to have some similar functionality.
On the Lightwindow’s How to use page, there is a section named “Create and Launch a window with a Javascript Call” and gives an example like this:
myLightWindow.activateWindow({ href: 'http://stickmanlabs.com/images/kevin_vegas.jpg', title: 'Waiting for the show to start in Las Vegas', author: 'Jazzmatt', caption: 'Mmmmmm Margaritas! And yes, this is me...', left: 300 });So, I’ve been looking at the Shadowbox’s documentation for something similar, but couldn’t figure it out. I’m sure there must be a way, I just couldn’t find it…. :)
P.S. Your comments preview WP plugin is great! I love it! What is it’s name? BTW, there is a bug in it, I’ve accidentally typed twice “<” and everything has frozen, I had to kill the browser and restart…
@Michael: Yes, and I have a ’supposed’ pdf detector script…
(function(){ AcrobatInstalled = false; var i = 0; if(navigator.plugins && navigator.plugins.length){ var acro = ['Adobe Acrobat' /*v7 and earlier*/, 'Adobe PDF Plug-in' /*v8 onwards*/]; while(!AcrobatInstalled && acro[i]){ for(var j = 0, len = navigator.plugins.length; !AcrobatInstalled && j -1 || navigator.plugins[j].description.indexOf(acro[i]) > -1); } ++i; } }else if(window.ActiveXObject){ var acro = ['AcroPDF.PDF' /*v7 onwards*/, 'PDF.PdfCtrl' /*v6 and earlier*/]; while(!AcrobatInstalled && acro[i]){ var actx = null; try{ actx = new ActiveXObject(acro[i]); }catch(e){} AcrobatInstalled = (actx); ++i; } } })();but it seems somewhat unreliable - for example, IE6 reports not installed, yet handles PDFs; Safari 2 reports not installed, yet will display PDFs, albeit without the reader controls (just as an image); Opera reports installed, but downloads the PDF.
@Roger Barrett: OMG…thank you so much for the info on Jquery and i will test it out shortly! Cant wait!
I can not tell you how much i appreciate the help! :-)
@Zdeto: It’s a far stretch to say that Shadowbox is actually based on LightWindow. It’s really not. A few snippets of code here and there were borrowed from the LightWindow and LightBox projects, but other than that the code is all original. It follows a design philosophy that is much different from either of those scripts. That’s probably why the functionality differs. ;)
I’m working on modifying the script so that users will be able to launch Shadowbox from a JavaScript call as you say. With all the feature requests, it’s hard to find the time…
@Roger: Thanks for the sample code. It’s just a shame this doesn’t work across the board. If we could reliably detect PDF support, we could feasibly add PDF’s as an option. I’d be interested in seeing further tests.
Bit strange here on your site Shadowbox works with IE6 (aarghh) but on my mine I use Mootools 1.11 it does not want to work. Is there a valid explanation or do I have to add some other params elsewhere in the initialisation you can see an example over here http://demo.crmtechnik.com/shadow2
Thanks again Kb
@Zdeto and @K
For JS-initiation of shadowbox, see my hack posted at http://mjijackson.com/2008/01/22/shadowbox-js-media-viewer-1-0-beta/ (search for “function popup”). It’s nowhere near as good as native support would be inside shadowbox itself, but it does the job for me.
@Michael - Might be a good idea to toss this up on google projects or something like it to triage comments vs bug reports vs requests as well as thread conversations…
First off wanted to say that I love this…. But, I have a small problem. I dynamically load content into a div using ajax, so I dont have to deal with slow page reloads. I would like to use shadow box on this content in the div, but it doesnt seem to recognize elements that are not initially loaded by the main page in DOM. Is there any way around this?
@Michael - I’ve released the Shadowbox web photo gallery template for Adobe Lightroom. It can be reached from the website link, above.
Also, I have a feature request. It would be great if it were possible to navigate to images Next and Previous by hovering over and clicking on images in the Shadowbox, as can be done using Slimbox and other types of lightbox. I realize this could interfere with other types of media content, but if it were an option that could be enabled/disabled via settings, it would make a very nice addition to the script.
@Michael: Another suggestion if I may…In the jQuery adaptor you’ve defined
jQuery.fn.shadowbox()(from Mike Alsup). Unfortunately, it doesn’t allow for running jQuery in noConflict mode.Can I suggest that you change the first line of the declaration to be
$.fn.shadowbox=...., ie use $ instead of jQuery, and then wrap the entire function in(function($){.....})(jQuery);. For example…(function($){ $.fn.shadowbox = function(options){ return this.each(function(){ var $this = $(this); // support jQuery metadata plugin var opts = $.extend({}, options || {}, $.metadata ? $this.metadata() : $.meta ? $this.data() : {}); // support embedded opts (for w/h) within the class attr var cls = this.className || ''; opts.width = parseInt((cls.match(/w:(\d+)/)||[])[1]) || opts.width; opts.height = parseInt((cls.match(/h:(\d+)/)||[])[1]) || opts.height; Shadowbox.setup($this, opts); }); }; })(jQuery);[the altenative is simply to replace all four $ calls with jQuery calls … but I think my way saves one whole character!]
hey there
I would love to call this awesome code from flash - but i m too stupid - any suggestions? (except getting a different job:-)
First, thanks for this wonderful Shadowbox. Then, I integrate it in my Flash Coverflow emulation to display multimedia contents from the flow. Demo here.
Ok, never mind my last comment, I should have researched a little more and figured out that you need to use the setup command after an ajax call. the problem I have is trying to load an image that is being served via a servlet. I always comes up with an empty box. Here is what the href looks like. I can display the image in my page, but no luck in the shadowbox.
@Roger: Great idea. Will be updated in the next release.
@Joel: Use
Shadowbox.setup.@Fabio: MooTools 1.2 doesn’t currently work with Shadowbox because they changed the name of
Fx.StylestoFx.Morph. There are a few other changes they made to the framework that break the opacity animations. When it’s out of beta, I’ll try and make an adapter that will work on top of MooTools 1.2.For me it is to show diving videos http://www.waveneyavenue.co.uk/mystuff/ by way of a gallery. its a great piece of code and a very clever idea to use adapters as everyone has their favourite JavaScript framework these days. My only complaint id the file size, but hey with something so versatile would do you expect! ;) Anyway keep up the good work
We’ve implemented it into the popular shopping cart system, X-Cart @ http://www.xcartmods.co.uk
Can you please aprove my comments…was hoping someone could help. :)
@Aaron: Would you please post your support questions in the forum? I’m trying to keep the blog threads on topic. Thanks.
Oops im sorry…did not know you had a help forum. What is the URL…i am probably being totally restarted but i cant seem to find it. :-)
Thanks again!
Never mind…i am STOOPID! i found it!
Thanks and sorry for the stoopid question! :-)
I have created a WordPress plugin titled Shadowbox JS. That can be found at http://sivel.net/2008/02/shadowbox-js/. I released the initial release yesterday and just updated it to version 0.3 today.
It uses version 1.0 final and includes support for jQuery, Prototype + Scriptaculous, YUI, Ext, MooTools and Dojo. jQuery and Prototype + Scriptaculous are used from the Wordpress install and the other libraries are included with the plugin.
The plugin seems to be very popular on Wordpress.org at http://wordpress.org/extend/plugins/shadowbox-js/ with already around 90 downloads in less than 24 hours.
I’m looking at moving to this from lightbox, but am missing the option to add a “caption” — longer narrative text than just the title. Anyone found a way to make this work?
I have written a WordPress plugin that implements Shadowbox.
You can find more details about the plugin at http://sivel.net/2008/02/shadowbox-js/
It has been updated to include version 1.0 final and includes support for the six Javascript Libraries that this script works with.
jQuery and Prototype + Scriptaculous are used from the WordPress codebase and YUI, Ext, Dojo and MooTools are included with the plugin. I’ve also included file size payloads so that users can see how much data will have to be transferred for each Javascript Library.
First of all a big thx to you Michael, shadowbox is already the king of “boxes” =)!
I use shadowbox on several sites University Site and I would like to use it on our Event & Booking Site (just a prototype, it’s not really online (official) now because it’s not finished yet) but there’s the problem (on the Booking Site I’m using lightwindow right now because I wasn’t able to open shadowbox out of an iFrame…):
I’m working (on this site) with iFrames because I couldn’t find a solution of “inlineboxes” which create scrollbars automaticly when the content clips the box (this is not always the case) –> when somebody can tell me how to do this with div-containers, I would be very grateful because I tried, but it didn’t work (the div fittet the content and not the other way round^^) … ok, that’s the reason I use iFrames and that’s where my problem begins (ergo: if I hadn’t to use iFrames, my problem would be solved =D): How can I open a shadowbox (the link with class=”shadowbox” is in the source html file of the iframe) over the whole page out of an iframe??
I started a thread in the support forum (here) where (maybe) a direction to a solution crystalized out –> shadowbox.js in the parent site (which holds the iframe) and then call that parent window/site/whatever from inside the iframe with a js-call … I think it could work because it works in lightwindow with this script (to insert after the link)
< script type=”text/javascript”> var links = $$(’.lightwindowiframelink’); links.each(function(link) { Event.observe(link, ‘click’, function() {parent.myLightWindow.activate(null, link);}, false); link.onclick = function() {return false;}; }); </script>
but I don’t know how to adapt it to shadowbox (I can read & understand the most of a JavaScript File but I’m not that good in it to write somthing like that myself…maybe in 6 months or so =D) btw. what’s analog to “.lightwindowiframelink” & “myLightWindow.activate” in the shadowbox.js (does somthing like that exist at all??) and last but not least: LightWindow uses the prototype framework (with scriptacolus.js & effects.js)…do I have to use this framework as adapter with shadowbox to run it out of an iframe?
Thx to anyone who reads this bunch of problems =))
Hello to everybody I have implemented shadowbox to show video, external pages, and forms in my site http://innerspace.gr
Thx for having a look! Ioannis
Why do all lighbox-solutions have that nasty grey screen until new content is being loaded? Isn’t it possible to just keep the old screen before fading in the new one?
@crazy: Would you suggest I show the old picture while resizing and get an even nastier moving picture with beautiful big gaps around the edges?
very nice shadowbox its very usefull to us really very thanks to you
Hi,
Im using Shadow box for what it was designed for. Although im curious to know if there is a way I can modifiy the code to allow the use of width and height so that it is xhtml 1.1 valid. The current examples in the testing document included make my pages no longer 1.1 valid. I had to remove the width and height and just a use rel=”shadowbox” with no attachments for it to be valid 1.1. I’m using this built into my php website. Which im still devloping. So adding something that can make the width height useable can easly be added on a global proportion. :-)
Im not much of a java coder so I don’t really know if there is a way around this. Anyone got any ideas? I love the script. Cleans up my videos page big time. I needed a solution like this, because iframe is also not 1.1 valid as well, and I wanted as little page loading as possible.
Thanks, Shawn
@Luk,
Wouldn’t a simple overflow: auto; in css do the trick for you’re website?
I think using Iframes, is not the best solution. If you design your page with a base layout, and simply define the css block sizes you need, and use overflow as a property you should get a clean looking page, and in only rare cases where there is too much content you will get an overflow with scroll bars. Although its usualyl never needed for height reasons unless you have a page where the height is consistantly changeing then using the css height: property is useful, otherwise I almost never use it for content sections of websites.
Ciao, Shawn
Hm, sounds really good and it’s maybe what I’m lookin’ for the whole time =))…I’ll try to adapt your hints with my knowledge (selfhtml I’m coming=D), thank you anyways!
greez, luk
[…] mjijackson » What do you use Shadowbox for? One thing that I have noticed is that quite a few people seem to be using it for purposes other than displaying static pictures and movies. I’ve e-talked with many individuals who are using Shadowbox for inline HTML content, image maps, and Ajax-powered (tags: javascript webdesign slideshow) […]
How can i use a client-side image map -like in your example- but get in the lightbox a web page?… Sorry for my english and please help meee!!! thanks!!!
Hi, and thanks for Shadowbox again! We have chosen it to replace Lightbox and integrate it to upcoming version (1.10) of TikiWiki CMS/Groupware. It’s integrated so far in features such as Image Galleries, File Galleries and every place where wiki syntax for links and linked images is applicable. More to come :) For details see http://doc.tikiwiki.org/Image+Gallery+Config#Shadowbox ( for the wiki syntax Shadowbox demo see http://zukakakina.com/tiki-index.php?page=Shadowboxgallery ).
Dear Michael, it was a bit tricky to include the 1.0 Version in Joomla 1.5., but I made it, and it works perfectly. I prefer it over all the other Joomla plugins, as it is very flexible, works for every kind of media content and looks much nicer and more elegant. Also, that is a big advantage, it does not cause any script conflicts. This is always a problem within Joomla, when you use different components, modules and plugins. I currently use it for training videos (.flv) and also for project flowcharts on my site. For testing purposes only, I tried to make the 2.0 shadowbox version run, but until now, didn’t succeed, but that’s fine for me. Thank you very much for this great tool!
Hi,
it’s me again after some weeks =), I did how Shawn adviced and redesigned my page with div’s instead of iFrames. Now an AJAX-Request in combination with PHP loads the content dynamicly into the main page…that all works great, but shadowbox isn’t working…I asked around in various forums, but I couldn’t get a helpfull answer, so I came back here and hope the writer of Shadowbox can tell me what I’m doin’ wrong btw. what I have to change =)…
First the link to the “Problem-Site”: click me
My Problem seems simple but somehow it isn’t^^…I have my main site “index.php”, there’s the shadowbox .js & .css and also the adapter included
the “index.php” contains two div-containers which are dynamicly filled with content by an AJAX-Request (.js & .php) … this AJAX Request loads different .html files into the div’s and that’s where my problems begin…
on of these included .html files contains a link which should be opened with shadowbox
but when I click it (just do it yourself on the site =D), the site doesn’t open in shadowbox, it opens a new window, like target=”_blank”, which is nowhere in this -Tag…^^
what am I doin’ wrong? Thx for every hint!
Now that MooTools 1.2 is out. Do you have any ETA on an updated adapter? Or at least some tweaks I can make to get it somewhat working for the time being.
Hey All,
In the past I used lightbox and only used it for full sized versions of thumbnail images. I really liked the feature on http://gentoo-portage.com for viewing ebuilds (install scripts) in a shadow/light box modal dialog so I switched when I finally heard about shadowbox.
Currently I’m working on a newer version of my CMS that uses modal dialogs for certain editing forms (like editing content, using the form in a shadowbox iframe rather than in the current layout).
I ran into a small setback that I just figured out a super easy fix for before and figured this might help someone out. All of the links in my site refer to the directory and leave it to the server to resolve to the directoryIndex (so links to the root go to / instead of /index.(php|html|etc)). This threw Shadowbox through a loop when it was to open a link like:
<a href=”?feature=true&dialog”>Feature</a> or even a <a href=”/directory/?whatever”>whatever</a>.
I resolved this by adding ‘/’ to the ext list for iframe, a blank ext like ” would work as well; however, I’m going to leave it as ‘/’ unless I need it to do otherwise. here’s what i’m talking about really:
which is just a modification of what was stated before in the PDF howto (which I don’t entirely like considering a lot of clients choose to download and open in a seperate PDF viewer rather than within the browser plugin. I does look really awsome with the plugin though, maybe there’s a good JS way to detect this behavior, I might research it later…).
In the future, I plan to implement something that will scan through a page for links with images in them (say a thumbnail), that point to images, and automatically add the rel=”shadowbox” attribue for them if they don’t exist. It really shouldn’t be anything too complex with the Shadowbox.setup() with prototype’s $$().each().
Thanks for a great solution for modal javascript windows/dialogs/iframes/etc.