jquery carousel News
Posted: 22. September 2010 22:33
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 :
add befor :
open news bloc in template portal :
find :
add after :
find :
add befor :
find :
add after :
find :
add after :
open portal.css :
find :
add after :
that the basic project here, demo.
and so sorry for my very bad english
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[
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>
find :
Code: Select all
<!-- IF $S_POSTBODY_TOP --><div class="postbody" style="width: 100%"><!-- ENDIF -->
Code: Select all
<div id="viewport">
<ul>
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 -->">
Code: Select all
<li>
Code: Select all
<!-- IF not $S_POSTBODY_TOP --></div><!-- ENDIF -->
<span class="portal-corners-bottom-inner"></span></div>
</div>
Code: Select all
</li>
Code: Select all
<!-- END news_row -->
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>
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;
}
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