Popup Pages in Three Easy Steps | calguy1000.com

Creating external links in your CMSMS menu is a simple process, you simply create a new content item of type 'Exernal Link'... fill in the place it's supposed to be in the menu, a menu text entry, and a URL, and hit submit.   Once you refresh your properly setup web page, you see the new external page link there, it works great.

But what if you want it to appear in a new window, javascript style without the borders, and menus, etc.  That can be confusing.  This article will how to do it in three easy steps using the JQueryTools module.

Note: This module does not provide step by step instructions for all of the details of how to achieve this functionality.  You should already have experience with modifying page templates to adjust calls to the menu manager, and you should have some experience with creating or modifying menu manager templates.

Step 1: Install and setup the JQueryTools module.

Install the JQueryTools module via your preferred method (either via the module manager, or by uploading the contents of the .tar.gz file into your install's modules folder.

Then, add the following tools to your "Global Metada" under "Site Admin >> Global Settings" in the admin console:

{JQueryTools action='incjs'}
{JQueryTools action='ready'}
{literal}
<script type="text/javascript">
jQuery(document).ready(function() {
 jQuery('a.fancybox').fancybox();
});
</script>
[/literal} {* syntax error intentional *}

This includes the necessary jquery and fancybox javascripts, and then links the fancybox popup functionality with all links that have the class 'fancybox'.

Step 2: Create your external popup content item

This is as simple as clicking on the "Add New Content" link in the page manager under "Content >> Pages".  Enter the following data into the fields for this test:

Content Type:  "External Link"

Menu Text:  "Calguys website"

URL:  http://www.calguy1000.com?iframe

Note the ?iframe parameter.  The fancybox code will look for this parameter on the URL to indicate that it should create an iframe in its popup window to display the contents of the URL.  There aree other ways to do this, you can find information on that in the fancybox documentation.

Step 3: Modify your menu manager template

For those of you that are somewhat experienced in modifying menu manager temploates, this should be a minor exercise.  I simply copied the simple_navigation.tpl to a new name called "my_custom_nav", modified my page templates to use template="my_custom_nav" instead of "simple_navigation.tpl", and then modified the "my_custom_nav" template as follows:

After:

{elseif $node->type == 'separator'}
<li class="separator" style="list-style-type: none;"> <hr />

Add:
{elseif $node->type == 'link'}
<li><a class="fancybox" href="{$node->url}"><span>{$node->menutext}</span></a>

Now save the menu manager template, and browse to your website.  You should see the new "Calguys website" entry in your navigation.  Clicking on it should display the homepage of this website in a nice popup window.

You're encouraged to read the documentation for JQuery and Fancybox to adjust the behaviour of this popup window to your liking.