nyroModal – A Nice Lightbox jQuery Plugin

by Curtiss   |   last updated December 30, 2013   |   Javascript Tutorials ·

A few weeks ago, I found myself in a position where I needed a nice, simple, easy-to-use lightbox plugin for jQuery. After some searching, I found that there are quite a few different plugins for this purpose, and they all have their pros and cons. After trying a few different plugins, I finally settled on nyroModal.

During my search, I found Thickbox, but that, while being powerful and easily usable, is no longer under development (and hasn’t been for two and a half years). It looks nice, but there were a few quirks with it that I just didn’t like (they’re hard to quantify, but it just didn’t fit the particular application I was using).

I also came across a post on Line25 with a list of 10 different jQuery plugins for lightbox applications. I tried a handful of them. Shadowbox looked promising, but it requires a commercial license if you want to use it for commercial purposes.

Many of the other plugins I investigated only supported images, and I needed my application to allow for the potential of including inline content, Flash videos and more in the future.

I finally tried nyroModal and was very impressed. nyroModal is simple to use out-of-the-box. Basically, all you have to do is include the appropriate CSS and JS files, and then apply a class of “nyroModal” to the elements you want to open the lightbox. NyroModal is also extremely customizable. You can adjust almost every aspect of the lightbox as it’s applied to your page.

The plugin also includes some great features. By default, any lightbox window (with the exception of an SWF file) opened will automatically resize itself according to the current size of the user’s browser window. If the user resizes his browser, the modal box will resize to fit (up to the maximum size of the contents).

It’s also already set up to handle YouTube embedded players. There are two examples on the nyroModal home page (which is also included in the package download) that show how to set up nyroModal to identify YouTube URLs and automatically direct them to the embedded player. In my case, for one of the applications for which I was using a lightbox, I already had the code for the embedded player (along with some custom options for that embedded player), so I adjusted the code provided a little bit, to make sure it applied the appropriate nyroModal options to the embedded player. The code I used looks like the following.

<script type="text/javascript">
$(function() { 
  $.nyroModalSettings({ 
    processHandler: function(settings) {
       var from = settings.from;
       if (from && from.href && from.href.indexOf('http://www.youtube.com/') == 0) {
         $.nyroModalSettings({ 
           type: 'swf',
           height: 355,
           width: 425,
           url: from.href.replace(new RegExp("watch\\?v=", "i"),'v/')
         });
       }
      }
    });
  }); 
</script>

If you’re looking for a lightbox script that’s capable of handling iFrames, AJAX content, inline content, images, videos and more, nyroModal is a great place to look.

NyroModal allows you to setup a gallery of content extremely easily, by simply assigning an appropriate rel attribute to each gallery item. You can even implement multiple galleries on a page by using different rel attributes and can easily apply different options and settings to those galleries by using separate init statements.

For instance, if you had an unordered list of images on which you wanted to use the default nyroModal settings (for purposes of this example, let’s say that unordered list has an HTML ID of “gallery”) and a second unordered list of images in which you want all of the images to open at a specific resolution, without the modal window being resized according to the browser (let’s say this unordered list has an HTML ID of “gallery-2”).

You could use code similar to the following to accomplish that.

$('#gallery a').nyroModal();
$('#gallery-2 a').nyroModal({
     autoSizable: false,
     resizable: false,
     windowResize: false,
     width: 640,
     height: 480
});