Creating Article Lightbox Module

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:
  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:
  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:
  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:
  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 https://github.com/araneta/mod_article_lightbox or download it from https://github.com/araneta/mod_article_lightbox/archive/master.zip

Leave a Comment

Your email address will not be published. Required fields are marked *