nyroModal – A Nice Lightbox jQuery Plugin

nyroModal iQuery window plugin

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
});

Did you like this post? Get monthly summary of our new tutorials, posts and tips to your inbox!

4 Responses

  • Chandra

    Nice article. I tried to use the NyroModal and got into a small issue.

    I am trying to open a URL from the grid. When the user clicks on the info button in a table, I would like to display the information from an aspx page. When I click for the first time, I am getting the information correctly. But from then onwards, I am getting the same information. When I checked the aspx page, the page_load event is fired for the first time, from next time onwards, Page load even is not fired, as if it is getting the data from cache. when I tried to debug the javascript, i am getting the same information in “data” variable in AjaxLoaded.

    Here is the javascript I have

    //it calls an Ajax function which updates a server side call
    //and then opens the aspx page with the id in the query string.
    //I debugged it and saw that it is sending different id 
    
           function showClaimInfo(claimId) {
    
                var mData = "'id':'" + claimId + "'";
                var modalUrl = 'ModalInfo.aspx?id=' + claimId;
    
                $.ajax({
                    type: "POST",
                    url: "ClaimService.aspx/SetId",
                    data: "{" + mData + "}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function() {
                        $.fn.nyroModalManual({
                            bgColor: '#808080',
                            url: modalUrl,
                            width: 500,
                            height: 350
                        });
                    },
                    error: function(xhr, status, er) {
                        showError(xhr, status, er);
                    }
                });
                return false;
    
            }
    

    and here is the html code I have

    
    	104150357961 
    	1234567890 
    	Test User 
    	
    	104150370321 
    	1234567890 
    	Test User 
    

    I am a newbie to this control. Any help or links will be greatly appreciated.

    I am using the following setup:

    jquery: 1.4.1
    NyroModal: 1.6.2
    Visual Studio: 2008
    AjaxToolkit in the same page
    jTempalte
    Windows Vista Professional

    • Chandra,
      Unfortunately, a good bit of your code seems to have been messed up by the comment form, so I can’t see exactly what you’re doing.

      However, I would recommend letting nyroModal run its own AJAX functions, instead of trying to manually run an AJAX function each time you want to open a modal window. nyroModal should automatically be able to figure out if a link needs to be retrieved through AJAX or not and will go ahead and handle that for you. Therefore, you really don’t need any of the AJAX function you wrote; you just need to make your links look something like:

      <a href="ModalInfo.aspx?id=104150357961" class="nyroModal">104150370321</a>

  • Robert

    Hello, nice hint
    now nyroModal has been updated to version 2.x and your kind hinting article may hopefully be turned into an updated guide, maybe to help people embedding youtube videos with the embed.ly filter.
    Thank you for sharing
    Rober

    • Hey Robert, thanks for update. Good to hear you keep improving nyroModal.

Post Your Comment

Your email address will not be published.