Creating Article Lightbox Module

    Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive


    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 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"
      description="Article Id"
      label="Border Color"
      description="Border Color"
      <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>
      label="Dim Color"
      description="Dim Color"
      <option value="#000">black</option>
      <option value="#fff">white</option>
    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);
      $fullArticle = $db->loadResult();
      $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:
      // no direct access
      defined('_JEXEC') or die;
      <div id="box-content" class="article_lightbox<?php echo $moduleclass_sfx ?>">
      <?php echo $fullArticle;?>
      <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">
      $.superbox.settings = {
      bgcolor:'<?php echo $dim_color;?>',
      bordercolor: '<?php echo $border_color;?>'
    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:
      then we set the border color, find the function : showBox(curSettings, $elt) and add this code in the end of this function:
      $superbox.css("border",'thin solid '+settings.bordercolor);
    7. don't forget to hide the box-content div, please edit jquery.superbox.css and add this code to the end of file:

    you can check the complete source code at or download it from

    Please publish modules in offcanvas position.