German Rumm’s blog

Took Mika’s advice, decided to try out Thickbox Reloaded. Still not what I was looking for. Yeah, it looks much more jquery-like, but it still doesn’t provide any extra functionality, compared to original thickbox.

It allows passing options, but unfortunately those options are of no use to me. Those options control thickbox dimensions (top, left, width/minWidth, height) and localization.

Decided to try out jqModal, now that thing is way more powerful. It doesn’t have any built-in design like thickbox, so you have to create your own window layout, but it allows attaching handlers to onHide(), onShow() and onLoad() events. It allows controlling jqModal programmatically using jqmShow() and jqmHide(). It allows adding custom triggers on-the-fly and it even allows opening several dialogs simultaneously.

So, it basically has everything you might possibly need, stuffed in a 3 Kb file.

Useful link

Tutorial describing loading external content into IFRAME

jQuery Thickbox is one of the plugins I constantly use when developing web-sites. Not for the image/gallery functionality, but because of the inline/AJAX/IFrame content. Before I had to use window.open() and write rather complex javascript for passing data back to the opener window.

One thing lacking is a good documentation: examples help, but I prefer more conventional style of documentation – with all options explained, and default values given.

One thing that gave me some problems was the iframe option – query string was always truncated, so I couldn’t pass parameters to iframed page.

Today I found answer to my problem – all ThickBox parameters should be added after TB_iframe=true, since query string gets truncated after that.

One good thing about it – no junk parameters are passed to the page you are calling.

Example: You need to call the “pictures.php?album_id=23″ page in Thickbox iframe. You need to add TB_iframe=true to URL (and class=”thickbox” to an element) to activate Thickbox onclick. So, URL should look like this: pictures.php?album_id=23&TB_iframe=true (or even pictures.php?album_id=23&TB_iframe=true if you want to keep your HTML well-formed). That way only album_id will be passed to pictures.php – all other parameters will be stripped out.

KeepThis=true in examples is just for illustrative purposes only – Thickbox doesn’t need it and never uses it.

P.S. I don’t like the way ThickBox currently works – I want to be able to attach thickbox to elements using more traditional jquery approach, like this:

$('a.thickbox').thickbox({width: 400, height: 400});

Unfortunately, currently there’s no such functionality.

Read “Mastering JSON” article

Highly recommended reading, even for those who are familiar with JSON.

There’s a very elegant solution to safe JSON parsing – anonymous function the “extends” String.prototype to include parseJSON() method (which will be part of the next Javascript specification due to be released in 2008)

Here it is:

(function (s) {
  // This prototype has been released into the Public Domain, 2007-03-20
  // Original Authorship: Douglas Crockford
  // Originating Website: http://www.JSON.org
  // Originating URL    : http://www.JSON.org/JSON.js
 
  // Augment String.prototype. We do this in an immediate anonymous function to
  // avoid defining global variables.
 
  // m is a table of character substitutions.
 
  var m = {
    '\b': '\b',
    '\t': '\t',
    '\n': '\n',
    '\f': '\f',
    '\r': '\r',
    '"' : '"',
    '': ''
  };
 
  s.parseJSON = function (filter) {
 
    // Parsing happens in three stages. In the first stage, we run the text against
    // a regular expression which looks for non-JSON characters. We are especially
    // concerned with '()' and 'new' because they can cause invocation, and '='
    // because it can cause mutation. But just to be safe, we will reject all
    // unexpected characters.
 
    try {
      if (/^("(\.|[^"\n\r])*?"|[,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t])+?$/.
        test(this)) {
 
          // In the second stage we use the eval function to compile the text into a
          // JavaScript structure. The '{' operator is subject to a syntactic ambiguity
          // in JavaScript: it can begin a block or an object literal. We wrap the text
          // in parens to eliminate the ambiguity.
 
          var j = eval('(' + this + ')');
 
          // In the optional third stage, we recursively walk the new structure, passing
          // each name/value pair to a filter function for possible transformation.
 
          if (typeof filter === 'function') {
 
            function walk(k, v) {
              if (v && typeof v === 'object') {
                for (var i in v) {
                  if (v.hasOwnProperty(i)) {
                    v[i] = walk(i, v[i]);
                  }
                }
              }
              return filter(k, v);
            }
 
            j = walk('', j);
          }
          return j;
        }
      } catch (e) {
 
      // Fall through if the regexp test fails.
 
      }
      throw new SyntaxError("parseJSON");
    };
  }
) (String.prototype);
// End public domain parseJSON block