Creating Article Lightbox Module

    Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive
     

    lightbox

    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:
      $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:
      #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

    Please publish modules in offcanvas position.