nemrod.se Various guides and experiments

nemLightBox – a very simple WordPress plugin


Today I decided to use an old jQuery lightbox script I wrote long ago for the thumbnails I have in some posts on this site (for example on the MacBook reed switch post or the Password Generator post) and the easiest way to do that (apart from what’s actually easiest – just including the code right in the template) is of course to make it into a WordPress plugin.

The code for the plugin is very short since it’s got very limited functionality (lightbox all image links and that’s about it), but both people interested in how a basic WordPress plugin might look and those interested in how you make a lightbox in jQuery might find this interesting nonetheless. :)

wp-content/plugins/nemlightbox/nemlightbox.php

<?php
    /*
        Plugin Name: nemLightBox
        Plugin URI: http://nemrod.se/wordpress/nemlightbox/
        Description: A very simplistic lightbox plugin - opens all image links in a lightbox
        Version: 0.1
        Author: Anders Mårtensson
        Author URI: http://nemrod.se/about/
        License: BSD
    */

    wp_enqueue_script('jquery');
    $nlb_script_url = WP_PLUGIN_URL . '/nemlightbox/nlb.js';
    $nlb_script_file = WP_PLUGIN_DIR . '/nemlightbox/nlb.js';
    if(file_exists($nlb_script_file)) {
        wp_register_script('nlb', $nlb_script_url);
        wp_enqueue_script('nlb');
    }
?>

wp-content/plugins/nemlightbox/nlb.js

$j = jQuery.noConflict();
$j(function() {
    $j('a[href$=".jpg"], a[href$=".png"], a[href$=".gif"]').click(function(event) {
        var html = '<div id="nlb"><div style="position:fixed;top:0;left:0;height:100%;width:100%;display:block;background:#000;opacity:0.7;"></div><div style="position:fixed;top:0;left:0;height:100%;width:100%;display:table;"><div style="display:table-cell;vertical-align:middle;text-align:center;"><div style="display:inline-block;background:#eee;padding:20px 20px 5px;"><img src=""><p style="font-size:12px;font-family:sans-serif;color:#333;text-decoration:underline;">Click anywhere to close</p></div></div></div></div>';
        $j('body').append(html);
        $j('#nlb img').attr('src', $j(this).attr('href'));
        event.preventDefault();
    });
    $j('#nlb').live('click', function(event) {
        $j('#nlb').remove();
        event.preventDefault();
    });
});

Click one of the links to the posts above to check it out in action. If anyone against better judgement (it really isn’t that bad though, just simplistic) wants a .zip of it so they can just install in on their blog/site I don’t mind making one, just ask and I’ll update the post.


Posted in WordPress | 1 Comment

One response to “nemLightBox – a very simple WordPress plugin”

  1. Yo Nem, i love your stuff! :)
    BUT.. you should add alpha(opacity=80); on in nlb.js for it to work properly in IE 8, even tho IE sux the majority still use it.. ;[

    Aaanyways keep on rockin man!
    Piz!

Leave a Reply

Your email address will not be published. Required fields are marked *