-
AuthorPosts
-
kade119 Friend
kade119
- Join date:
- December 2007
- Posts:
- 62
- Downloads:
- 0
- Uploads:
- 0
- Thanks:
- 7
- Thanked:
- 1 times in 1 posts
January 15, 2008 at 4:48 am #124998Hey 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.xmljust 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 Friendkade119
- Join date:
- December 2007
- Posts:
- 62
- Downloads:
- 0
- Uploads:
- 0
- Thanks:
- 7
- Thanked:
- 1 times in 1 posts
January 15, 2008 at 4:58 am #236440well 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 Friendkashxo
- Join date:
- April 2007
- Posts:
- 605
- Downloads:
- 0
- Uploads:
- 21
- Thanks:
- 11
- Thanked:
- 78 times in 40 posts
January 15, 2008 at 7:07 am #236444The 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 Friendkade119
- Join date:
- December 2007
- Posts:
- 62
- Downloads:
- 0
- Uploads:
- 0
- Thanks:
- 7
- Thanked:
- 1 times in 1 posts
January 15, 2008 at 7:44 pm #236475thanks 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 Friendkashxo
- Join date:
- April 2007
- Posts:
- 605
- Downloads:
- 0
- Uploads:
- 21
- Thanks:
- 11
- Thanked:
- 78 times in 40 posts
January 16, 2008 at 4:52 am #236496Thank 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:
kade119 Friendkade119
- Join date:
- December 2007
- Posts:
- 62
- Downloads:
- 0
- Uploads:
- 0
- Thanks:
- 7
- Thanked:
- 1 times in 1 posts
January 16, 2008 at 10:28 pm #236546WOW! that was very cool! Thanks kashxo and hieu!
Great Template!
kade119 Friendkade119
- Join date:
- December 2007
- Posts:
- 62
- Downloads:
- 0
- Uploads:
- 0
- Thanks:
- 7
- Thanked:
- 1 times in 1 posts
January 20, 2008 at 9:04 am #236743Hi 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
January 28, 2008 at 9:54 pm #237478nice 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
February 9, 2008 at 3:24 pm #238737Hello 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
adamApril 24, 2008 at 11:22 pm #246741still didnt get the solution
May 2, 2008 at 12:24 am #247519U 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>:((:((
-
AuthorPosts
This topic contains 11 replies, has 5 voices, and was last updated by attran 16 years, 6 months ago.
We moved to new unified forum. Please post all new support queries in our New Forum