Hello!

I decided to share a recipe and I think the mailing list is a good place for that.

The waste of vertical space “really grinds my gears”. I mean whenever I want a high-def image from babel or tons of detailed text on output from some code blocks, I get it there making it hard to navigate over the rest of the document. I saw [1] uses lightbox [2] but uses MACRO for that. This is not quite usable for babel output which inserts just plain images. I did not feel like hacking exporter. So I dived into jquery and lightbox manual and came up with some JS code and CSS that I think make final output look awesome if many high-resolution images are present. To save on space occupied by long code block text results, I reused [3] with some changes (probably because of jquery changes…. I don’t know that stuff).

Include something like the following in the header of your org doc. Look into my.js (renamed to txt to pass MUA/MTA) for details.

#+STYLE: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
#+STYLE: <script src="js/lightbox.js"></script>
#+STYLE: <script src="js/my.js"></script>

Make sure you do use #+Caption: before your figures to make a title for lightbox otherwise you won’t get <div class=”figure”> and things will break.

[1] http://orgmode.org/worg/color-themes-screenshot.html
[2] http://lokeshdhakar.com/projects/lightbox2/
[3] http://be.twixt.us/jquery/codeExpander.php

Mikhail