Description

Modalizer will help you create modal popup window links. Modalizer can also convert any existing link in your website to modal popup window link.

Modal popup windows are fancy popup boxes also known as Lightboxes.

You can choose from many Modal types:

• Joomla! Core (SqueezeBox)
• ColorBox
• FancyBox
• LyteBox
• ShadowBox

There are several ways Modalizer can covert links:

• By class names (all links with defined class names)
• By filetypes (all links to given filetypes)
• By url (match URLs via regular expressions)
• By target="_blank" (all links with a target. Internal and/or external)
• Via the special Modal tags {modal ...}...{/modal}

Mootools / jQuery Compatibility

Modalizer uses the modal scripts that either load the Joomla core mootools script or a jquery script.. Some templates and extensions use there own javascript library which can cause conflicts. There is an option in the Modalizer plugin to not load its javascript libraries, which might help resolving these conflicts.

Custom Styling

There are several styling options in the Modalizer plugin settings. You can customize other elements via css.

It's best to overrule styles by adding definitions to your templates stylesheet, so your custom styles don't get overwritten when updating Modalizer in the future.

Modal types

Modalizer currently supports these Modal types:

• Joomla! Core (SqueezeBox) - Website
• ColorBox - Website
• FancyBox - Website
• LyteBox - Website
• ShadowBox - Website

For commercial websites: please check out the different websites to see if you may use the script.

You can choose one of these modal types in the Modalizer system plugin settings. You can not use more than one type simultaneously on your website.

Modal Type Settings

Depending on what modal type you have selected, you can have any of these settings:

Setting	Description	Joomla! Core (SqueezeBox)	ColorBox	Fancybox	LyteBox	ShadowBox
Style	Defines the styling of the modal window. There are a number of presets to choose from.
Title Position	Defines where (and if) the title should be displayed.
Animation	Defines if and how the modal popup window should animate when opening/closing.
Outer Border	Defines whether or not to show an outside border around the modal popup window.
Auto Group	You can group certain filetypes automatically to create series / galleries. The modal window will get navigation arrows to go to next/previous link in the group (only works on images).
Default Window Sizes	Defines how the modal popup window is sized. You can define this separately for external sites and images (depending on the modal type). You can overrule the width and height via the modal tags.

Tag Syntax

Basic Syntax

Modalizer supports a special easy syntax to make new custom links in your page that open a modal popup window.

{modal url=[url of page]|[other parameters]}Link text{/modal}

Like:

{modal url=index.php?option=com_content&view=article&id=454}Lorum Ipsum{/modal}

Lorum Ipsum

{modal url=http://maps.google.com/maps?hl=en&ll=58,6&spn=0,50&cid=5560360924256306806&output=embed|width=600|height=400}Google Maps{/modal}

Google Maps

Linking an image

To make an image link to a modal page, simply surround your image with the {modal} tags:

{modal url=http://maps.google.com/maps?hl=en&ll=58,6&spn=0,50&cid=5560360924256306806&output=embed}{/modal}

Will result in:

Tag Parameters

There are a number of parameters you can set in the tag:

Parameter	Description	Joomla! Core (SqueezeBox)	ColorBox	Fancybox	LyteBox	ShadowBox
url	The url to open in the modal popup window
title	The title to display with the modal popup window
width	The width in pixels of the modal popup window
height	The height in pixels of the modal popup window
group	A group name to make sets (only works on images)
class	Extra classname(s) to add to the link for styling purposes

Modalizing menu links

You can also use the {modal} tags in menu items to make them open in a modal popup window.

Simply surround the title with {modal}...{/modal}.
You can also add the extra parameters. If you define a url in the tag, it will overrule the menu items own url.

Template

Modalizer uses the component subtemplate to open your pages. This subtemplate is also used by the print pages, for instance.

The component subtemplate is a component.php file in your templates folder. If your template doesn't have that file, the system template is used (pretty much no styling at all).

You can set Modalizer up to use a different subtemplate, if you want (see the Modalizer system plugin settings).

If you want to customize the popup page styles, you'll have to change or create the subtemplate.

Creating a subtemplate

If your template doesn't have a component.php file, or if you want to use a different subtemplate for your popups (like a popup.php), you will have to make a subtemplate.

This is pretty simple with modt templates:

1. Go to your templates folder, make a copy of the index.php and name it component.php (or something else if you are going to change the Modalizer subtemplate setting).
2. Open the file and strip everything out from between the <body> tags that you don't want. Typically the only stuff you need there is:
   <body>
       <jdoc:include type="message" />
       <jdoc:include type="component" />
   </body>
3. Optionally add an extra stylesheet to the <head> or replace the main one with a different one:
   <link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/css/component.css" type="text/css" />
4. Now you can create the component.css in the css folder and add your desired styles there.

Note: Some templates are not very straightforward and work with includes and sometimes complete frameworks. Making an extra subtemplate for these templates is pretty complicated. In those cases you might be better off asking the template developers to create one for you.

For more info on changing the component.php, see: Customizing the print pop-up (Joomla Docs)