A small technical post for nyroModal, after a question posted on github.

The demand is simple: add a link in the title of a modal.

On this post, I'll explain step by step the method to add this functionality to nyroModal on image. The URL of the link will be add on the rev attribute of the opener link.

All files are available at the bottom of the post.

 

Step 1 : Download nyroModal

First step is obviously to download the last nyroModal version. You can choose to download the whole package, but I always prefer create my own package to suit exactly my needs.

For this example, here is element I used:

  • anims.fade : not mandatory, but it prettier to have some animations during opening and closing the modal
  • filters.title : we need it, we'll base our code on this filter to add the link
  • filters.link : mandatory too, this is the filter which permit to react on the click of a link
  • filters.image : I decided to open an image, so I need it.

Once you've got the zip download, extract all the files where you want. We are now ready to work.

 

Step 2 : Create the basic HTML file

Before adding our behavior, let's start by creating a HTML with the minimum elements in there:

<!DOCTYPE HTML>
<html>
<head>
    <title>nyroModal : Link in title</title>
    <link rel="stylesheet" href="styles/nyroModal.css" type="text/css" media="screen" />
</head>
<body>
    <a href="http://images.easyart.com/i/prints/rw/lg/1/3/Romero-Britto-Flower-Power-IV-130134.jpg" class="nyroModal" title="Flower Power IV">Flower Power IV</a>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.nyroModal.custom.js"></script>
    <!--[if IE 6]>
        <script type="text/javascript" src="js/jquery.nyroModal-ie6.min.js"></script>
    <![endif]-->
    <script type="text/javascript">
    jQuery(function($) {
        $('.nyroModal').nm();
    });
    </script>
</body>
</html>

On this page, nyroModal CSS is loaded and a link to an image is added. Then the needed javascripts are loaded. Using one line of code, the nyroModal behavior is finally added.

The link already have it's title attribute to automatically create, using filters.title, the modal title.

 

Step 3 : Study filters.title

To try add out functionality on the title of the modal, we first have to understand how it works. To do that, we can read the source on github.

We can see the h1 element is stored on variable nm.store.title and created by the beforeShowCont callback.

nyroModal is developed in order to call all filters callbacks. Then callbacks defined during creating of the nyroModal objects on the callbacks settings are called.

To add the behavior, we'll so add it in the beforeShowCont callback of this setting, using nm.store.title variable and usual jQuery.

 

Step 4 : Add the functionality

We now know how to proceed. Let's dot it!..

We add the rev attribute containing the URL of the link to add, and the code to add the behavior. The HTML page becomes:

<!DOCTYPE HTML>
<html>
<head>
    <title>nyroModal : Link in title</title>
    <link rel="stylesheet" href="styles/nyroModal.css" type="text/css" media="screen" />
</head>
<body>
    <a href="http://images.easyart.com/i/prints/rw/lg/1/3/Romero-Britto-Flower-Power-IV-130134.jpg" class="nyroModal"
        title="Flower Power IV" rev="http://www.easyart.fr/posters/Romero-Britto/Flower-Power-IV-130134.html">Flower Power IV</a>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.nyroModal.custom.js"></script>
    <!--[if IE 6]>
        <script type="text/javascript" src="js/jquery.nyroModal-ie6.min.js"></script>
    <![endif]-->
    <script type="text/javascript">
    jQuery(function($) {
        $('.nyroModal').nm({
            callbacks: {
                beforeShowCont: function(nm) {
                    if (nm._hasFilter('title') && nm.opener.is('[rev]')) {
                        nm.store.title.html('<a href="'+nm.opener.attr('rev')+'">'+nm.store.title.text()+'</a>');
                    }
                }
            }
        });
    });
    </script>
</body>
</html>

What's inside the callback?

We first check if the filter title is activated and if the opener link has a rev attribute => Conditions are reach to add the link.

The next line update the h1 stored in nm.store.title to replace it's content by a link pointing to rev attribute and containing the text of the original content.

Voilà, done. 2 lines of effective code to add this functionality.

 

Conclusion

To add a behavior to an open-source project, 2 questions must be asked before starting:

  • What are we trying to do?
  • How can I do that?

Then, by analyzing code and documentation, we find a way to develop what we want more or less simply.

I always tell to my clients: "Yes, everything is possible. We just need to have time for that."

 

Files

You can see the sources here: http://nyrodev.info/dl/nyroModalLinkTitle/

You can download all files on a Zip archive here: http://nyrodev.info/dl/nyroModalLinkTitle/nyroModalLinkTitle.zip

 

French version of this post