J Article takes content from joomla article table and image in that article to make slide show. If you have an image in an article, doesn’t matter whether that image in left or right side or top or at bottom this module will automatically take the image at right side and content at left side in the slide show. Currently this module allows only one image to show at right side. But if you have more than one image then that image got overlap with one other. So it is better to place only one image in slide show.

To make a module like this in joomla 1.5 please follow below steps:

Create a folder called “mod_jarticle_j1.5” now in that folder place the below files and folder:

  • mod_jarticle.xml
  • mod_jarticle.php
  • index.html
  • helper.php
  • tmpl
    • index.html
    • default.php
    • css
      • index.html
      • style.css
    • images
      • index.html
      • jarticle.png
      • slider-bg.jpg
    • js
      • index.html
      • jquery-1.2.6.js
      • jquery-1.2.6.pack.js
      • startstop-slider.js
Now this is the total files we will need to make this sliding module. Now start with mod_jarticle.xml file.
a) mod_jarticle.xml:

mod_jarticle.xml is the root file of this module in where all the definition is given including parameter too. So let's open this xml file:

<?xml version="1.0" encoding="utf-8"?>
<install type="module" version="1.5.0">
<name>J Article</name>
<author>Md. Shaon Bahadur</author>
<creationDate>25th September 2011</creationDate>
<copyright>Copyright (C) 2011 j-download.com, All rights reserved.</copyright>
<license>http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL</license>
<authorEmail></authorEmail>
<authorUrl>www.j-download.com</authorUrl>
<version>1.0.0</version>
<description>
<![CDATA[
<table width="80%" cellpadding="0" cellspacing="0" border="0" align="center"><tr><td>
<table width="100%" cellpadding="5" cellspacing="5" border="0"><tr><td valign="top"><img src="/../modules/mod_jarticle/tmpl/images/jarticle.png" border="0" /></td>
<td valign="top" style="padding-left:60px;">
<p>J Article allow you to display joomla article from different section and category. It has option to stop and start the slide show. You can fix width from module parameter. Every title of article is clickable. You can turn off the article title from module parameter.</p>
<p>Module has below parameter:</p>
<p>
<ul>
<li>Category Selection</li>
<li>Width</li>
<li>Show Title</li>
</ul>
</p>
</td></tr></table>
</td></tr>
</table>
]]>
</description>
<files>
<filename module="mod_jarticle">mod_jarticle.php</filename>
<filename module="mod_jarticle">helper.php</filename>
<filename module="mod_jarticle">index.html</filename>
<folder module="mod_jarticle">tmpl</folder>
</files>
<params>
<param name="moduleclass_sfx" type="text" default="" label="Module Class Suffix" description="PARAMMODULECLASSSUFFIX" />
<param name="@spacer" type="spacer" default="" label="" description="" />
<param name="catid" type="category" default="0" label="Category" description="A content category" />
<param name="module_width" type="text" default="750" label="Module Width" description="Please Enter Module Width"></param>
<param name="module_showtitle" type="radio" default="1" label="Show Title" description="Please Select Yes or No For Show Title.">
<option value="0">NO</option>
<option value="1">YES</option>
</param>
</params>
<params group="advanced">
<param name="cache" type="list" default="1" label="Caching" description="Select whether to cache the content of this module">
<option value="1">Use global</option>
<option value="0">No caching</option>
</param>
<param name="cache_time" type="text" default="900" label="Cache Time" description="The time before the module is recached" />
</params>
</install>

Now in the file you will have to put basic description then parameter like

<param name="catid" type="category" default="0" label="Category" description="A content category" />

And save the file. This will make your xml file for the module. Now change this xml file according to your need. You may need more options in the parameter in the module.

Now lets open mod_jarticle.php file.

b) mod_jarticle.php:

<?php
/*------------------------------------------------------------------------
# J Article
# ------------------------------------------------------------------------
# author Md. Shaon Bahadur
# copyright Copyright (C) 2011 j-download.com. All Rights Reserved.
# @license - http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
# Websites: http://www.j-download.com
# Technical Support: http://www.j-download.com/request-for-quotation.html
-------------------------------------------------------------------------*/
defined('_JEXEC') or die('Restricted access');
require_once (dirname(__FILE__).DS.'helper.php');
$catid = $params->get( 'catid', 0 );
$layout = JModuleHelper::getLayoutPath('mod_jarticle');
$options = modArticleHelper::getArticleOptions($catid);
require($layout);
?>

Now here at top the component description and licensing info is given. Then you will see helper file call like:

require_once (dirname(__FILE__).DS.'helper.php');

This will call the helper file in the module. Then you will see it is catching catid like below:

$catid = $params->get( 'catid', 0 );

Then layout file is called which is:

$layout = JModuleHelper::getLayoutPath('mod_jarticle');

Now a function is called

$options = modArticleHelper::getArticleOptions($catid);

Now this is the main function which load all the selected article. And return the value. Then finally we call the layout like:

require($layout);

c) index.html:

This is mainly a blank html file . This file used in joomla component, module and plug-in to hide folder structure to viewer. If you open the file then you will see a code like below:

<html><body bgcolor="#FFFFFF"></body></html>

d) helper.php:

This is the main function which load article from database according to our need. So let’s open the file:

<?php
/*------------------------------------------------------------------------
# J Article
# ------------------------------------------------------------------------
# author Md. Shaon Bahadur
# copyright Copyright (C) 2011 j-download.com. All Rights Reserved.
# @license - http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
# Websites: http://www.j-download.com
# Technical Support: http://www.j-download.com/request-for-quotation.html
-------------------------------------------------------------------------*/
defined('_JEXEC') or die('Restricted access');
class modArticleHelper
{
function getArticleOptions($id)
{
$db =& JFactory::getDBO();
$query = 'SELECT a.id, a.title, a.introtext, a.fulltext' .
' FROM #__content AS a' .
' WHERE a.catid = ' . (int) $id .
' ORDER BY a.id';
$db->setQuery($query);
if (!($options = $db->loadObjectList())) {
echo "MD ".$db->stderr();
return;
}
return $options;
}
}
?>

Here you will see a function called: getArticleOptions, Which mainly load article and return $options value. Now you may change the query according to your need. Even you can make another function if you need in your module. You will just have to call that function in mod_jarticle.php file.

Then there is one important file called default.php , which is located in tmpl folder. So let’s open that file:

<?php
/*------------------------------------------------------------------------
# J Article
# ------------------------------------------------------------------------
# author Md. Shaon Bahadur
# copyright Copyright (C) 2011 j-download.com. All Rights Reserved.
# @license - http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
# Websites: http://www.j-download.com
# Technical Support: http://www.j-download.com/request-for-quotation.html
-------------------------------------------------------------------------*/
defined('_JEXEC') or die('Restricted access');
$title = $params->get( 'module_showtitle', 0 );
$width = $params->get( 'module_width', 0 );
$module_lettercnt = $params->get( 'module_lettercnt', 0 );
?>
<link rel="stylesheet" href="/modules/mod_jarticle/tmpl/css/style.css" type="text/css" media="screen" charset="utf-8" />
<script type="text/javascript" src="/modules/mod_jarticle/tmpl/js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="/modules/mod_jarticle/tmpl/js/startstop-slider.js"></script>
<div id="page-wrap" style="width: <?php echo $width; ?>px;">
<div id="slider">
<div id="mover">
<?php for ($i = 0, $n = count($options); $i < $n; $i ++) : ?>
<div id="slide-<?php echo $i; ?>" class="slide">
<?php
if($title){
?>
<h1>
<?php
$url='<a href="/component/content/?id='.$options[$i]-&gt;id_'=&Itemid='.$_REQUEST['Itemid'].'">';
echo $url;
echo $options[$i]->title;
echo '</a>';
?>
</h1>
<?php } ?>
<div id="article_content">
<?php
if($options[$i]->introtext){
echo $options[$i]->introtext;
}
else{
echo $options[$i]->fulltext;
}
?>
</div>
</div>
<?php endfor; ?>
</div>
</div>
</div>

Now here three parameter are catching from module configuration file:

$title = $params->get( 'module_showtitle', 0 );

$width = $params->get( 'module_width', 0 );

$module_lettercnt = $params->get( 'module_lettercnt', 0 );

To get the title, width and letter count. So once we get those values then we go for html js and css call. Once we are done with js and css then we go for actual article wrapper call. Here you will see that we put a for loop to catch the entire article into divs called:

<div id="slider">

<div id="mover">

…….

</div>

</div>

Which then formatted by the js and css. If you need you can modify the js or css according to your need. Even you can add new js with new effect.

Now this extension used three js, which are:

a) jquery-1.2.6.js

b) jquery-1.2.6.pack.js

c) startstop-slider.js

First two are jquery library, so let's see what is inside third one:

// SET THIS VARIABLE FOR DELAY, 1000 = 1 SECOND
var delayLength = 4000;

function doMove(panelWidth, tooFar) {
var leftValue = $("#mover").css("left");

// Fix for IE
if (leftValue == "auto") { leftValue = 0; };

var movement = parseFloat(leftValue, 10) - panelWidth;

if (movement == tooFar) {
$(".slide img").animate({
"top": -200
}, function() {
$("#mover").animate({
"left": 0
}, function() {
$(".slide img").animate({
"top": 35
});
});
});
}
else {
$(".slide img").animate({
"top": -200
}, function() {
$("#mover").animate({
"left": movement
}, function() {
$(".slide img").animate({
"top": 35
});
});
});
}
}

$(function(){

var $slide1 = $("#slide-1");

var panelWidth = $slide1.css("width");
var panelPaddingLeft = $slide1.css("paddingLeft");
var panelPaddingRight = $slide1.css("paddingRight");

panelWidth = parseFloat(panelWidth, 10);
panelPaddingLeft = parseFloat(panelPaddingLeft, 10);
panelPaddingRight = parseFloat(panelPaddingRight, 10);

panelWidth = panelWidth + panelPaddingLeft + panelPaddingRight;

var numPanels = $(".slide").length;
var tooFar = -(panelWidth * numPanels);
var totalMoverwidth = numPanels * panelWidth;
$("#mover").css("width", totalMoverwidth);

$("#slider").append('<a href="JavaScript:void" id="slider-stopper">Stop</a>');

sliderIntervalID = setInterval(function(){
doMove(panelWidth, tooFar);
}, delayLength);

$("#slider-stopper").click(function(){
if ($(this).text() == "Stop") {
clearInterval(sliderIntervalID);
$(this).text("Start");
}
else {
sliderIntervalID = setInterval(function(){
doMove(panelWidth, tooFar);
}, delayLength);
$(this).text("Stop");
}

});

});

Now you can customize this js according to your need. You can set padding top, bottom, left, right , then sliding delay. This is the main functionality of js.

Let's open css file for this module. It has a very simple css definition but you can add more css according to your need.

a { text-decoration: none; outline: none; }
a img { border: none; }

h2 { font-family: Georgia, Serif; font-size: 30px; text-align: center;
font-weight: normal; }

#page-wrap { background: white; margin: 0 auto;
padding: 0px; }

#slider { background: white url(../images/slider-bg.jpg); height: 227px; overflow: hidden;
position: relative; margin: 0px; }

/* DEFAULT is for three panels in width, adjust as needed
This only matters if JS is OFF, otherwise JS sets this. */
#mover { width: 2880px; position: relative; }

.slide { padding: 0px 30px; width: 900px; float: left; position: relative; }
.slide h1 { font-family: Helvetica, Sans-Serif; font-size: 25px;
color: #ac0000; }
.slide h1 a{
color: #ac0000;
}

.slide #article_content { color: #000000; font-size: 12px; line-height: 22px; width: 400px;padding-top: 5px; }
.slide img { position: absolute; top: 35px; left: 444px; }
#slider-stopper { position: absolute; top: 1px; right: 20px; background: #ac0000; color: white;
padding: 3px 8px; font-size: 10px; text-transform: uppercase; z-index: 1000; }

This is the basic idea of making mod_jarticle in joomla 1.5.x. I hope this article helps you to learn how this module works. If you find this article helpful then please leave your comment.

Download Source Code for Joomla 1.0.x

Download Source Code for Joomla 1.6, 1.7, 2.5 and 3.x

Download Source Code for Joomla 1.5.x

Add comment


Security code
Refresh