Zaonce - Tools

Zaonce...

Yet Another Lightbox

Do we need another lightbox script? Probably not, but I needed a lightbox for my company's website and my own, and although there are plenty available, they all feel a bit over the top compared to what I wanted. Personally, I'm not a fan of the 'expand horizontally', 'expand vertically', 'fade in image' (yawn), 'fade in close button' type lightboxes - I want my image to appear in the middle of the page, at a reasonable size pretty much just after I've clicked on it.

I found this by Emanuele Feronato, and although the title is slightly misleading, it basically does exactly what I want with a tiny amount of code. It doesn't require any images, and even works in IE6! It's only really a starting point, so I took the basic idea, wrapped it in some jquery and this is my result:

// Yalightbox - v.0.3 (130506)
//
// For details, see http://www.zaonce.com/tools.shtml
//
// Simply include the jquery library, this script and give your images the class 'expandable'. Eg,
//
// <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
// <script type="text/javascript" src="scripts/expander.js"></script>
// <img src="/images/zaonce.png" class="expandable">
//
// 130506 0.3 - Copy title attribute from thumbnail image
// 101018 0.2 - Added guard to prevent the script being executed multiple times.
// 100930 0.1 - Initial version

$(document).ready(
  function() 
  {
    if( $('DIV#expander-mask').length !== 0 )
    {
      return; // Only execute the script once...
    }

// Some settings for tweaking...
    //
    var boxShadow = "0 0 2em #000"; // box shadow (x y size colour)
    var size      = 80;             // % of window size
    var opacity   = 50;             // % opacity of the mask
    var duration  = 400;            // speed of fade (milliseconds)
    
    var padding = (100 - size) / 2;   
    
    // Create a style for the lightbox...
    //
    $('<style type="text/css">' +
      'img#expander-expanded{ ' +
      'display:none;' + 
      'cursor:pointer;' +
      'position:fixed;' + 
      'z-index:1002;' + // Needs to be higher than the z-index of the mask below...
      'box-shadow:' + boxShadow + ';' + 
      '-webkit-box-shadow:' + boxShadow + ';' + 
      '-moz-box-shadow:' + boxShadow + ';' +
      '}' +
      '</style>').appendTo('head');

// Create the mask for the background...
    //
    $('body').prepend( 
      '<div id="expander-mask" style="' + 
      'display:none;' + 
      'background-color:#000;' + 
      'position:fixed;' + 
      'top:0px;' + 
      'left:0px;' +
      'min-width:100%;' +
      'min-height:100%;' +
      'width:100%;' +
      'height:100%;' +
      'z-index:1001;' + // Needs to be lower than the z-index of the lightbox above...
      '"></div>' );

// Change the cursor to a hand for images with class 'expandable'...
    //
    $('img.expandable').css('cursor','pointer');
    
    // Add click handler for images with class 'expandable'...
    //
    $('img.expandable').click(
      function() 
      { 
        // Create an expanded copy of the image...
        //
        var imageSrc = $(this).attr('src');
        var imageTitle = $(this).attr('title');

var expanded = $('<img id="expander-expanded" title="' + imageTitle + '" src="' + imageSrc + '">').insertAfter('DIV#expander-mask');

var imageAspect  = expanded.attr('width') / expanded.attr('height');
        var windowAspect = $(window).width() / $(window).height();

// Get the image width and height...
        //
        var width  = expanded.attr('width') > 0 ? expanded.attr('width') : expanded.width();
        var height = expanded.attr('height') > 0 ? expanded.attr('height') : expanded.height();

// Set the size and position of the expanded image as appropriate...
        //
        if(imageAspect > windowAspect)
        {
          var verticalScale = $(window).width() * (size / 100) / width;

expanded.css('top', ($(window).height() / 2) - ((height * verticalScale) / 2));
          expanded.css('left', padding + '%');
          expanded.css('width', $(window).width() * (size / 100));
        }
        else
        {
          var horizontalScale = $(window).height() * (size / 100) / height;
          
          expanded.css('left', ($(window).width() / 2) - ((width * horizontalScale) / 2));
          expanded.css('top', padding + '%');
          expanded.css('height', $(window).height() * (size / 100));
        }
        
        // Fade in the mask and the expanded image...
        //
        $('div#expander-mask').fadeTo(duration, (opacity / 100));
        expanded.fadeIn(duration);
        
        // Make it work in IE6...
        //
        if($.browser.msie && $.browser.version < 7)
        {
          expanded.css('position', 'absolute');
        }
        
        // Add handler to close the lighbox when clicked...
        //
        $('html').click( 
          function() 
          { 
            $('img#expander-expanded, div#expander-mask').fadeOut( 
              duration, 
              function() 
              { 
                // Delete the expanded image...
                //
                $('img#expander-expanded').remove(); 
              } 
            );                         
          } 
        );
        
        return false;
      } 
    );
  }
);

All you need to do to get it working is to include the jquery library in your page like this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>

then include my script, and add the class 'expandable' to any images you want to expand. For example,

<img src="/images/zaonce.png" class="expandable">

Try clicking the screenshots on this page. It should be pretty obvious how the code works, so it should be really easy to adapt it to your needs.

iGrass » download (130kb)

This OSX tool is a simple GUI for the CVS ANNOTATE command. It can be used as a droplet (drag a file on to it's dock icon) or files can be dropped into the main window. You'll need to be logged in to CVS for it to work. Once it has annotated a file, you can also find show the CVS LOG and CVS STATUS of the file by pressing the Info button at the bottom left. You can search the file by entering text in the box at the bottom right. The first instance of the text will be highlighted - press Next to find the next occurrence.

I wrote this as a quick way of annotating a file without needing to go into my CVS client. It can also cope with annotating working copies in branches, which CVS fails to do by default.

Pending improvements:

Show right hand side of filename (not the left)
Fix errors when dropping some files it can't locate
Add font size adjustment
Process the data to not break CVS ANNOTATE lines

GP32 Maclink » download (194kb)

This is basically a GUI frontend for Mr. Spiv's Maclink command line application. It gives mac users the ability to drop files from the finder onto the GP32, and browse the contents of your SMC card using a tree view. It is currently based on version 0.7 of Mr. Spiv's maclink. It has been tested under OSX 10.3.2 and 10.3.3 and little else.

Note, because it uses Mr. Spiv's application you should also read the readme.txt which comes with that. Download it from here.

I accept no responsibility for any problems that may occur by using this application. You might want to backup your SMC card before using it, although the whole point of the GUI is to prevent you from doing something silly with the command line application. *Dangerous* operations like Delete and Format will ask you if you are sure before proceeding.

Bookmark Merger » download (31.5kb)

This is a tool for merging Safari bookmarks. Safari is a browser for OSX. It can import and export standard Netscape bookmark files. This means that this tool should also be able to merge bookmarks from other browsers that can use standard Netscape bookmark files.

The tool consists of two files, a perl script, which does the merging, and an applescript to make it convenient to use. To install it, download this zip file and after unzipping it, move the Merge script to your desktop (or somewhere else convenient) and put the bm.pl script in your /Library/Safari folder.

To use the tool, simply drag a bookmarks file onto the Merge icon. This should create a new file on your desktop called merged bookmarks.html. This will initially contain only the contents of the first file your drag onto Merge. The next time you drag a bookmarks file onto Merge its contents will be merged into merged bookmarks.html. You can then import merged bookmarks.html back into Safari.

Note: To access the import/export bookmarks functions in Safari, you need to enable the Debug menu. To do this, quit Safari, open a terminal window and enter:

defaults write com.apple.safari IncludeDebugMenu 1

When you restart Safari you should now have a debug menu containing (amongst other things), Import Bookmarks... and Export Bookmarks....

At the end of the day, I wrote this because I wanted to keep my bookmarks on my personal laptop up to date with my bookmarks on my work machine without the expense of a .mac account. Using this tool I can export my bookmarks from both browsers, merge the two together and reimport them.

The bm.pl script can be configured for a few tweaks in its behaviour. By default, the script doesn't attempt to do anything clever with bookmarks which exist in several different folders. The resulting merged bookmarks.html will simply contain an amalgamation of the merged files.

To enable the script to try to do something slightly more sensible with bookmarks which exists in several folders, set removeDuplicates to 1 at the top of the script. This will cause the script to only keep the bookmark with the latest visit/creation/modification date. You may want to experiment with this. If you use this option, you can also get the script to remove any folders which end up empty. Set removeEmptyFolders to 1 if you want to enable this behaviour.

If you want to sort your bookmarks after merging, you might want to try Jerry Krinock's SafariSorter and for a tool to detect dead bookmarks, try Safari Prairiefire from Balooba Software.