Creating Article Lightbox Module

Today I will show you how to create a joomla module which shows an article inside a lightbox. I will call this module mod_article_lightbox. First you need to download superbox package file from http://pierrebertet.net/projects/jquery_superbox/ then please follow these steps:

1. create a folder inside your joomla module folder named mod_article_lightbox

2. create a file named mod_article_lightbox.xml you can see /modules/mod_custom/mod_custom.xml for a reference

3. the important thing of mod_custom.xml file are fields tag. please add some new fields like article_id, border_color, and dim_color here is the sample code:

   <fieldset name=“basic”>
   <field name=“article_id” type=“Modal_Article”
   label=“Article Id”
   required=“true”
   description=“Article Id”
   />
   <field
   name=“border_color”
   type=“list”
   label=“Border Color”
   description=“Border Color”
   default=“black”
   >
   <option value=“black”>black</option>
   <option value=“cyan”>cyan</option>
   <option value=“orange”>orange</option>
   <option value=“red”>red</option>
   <option value="">no border</option>
   </field>
   <field
   name=“dim_color”
   type=“list”
   label=“Dim Color”
   description=“Dim Color”
   default=“black”
   >
   <option value="#000">black</option>
   <option value="#fff">white</option>
   </field>
   </fieldset>

4. create a file mod_article_lightbox.php. This file is the main php file for this module. First we get the parameters of this module from module manager like article_id, border_color and dim_color. Then we get the article content from the database and render it to the template file. Here is the complete code:

   $moduleclass_sfx = htmlspecialchars($params->get(‘moduleclass_sfx’));
   
   

$articleId = $params->get(‘article_id’); $db =& JFactory::getDBO(); $sql = “SELECT introtext FROM #__content WHERE id = “.intval($articleId); $db->setQuery($sql); $fullArticle = $db->loadResult(); if(!strlen(trim($fullArticle))) $fullArticle = “Article is empty “;

$tmpl_url = JURI::root().’/modules/mod_article_lightbox/tmpl/’; $border_color = $params->get(‘border_color’); $dim_color = $params->get(‘dim_color’);

require JModuleHelper::getLayoutPath(‘mod_article_lightbox’, $params->get(’layout’, ‘default’));

5. create a folder tmpl and copy jquery.superbox.css, jquery.superbox.js from superbox package to this tmpl folder and then create a new file default.php. this default.php is the main template file for this module. the function of this file are to render the article content inside a div element, we should hide this div using css file later. and then pass the settings of superbox using javascript. Here is the complete code for default.php file:

   <?php
   // no direct access
   defined(’_JEXEC’) or die;
   ?>
   <div id=“box-content” class=“article_lightbox<?php echo $moduleclass_sfx ?>">
   <?php echo $fullArticle;?>
   </div>
   <a id=“box-link” href="#box-content” rel=“superbox[content]"></a>
   <script type=“text/javascript” src="<?php echo $tmpl_url;?>jquery.superbox.js”></script>
   <link href="<?php echo $tmpl_url;?>jquery.superbox.css” media=“all” rel=“stylesheet” type=“text/css”></link>
   <script type=“text/javascript”>
   jQuery(document).ready(function($){
   $.superbox.settings = {
   bgcolor:’<?php echo $dim_color;?>’,
   bordercolor: ‘<?php echo $border_color;?>’
   };
   $.superbox();
   setTimeout(“jQuery(’#box-link’).click()",2000);
   });
   </script>

6. edit jquery.superbox.js so that we can add a border to the lightbox and we can change the dim color. first we change the dim color, find the function : initLoading(callback) and then add this code in the end of this function:

   $overlay.css(“background-color”,settings.bgcolor);

then we set the border color, find the function : showBox(curSettings, $elt) and add this code in the end of this function:

<pre class="brush:php">$superbox.css("border",'thin solid '+settings.bordercolor);</pre>

7. don’t forget to hide the box-content div, please edit jquery.superbox.css and add this code to the end of file:

   #box-content{display:none;}

you can check the complete source code at https://github.com/araneta/mod_article_lightbox or download it from https://github.com/araneta/mod_article_lightbox/archive/master.zip