Jasa Pembuatan Aplikasi Murah Berkualitas
konsultasi gratis sekarang

Creating Article Lightbox Module

Published on Saturday, Nov 2, 2013

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’));

  1. 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>

  2. 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>
  1. 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

Bagikan


Tags