User Rating: 4 / 5

    Star ActiveStar ActiveStar ActiveStar ActiveStar Inactive

    As you know that Joomla will automatically includes Mootools library and some unneeded javascript to every page of your site, you might already familiar with this line of code:

    <script src="/media/system/js/mootools-core.js" type="text/javascript"></script>
      <script src="/media/system/js/core.js" type="text/javascript"></script>
      <script src="/media/system/js/caption.js" type="text/javascript"></script>
      <script type="text/javascript">
    window.addEvent('load', function() {
    				new JCaption('img.caption');

    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

    User Rating: 1 / 5

    Star ActiveStar InactiveStar InactiveStar InactiveStar Inactive

    As a programmer I don't have a good memories that's why I have to read this Joomla code snippet when creating or updating joomla templates

    1. get current (absolute) url:

        $uri = &JURI::getInstance();
        $myabsoluteurl = $uri->toString(array('path'));
    2. get article by article id:

        $db = &JFactory::getDBO();
        $sql = "SELECT introtext FROM #__content WHERE id = ".intval($articleId);
        $fullArticle = $db->loadResult();
          $fullArticle = "Article is empty ";
    3. add js file to head of the template:

        $host = JURI::root();
        $document =& JFactory::getDocument();
    4. render module from template:

        jimport( 'joomla.application.module.helper' );
        $module = JModuleHelper::getModule('mod_related_items');
        $attribs['style'] = 'xhtml';
        echo JModuleHelper::renderModule( $module, $attribs );
    5. get active user id:

        $user =& JFactory::getUser();
        $user_id = $user->id;
    6. fix global $mainframe variable:

      //old code
        global $mainframe;
        $params = &$mainframe->getParams();
      //in joomla 1.7/2.5
        $app = &JFactory::getApplication();
        $params = $app->getParams();
    7. get one record from db:

        $db = &JFactory::getDBO();
        $query = "SELECT * FROM uk_code WHERE code = '".$_to_postcode."' LIMIT 1";
        if ($row = $db->loadObject ())
          $x2 = $row->coord1; 
    8. set page title:

        $document = JFactory::getDocument();
    9. detect whether in front page:

        $uri = &JURI::getInstance();
        $myabsoluteurl = $uri->toString(array('path'));	
          $front_page = TRUE;
    10. get component name from joomla template index.php 

      $comp_name  = JFactory::getApplication()->input->get('option');    
    11. get view name from joomla template index.php 

      $view_name  = JFactory::getApplication()->input->get('view');  
    12. get article id from joomla template index.php 

      $article_id  = JFactory::getApplication()->input->get('id');  

    If you have some nice code snippets please share with us and I will update this list, later.


    Please publish modules in offcanvas position.