Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • kade119 Friend
    #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
    #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
    #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
    #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
    #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
    #236546

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

    Great Template!

    kade119 Friend
    #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
    #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
    #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
    #246741

    still didnt get the solution

    attran Friend
    #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>

    :((:((

Viewing 11 posts - 1 through 11 (of 11 total)

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