Joomla Templates Club 406,261 posts

[kade119 Friend kade119Join date: December 2007Posts: 62Downloads:0Uploads:0 Thanks: 7 Thanked: 1 times in 1 posts]

#124998

Hey guys, i was customizing my template a bit and was needing a rollover image on the SWLI

well its quite easy… just follow my few edits here (in green text) I added to the following files:

FILE: mod_ja_swli.php

<?php
// no direct access
defined( ‘_JEXEC’ ) or die( ‘Restricted access’ );

$title = $params->get(‘title’);
$path = $params->get(‘image’);
$height = intval($params->get(‘height’));
$text = $params->get(‘fulltext’);
$link = $params->get(‘link’);
$path2 = $params->get(‘hoverimage’);

$color = $params->get(‘textcolor’);
if ($color) $color = ” color:#$color;”;
$bgcolor = $params->get(‘bgcolor’);
if ($bgcolor) $bgcolor = ” background-color:#$bgcolor;”;
$trans = intval($params->get(‘transparent’));
if (!$trans) $trans = 100;
//~ if ($trans) $trans = ” opacity:”.($trans/100).”; filter:alpha(opacity=”.$trans.”);”;
//~ else $trans = “”;
$xheight = intval($params->get(‘expandheight’));

$path = JURI::base() . “/” . $path;

global $ja_slwi_id;
if (!defined( ‘_MOD_JA_SLWI’)) {
echo ‘
<script type=”text/javascript” src=”‘.JURI::base().’/modules/mod_ja_slwi/ja_slwi/ja_slwi.js”></script>
<script type=”text/javascript” src=”‘.JURI::base().’/modules/mod_ja_slwi/ja_slwi/mootools.v1.1.js”></script>
<script type=”text/javascript”>
jaSLWI.expandH = ‘.$xheight.’;
</script>’;
define( ‘_MOD_JA_SLWI’, 1 );
$ja_slwi_id = 0;
}
echo ‘
<div ‘.($link ? ‘onclick=”location.href=”.$link.””‘ : ”).’ class=”ja-slwi” style=”position: relative; height: ‘.$height.’px; margin: 0; padding: 0;background:url(‘.$path.’) no-repeat;’.($link ? ‘ cursor: pointer;’ : ”).'”>
<div class=”ja-slwi-container” style=”position: absolute; z-index: 1; bottom: 2px; left: 0;”>
<p> </p>
<div class=”ja-slwi-text” style=”position:relative;height: 0; overflow: hidden;”>
<div id=”ja-slwi-textbg’.(++$ja_slwi_id).'” style=”position: absolute; top:0;left:0;height:’.$xheight.’px;width:100%;background:(‘.$path2.’) no-repeat;”>
<script type=”text/javascript”>
textbg = document.getElementById(“ja-slwi-textbg’.($ja_slwi_id).'”);
textbg.style.opacity = ‘.($trans/100).’;
textbg.style.filter = ‘alpha(opacity=’.$trans.’)’;
</script>
</div>
<div style=”position: absolute; top:0;left:0;height:’.$xheight.’px;’.$color.'”><h3>’.$title.'</h3>’.$text.'</div>
</div>
</div>
</div>’;
?>

FILE: mod_ja_swli.xml

just add this line in the xml file

<param name=”hoverimage” type=”text” default=”” label=”Image Path” description=”Path to the image” />

and thats it, now go to your admin panel there should be a place to input the correct path to your image, i suggest doing a .gif or .png format to get rounded corners.. also i squared the top of the rollover image.. if your familiar w/ a graphics program such as photoshop you should understand what i mean, if not just msg me .. i’ll try to help

[kade119 Friend kade119Join date: December 2007Posts: 62Downloads:0Uploads:0 Thanks: 7 Thanked: 1 times in 1 posts]

#236440

well i thought it was working….. can anyone here help me complete this feature so its working properly?

Another problem I’m trying to solve is the color of the header on the SWLI the rollover… i know in the css file

div.moduletable h3 span,
div.moduletable-hilite h3 span {
background: url(../images/h3-bg.gif) no-repeat center right;
padding-right: 20px;
color:#006de5;
}

but when adjust this color it also adjust other modules headers, such as the “login” and i tried customizing the mod-ja-textbg but still nothing, has anyone else figured out a solution fo rthis?

[kashxo Friend kashxoJoin date: April 2007Posts: 605Downloads:0Uploads:21 Thanks: 11 Thanked: 78 times in 40 posts]

#236444

The code u are using here still included mootools 1.0 version.
Please try to download the updated package from our site to have correct code.

[kade119 Friend kade119Join date: December 2007Posts: 62Downloads:0Uploads:0 Thanks: 7 Thanked: 1 times in 1 posts]

#236475

thanks much kashxo

will one of the developers help me finish this code to have the option of adding a image to hover?

please kashox or hieu… this would be great add-on to this feature

[kashxo Friend kashxoJoin date: April 2007Posts: 605Downloads:0Uploads:21 Thanks: 11 Thanked: 78 times in 40 posts]

#236496

Thank you kade119, the idea is great. Here is the code I’ve modify a bit for anyone would like to try. This module has current features of JA SLWI, but when hover mouse on it, the background will be changed to other images that we’ve defined.
Here is it, the modifications is the text with green color:
<blockquote>
<?php
// no direct access
defined( ‘_JEXEC’ ) or die( ‘Restricted access’ );

$title = $params->get(‘title’);
$path = $params->get(‘image’);
$height = intval($params->get(‘height’));
$text = $params->get(‘fulltext’);
$link = $params->get(‘link’);
$hoverimage = $params->get(‘hoverimage’);

$color = $params->get(‘textcolor’);
if ($color) $color = ” color:#$color;”;
$bgcolor = $params->get(‘bgcolor’);
if ($bgcolor) $bgcolor = ” background-color:#$bgcolor;”;
$trans = intval($params->get(‘transparent’));
if (!$trans) $trans = 100;
//~ if ($trans) $trans = ” opacity:”.($trans/100).”; filter:alpha(opacity=”.$trans.”);”;
//~ else $trans = “”;
$xheight = intval($params->get(‘expandheight’));

$path = JURI::base() . “/” . $path;
$pathhover = JURI::base() . “/” . $hoverimage;

global $ja_slwi_id;
if (!defined( ‘_MOD_JA_SLWI’)) {
echo ‘
<script type=”text/javascript” src=”‘.JURI::base().’/modules/mod_ja_slwi/ja_slwi/ja_slwi.js”></script>
<script type=”text/javascript”>
jaSLWI.expandH = ‘.$xheight.’;
</script>’;
define( ‘_MOD_JA_SLWI’, 1 );
$ja_slwi_id = 0;
}
echo ‘
<div ‘.($link ? ‘onclick=”location.href=”.$link.””‘ : ”).’ class=”ja-slwi” style=”position: relative; height: ‘.$height.’px; margin: 0; padding: 0;background:url(‘.$path.’) no-repeat;’.($link ? ‘ cursor: pointer;’ : ”).'” onmouseover=”this.style.background=’url(‘.$pathhover.’) no-repeat'” onmouseout=”this.style.background=’url(‘.$path.’) no-repeat'”>
<div class=”ja-slwi-container” style=”position: absolute; z-index: 1; bottom: 2px; left: 0;”>
<p> </p>
<div class=”ja-slwi-text” style=”position:relative;height: 0; overflow: hidden;”>
<div id=”ja-slwi-textbg’.(++$ja_slwi_id).'” style=”position: absolute; top:0;left:0;height:’.$xheight.’px;width:100%; ‘.$bgcolor.'”>
<script type=”text/javascript”>
textbg = document.getElementById(“ja-slwi-textbg’.($ja_slwi_id).'”);
textbg.style.opacity = ‘.($trans/100).’;
textbg.style.filter = ‘alpha(opacity=’.$trans.’)’;
</script>
</div>
<div style=”position: absolute; top:0;left:0;height:’.$xheight.’px;’.$color.'”><h3 >’.$title.'</h3>’.$text.'</div>
</div>
</div>
</div>’;
?>
</blockquote>

Also in xml file, we add 1 more param:

<param name=”hoverimage” type=”text” default=”” label=”Image Hover Path” description=”Path to the image” />

That’s it. If you guys feel hard to modify in code, you can download modified version of module here:

JA SLWI for RC4

[kade119 Friend kade119Join date: December 2007Posts: 62Downloads:0Uploads:0 Thanks: 7 Thanked: 1 times in 1 posts]

#236546

WOW! that was very cool! Thanks kashxo and hieu!

Great Template!

[kade119 Friend kade119Join date: December 2007Posts: 62Downloads:0Uploads:0 Thanks: 7 Thanked: 1 times in 1 posts]

#236743

Hi kashxo and hieu, i got the image hover working, really cool!, but I was actualy aiming to just replace the rollover background color with an image, so it still animated upwards .. nothing would change except the part that rollsover would be an image instead of a solid color is there a way to do this? and then also a way to adjust the width of it so.. so if i remove the newsflash.. the layout stays in sync still

[BjoernMeldgaard Friend BjoernMeldgaardJoin date: August 2005Posts: 14Downloads:0Uploads:0 Thanks: 2]

#237478

nice expansion of the module. One comment though:

To be perfect the pictures shouldnt instantly swap but crossfade. As it is you now have the text sliding upwards in one tempo and the images instantly flip-flopping. Thats disrytmic and doesnt give the pro impression as the plain standard version.

One acceptable use of the current version would fx be to have two versions of the same image:

– one ‘static’ image
– the same image with opacity/ blue tint or whatever …

In that way the change would be subtle

[aribarics Friend aribaricsJoin date: January 2008Posts: 1Downloads:0Uploads:0]

#238737

Hello dear friends!
I changed the code in the files,but i dont see the picture in the module,than i have install the newes swli modul,but the problem is the same:((,i worked with png and jpg,and i use joomla 1.5.
My eanglish is not so good so pleas tell me easy what i have to do
thank you
adam

[attran Friend attranJoin date: April 2008Posts: 7Downloads:0Uploads:0]

#246741

still didnt get the solution

[attran Friend attranJoin date: April 2008Posts: 7Downloads:0Uploads:0]

#247519

U guys now I have an error that disabled all the content of my website. What shall I do?

Error:
Parse error: syntax error, unexpected T_STRING, expecting ‘,’ or ‘;’ in /home2/thefreez/public_html/modules/mod_ja_slwi.php on line 38

<blockquote>

<?php
// no direct access
defined( ‘_JEXEC’ ) or die( ‘Restricted access’ );

$title = $params->get(‘title’);
$path = $params->get(‘image’);
$height = intval($params->get(‘height’));
$text = $params->get(‘fulltext’);
$link = $params->get(‘link’);
$hoverimage = $params->get(‘hoverimage’);

$color = $params->get(‘textcolor’);
if ($color) $color = ” color:#$color;”;
$bgcolor = $params->get(‘bgcolor’);
if ($bgcolor) $bgcolor = ” background-color:#$bgcolor;”;
$trans = intval($params->get(‘transparent’));
if (!$trans) $trans = 100;
//~ if ($trans) $trans = ” opacity:”.($trans/100).”; filter:alpha(opacity=”.$trans.”);”;
//~ else $trans = “”;
$xheight = intval($params->get(‘expandheight’));

$path = JURI::base() . “/” . $path;
$pathhover = JURI::base() . “/” . $hoverimage;

global $ja_slwi_id;
if (!defined( ‘_MOD_JA_SLWI’)) {
echo ‘
<script type=”text/javascript” src=”‘.JURI::base().’/modules/mod_ja_slwi/ja_slwi/ja_slwi.js”></script>
<script type=”text/javascript”>
jaSLWI.expandH = ‘.$xheight.’;
</script>’;
define( ‘_MOD_JA_SLWI’, 1 );
$ja_slwi_id = 0;
}
echo ‘
<div ‘.($link ? ‘onclick=”location.href=”.$link.””‘ : ”).’ class=”ja-slwi” style=”position: relative; height: ‘.$height.’px; margin: 0; padding: 0;background:url(‘.$path.’) no-repeat;’.($link ? ‘ cursor: pointer;’ : ”).'” onmouseover=”this.style.background=’url(‘.$pathhover.’) no-repeat'” onmouseout=”this.style.background=’url(‘.$path.’) no-repeat'”>
<div class=”ja-slwi-container” style=”position: absolute; z-index: 1; bottom: 2px; left: 0;”>
<p> </p>
<div class=”ja-slwi-text” style=”position:relative;height: 0; overflow: hidden;”>
<div id=”ja-slwi-textbg’.(++$ja_slwi_id).'” style=”position: absolute; top:0;left:0;height:’.$xheight.’px;width:100%; ‘.$bgcolor.'”>
<script type=”text/javascript”>
textbg = document.getElementById(“ja-slwi-textbg’.($ja_slwi_id).'”);
textbg.style.opacity = ‘.($trans/100).’;
textbg.style.filter = ‘alpha(opacity=’.$trans.’)’;
</script>
</div>
<div style=”position: absolute; top:0;left:0;height:’.$xheight.’px;’.$color.'”><h3 >’.$title.'</h3>’.$text.'</div>
</div>
</div>
</div>’;
?></blockquote>

:((:((

[Author]

Posts