me too ----- Original Message ---- From: Christopher Jordan <[EMAIL PROTECTED]> To: jquery-en@googlegroups.com Sent: Thursday, April 19, 2007 10:27:05 AM Subject: [jQuery] Re: ThickBox question
Hey Theo that's pretty cool! I like the site. :o) Chris Theo Welch wrote: > > Hi All, > > I happened upon your discussion below. > > Just FYI, I have a customized Thickbox running on this photography exhibit: > > http://www.archives.gov/exhibits/twww/ > > Cheers! > -THEO- > > > > > On Apr 19, 2007, at 10:36 AM, Christopher Jordan wrote: > >> >> Rob, >> >> Thanks heaps for sharing! I'll look at this in more detail later >> today, and holler if I have questions (if that's okay) :o) >> >> Chris >> >> Rob Desbois wrote: >>> I also got put off jqModal initially, mainly because the TB styling >>> was very nice but jqModal you have to put the effort in to get >>> looking right. >>> I created my own wrapper function around jqModal: >>> /* Creates a jqModal window and appends it to the body. >>> * @param idPrefix The prefix to attach to elements' IDs. The window >>> div will have _jqmWindow appended to the prefix, the close button >>> will have _jqmClose, and the title span will have _jqmTitle appended. >>> These IDs may be used to alter behaviours, styles and content as >>> required. >>> * @param content The window's HTML content. >>> * @param jqmOptions The options to pass to $.jqm() when setting the >>> div up as a jqModal window. >>> */ >>> function CreateJQModalWindow(idPrefix, jqmOptions, content) >>> { >>> $( "<div id='"+idPrefix+"_jqmWindow' class='jqmWindow'>" + >>> "<div style='height:100%'>" + >>> "<div class='jqmTitle'>" + >>> "<a id='"+idPrefix+"_jqmClose' href='#' >>> class='jqmClose'></a>" + >>> "<span id='"+idPrefix+"_jqmTitle'></span>" + >>> "</div>" + >>> "<div class='jqmBody'>"+content+"</div>" + >>> "</div>" + >>> "</div>") >>> .jqm(jqmOptions) >>> .appendTo("body"); >>> $("#"+idPrefix+"_jqmClose") >>> .hover(function() {$(this).addClass("jqmCloseInverse");}, >>> function() {$(this).removeClass("jqmCloseInverse");}) >>> .click(function() {$("#"+idPrefix+"_jqmWindow").jqmHide()}); >>> } >>> I then use that like this: >>> CreateJQModalWindow('window1', {closeClass:false, trigger:false, >>> modal:true}, >>> "<div>The HTML content of my window</div>"); >>> I created the prefix option so that I can have multiple windows >>> existing on a page (although only one would be visible - it just >>> saves on recreating them ecah time). The window can be shown and >>> hidden with: >>> $("#window1_jqmWindow").jqmShow(); >>> And to top all of that off, this is my CSS: >>> div.jqmWindow {position:absolute; top:50%; height:200px; >>> margin-top:-100px; left:50%; width:300px; margin-left:-150px; >>> background:url(/images/jqmodal-bg.gif) repeat; border:2px solid >>> darkblue} >>> /* Background iframe styling for IE6. Prevents ActiveX bleed-through >>> (<select> form elements, etc.) */ >>> * iframe.jqm {position:absolute; top:0; left:0; z-index:-1; width: >>> expression(this.parentNode.offsetWidth + 'px'); height: >>> expression(this.parentNode.offsetHeight + 'px')} >>> .jqmTitle {margin:0; padding:0 3px; font-family:Arial,sans-serif; >>> font-size:12px; font-weight:bold; border-bottom:thin solid #aaa; >>> line-height:21px; color:#3341bf; background:#e8eaff} >>> .jqmBody {padding:4px} >>> .jqmBody * {margin:2px} >>> .jqmClose {float:right; height:16px; width:16px; margin-top:3px; >>> background:url('/images/syncwatch- close.gif')} >>> .jqmCloseInverse {background:url('/images/syncwatch-close-inverse.gif')} >>> .jqmOverlay {background-color:#e8eaff} >>> My jqmodal-bg.gif is just a faint background patterning. The two >>> close buttons for normal and hover (inverse) are 16x16 images. >>> I hope all of that helps! There can be quite a bit more work to use >>> and style jqModal, but it is designed to be played with where TB is >>> designed to be ready to go and used as-is. >>> rob >>> On 4/18/07, *Christopher Jordan* <[EMAIL PROTECTED] >>> <mailto:[EMAIL PROTECTED]>> wrote: >>> Rob, >>> While I was looking into this, I did spend quite a while at the >>> jQModal site >>> looking at it. I can't off-hand remember why I didn't choose it. >>> Maybe you could >>> share with me a few code snippets showing what you've done with >>> jQModal. I'm >>> interested, as I've started hacking up the thickBox code and css to >>> achieve some >>> styalistic aims. >>> Thanks, >>> Chris >>> Rob Desbois wrote: >>> > No problem. >>> > Also, fwiw I ended up migrating to jqModal instead of thickbox. >>> > My reasoning was that despite TB being a very good plugin, it's >>> not that >>> > customisable without hacking up the code. Whilst I achieved >>> what I >>> > wanted through hacking the plugin, I realised that jqModal was >>> designed >>> > to be a customisable window plugin, whereas TB is supposed to >>> be far >>> > closer to Lightbox and is not so easily manipulated in terms of >>> > behaviour and content as jqModal. >>> > >>> > Just my feeling on it, and as I said it is a very good plugin, >>> but it's >>> > worth thinking early on about which one is more suitable for your >>> situation. >>> > Have fun with it! >>> > >>> > rob. >>> > >>> > On 4/18/07, *Chris Jordan* < [EMAIL PROTECTED] >>> <mailto:[EMAIL PROTECTED]> >>> > <mailto:[EMAIL PROTECTED] >>> <mailto:[EMAIL PROTECTED]>>> wrote: >>> > >>> > >>> > Rob, >>> > >>> > That is essentially what I ended up doing. I got busy with >>> the coding >>> > so I didn't have time to update this thread, but that is >>> exactly what >>> > I ended up doing. >>> > >>> > Thanks for the help though! :o) >>> > >>> > Cheers, >>> > Chris >>> > >>> > On Apr 18, 3:51 am, Klaus Hartl <[EMAIL PROTECTED] >>> <mailto:[EMAIL PROTECTED]> >>> > <mailto:[EMAIL PROTECTED] >>> <mailto:[EMAIL PROTECTED]>>> wrote: >>> > > Chris Jordan schrieb: >>> > > >>> > > >>> > > >>> > > > Hi folks, >>> > > >>> > > > I've searched the archives, but didn't find what I was >>> looking >>> > for. So >>> > > > if this has already been discussed and someone can point >>> me to >>> > the old >>> > > > thread, that'd be awesome. Otherwise: >>> > > >>> > > > Is it possible to trigger the opening of a thickbox >>> without a >>> > link? In >>> > > > other words, I want to do this: >>> > > > <script> >>> > > > if(true){ >>> > > >>> > > > open.thickbox.somehow (url, width, height, etc, etc, >>> etc) >>> > > >>> > > > } >>> > > > </script> >>> > > >>> > > > Thanks, >>> > > > Chris >>> > > >>> > > You could hijack a link with trigger for that... If the >>> link has >>> > been >>> > > thickboxed: >>> > > >>> > > $('#trigger-thickbox').trigger('click'); >>> > > >>> > > Don't know if that helps. >>> > > >>> > > -- Klaus >>> > >>> > >>> > >>> > >>> > -- >>> > Rob Desbois >>> > Eml: [EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]> >>> <mailto:[EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]>> >>> > Tel: 01452 760631 >>> > Mob: 07946 705987 >>> > "There's a whale there's a whale there's a whale fish" he cried, >>> and the >>> > whale was in full view. >>> > ...Then ooh welcome. Ahhh. Ooh mug welcome. >>> -- >>> http://www.cjordan.us >>> --Rob Desbois >>> Eml: [EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]> >>> Tel: 01452 760631 >>> Mob: 07946 705987 >>> "There's a whale there's a whale there's a whale fish" he cried, and >>> the whale was in full view. >>> ...Then ooh welcome. Ahhh. Ooh mug welcome. >> >> --http://www.cjordan.us > > -- http://www.cjordan.us
