User Rating: 5 / 5

Star ActiveStar ActiveStar ActiveStar ActiveStar Active

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');
			});
  </script>

Read more ...

User Rating: 0 / 5

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

User Rating: 0 / 5

Star InactiveStar 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);
      $db->setQuery($sql);
      $fullArticle = $db->loadResult();
      if(!strlen(trim($fullArticle))) 
        $fullArticle = "Article is empty ";
    
  3. add js file to head of the template:

      $host = JURI::root();
      $document =& JFactory::getDocument();
      $document->addScript($host.'path/jquery-1.4.4.min.js');
    
  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";
      $db->setQuery($query);
      if ($row = $db->loadObject ())
      {
        $x2 = $row->coord1; 
      }
    
  8. set page title:

      $document = JFactory::getDocument();
      $document->setTitle($this->escape($title));
    
  9. detect whether in front page:

      $uri = &JURI::getInstance();
      $myabsoluteurl = $uri->toString(array('path'));	
      if($myabsoluteurl==JURI::base(true).'/')
        $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.