jquery carousel News

[Relawda]

hi
im trying to develop an jquery carousel News, like this "Picture", but i can't because im a biggener.



to try this:
file to copy : here.

open overall_header.html :
find :

Code: Select all

<script type="text/javascript">
// <![CDATA[

add befor :

Code: Select all

<script type="text/javascript" src="{T_TEMPLATE_PATH}/portal/carrosa/jquery-1.3.2.js"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/portal/carrosa/jquery.infinite-carousel.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function(){
		jQuery('#slider-stage').carousel('#previous', '#next');
		jQuery('#viewport').carousel('#simplePrevious', '#simpleNext');  
	});
</script>

open news bloc in template portal :
find :

Code: Select all

<!-- IF $S_POSTBODY_TOP --><div class="postbody" style="width: 100%"><!-- ENDIF -->

add after :

Code: Select all

<div id="viewport">
<ul>

find :

Code: Select all

<div style="margin-bottom: <!-- IF announcements_row.S_LAST_ROW -->0px<!-- ELSE -->1px<!-- ENDIF -->" class="post <!-- IF news_row.S_ROW_COUNT is odd -->bg1<!-- ELSE -->bg2<!-- ENDIF -->">

add befor :

Code: Select all

        <li>

find :

Code: Select all

                    <!-- IF not $S_POSTBODY_TOP --></div><!-- ENDIF -->
                <span class="portal-corners-bottom-inner"></span></div>
            </div>

add after :

Code: Select all

        </li>

find :

Code: Select all

    <!-- END news_row -->

add after :

Code: Select all

</ul>
</div>
<a id="simplePrevious"><img alt="Off alternate text" 
src="{T_TEMPLATE_PATH}/portal/carrosa/t-previous.png" onmouseover="this.src='{T_TEMPLATE_PATH}/portal/carrosa/previous.png';this.alt='On alternate text';" 
onmouseout="this.src='{T_TEMPLATE_PATH}/portal/carrosa/t-previous.png';this.alt='Off alternate text';" /></a>

<a id="simpleNext"><img alt="Off alternate text" 
src="{T_TEMPLATE_PATH}/portal/carrosa/t-next.png" onmouseover="this.src='{T_TEMPLATE_PATH}/portal/carrosa/next.png';this.alt='On alternate text';" 
onmouseout="this.src='{T_TEMPLATE_PATH}/portal/carrosa/t-next.png';this.alt='Off alternate text';" /></a>

open portal.css :
find :

Code: Select all

.portal-navigation div.menutitle{
padding: 1px 0;
font: bold 90% "Tahoma",'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
font-size: 12px;
}

add after :

Code: Select all

#viewport{
    width: 622px;
    /*height:    100%;*/
    overflow:hidden;
    margin:0px auto;
}

#viewport ul{
    position: relative;
    margin: 0px auto;
    padding: 0;
    left:0px;
}

#viewport li{
    width: 600px;  /*Defines the size of inner element */
    height: 100%;
    float: right;  /*Places list items side by side*/
    list-style: none; /* Resets default - User Agent - style */
    margin:0px auto;
    /* Cosmetic 
    background-color: red;*/
    margin: 0 1px;
    padding: 10px;
    text-align:center;
}

#simplePrevious, #simpleNext{
    cursor: pointer;
}

#simplePrevious{float:left;padding-left:15px;padding-bottom:3px;}
#simpleNext{float:right;padding-right:15px;padding-bottom:3px;}

that the basic project here, demo.

and so sorry for my very bad english