jCarousel

=jCarousel=

code format="html4strict"  ">
 * @http://sorgalla.com/projects/jcarousel/
 * Descargar el zip y obtendremos la carpeta jsor-jcarousel
 * copiar a Scripts **jquery.jcarousel.min.js**
 * copiar a CSS la carpeta skins/ie7 que incluye el CSS y sus imágenes
 * Poner en el Master las referencias al JS y CSS de Carousel

code code format="html4strict"  jQuery(document).ready(function {        jQuery('#mycarousel').jcarousel({ // Configuration goes here }); });
 * Codificar en la página

 contenido 1 contenido 2 contenido 3 

code

Modificar el ancho y el número de elementos
Veamos un ejemplo para poner 4 imágenes en el carousel code format="css" .jcarousel-skin-custom .jcarousel-container-horizontal { width: 348px; /* 245px para 3, 348px; para 4*. poner lo mismo en el container */ padding: 20px 40px; }
 * en la CSS modificar los anchos

.jcarousel-skin-custom .jcarousel-clip-horizontal { width: 348px; height: 77px; } code code format="jquery"  jQuery(document).ready(function {           jQuery('ul.jcarousel-skin-custom').jcarousel({ scroll: 1, wrap: 'circular', visible: 4 });  }); code code format="asp"     <ItemTemplate>  <a href="<%# Eval("ImageUrl") %>" class="lightbox"> <img border="0" src='<%# Eval("ImageUrl") %>' width="80" height="80" alt='<%# Eval("ImageTooltip") %>' title='<%# Eval("ImageTooltip") %>' /> </a> </li> </ItemTemplate> <FooterTemplate> </ul> </FooterTemplate> </asp:Repeater> code
 * en al arranque poner los parámetros de configuración
 * Si queremos poner varias fotos con un control Repeater

Bugs
> http://stackoverflow.com/questions/4417694/jquery-tabs-nesting-other-jquery-elements-or-javascript-within-only-works-on-fir
 * Si se pone jCarousel en un tabs de jQuery que no sea el primer tab, no funciona bien. hay que modificar el CSS tal como se indica en
 * Si aparece el error: //jCarousel: No width/height set for items. This will cause an infinite loop. Aborting//..., poner el WIDTH - HEIGHT en todos los jcarousel-item (tambien jcarousel-item-horizontal)
 * a veces puede volver a aparecer, principalmente en IE, en este caso lo mejor es comentar la linea del JS que realiza el 'throw'. Solucionado.
 * Ojo al usar wrap=circular pues puede dar errores en algún caso.

=Example of using tabs - jCarousel - colorbox=



code format="html4strict" <link href="Styles/jcarousel/skin-custom.css" rel="stylesheet" type="text/css" /> <link href="Styles/colorbox/colorbox.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js">

<script type="text/javascript" src="<%=ResolveUrl("~/Scripts/jquery.jcarousel.js")%>"> <script type="text/javascript" src="<%=ResolveUrl("~/Scripts/jquery.colorbox-min.js")%>">

<script type="text/javascript"> jQuery(document).ready(function {        jQuery('#mycarousel1').jcarousel({ scroll: 1, wrap: 'circular', visible: 4 });       jQuery('#mycarousel2').jcarousel({ scroll: 1, wrap: 'circular', visible: 4 });       jQuery("a[rel='grupo'].lightbox").colorbox({ current: "{current} / {total}", previous: 'anterior', next: 'siguiente', width: 400, height: 400 });       jQuery("a[rel='grupo2'].lightbox").colorbox({ current: "{current} / {total}", previous: 'anterior', next: 'siguiente', width: 400, height: 400 });       $(function  { $("#tabs1").tabs; $("#tabs2").tabs; });   });

 <a href="#tabs-1-1">TAB 1</a></li> <a href="#tabs-2-1">TAB 2</a></li> <a href="#tabs-3-1">TAB 3</a></li> </ul> Contenido primer tab

Contenido segunto Tab. <ul id="mycarousel1" class="jcarousel-skin-ie7">  <a href="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" class="lightbox" rel="grupo"> <img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></a></li>

 <a href="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" class="lightbox" rel="grupo"> <img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></a></li>

 <a href="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" class="lightbox" rel="grupo"> <img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></a></li>

 <a href="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" class="lightbox" rel="grupo"> <img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></a></li>

 <a href="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" class="lightbox" rel="grupo"> <img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></a></li>

 <a href="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" class="lightbox" rel="grupo"> <img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></a></li> </ul> Contenido tercer

 <a href="#tabs-1-2">TAB 1</a></li> <a href="#tabs-2-2">TAB 2</a></li> <a href="#tabs-3-2">TAB 3</a></li> </ul> Contenido primer tab Contenido segunto Tab. <ul id="mycarousel2" class="jcarousel-skin-ie7">  <a href="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" class="lightbox" rel="grupo2"> <img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></a></li>

<li> <a href="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" class="lightbox" rel="grupo2"> <img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></a></li>

<li> <a href="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" class="lightbox" rel="grupo2"> <img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></a></li>

<li> <a href="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" class="lightbox" rel="grupo2"> <img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></a></li>

<li> <a href="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" class="lightbox" rel="grupo2"> <img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></a></li>

<li> <a href="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" class="lightbox" rel="grupo2"> <img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></a></li> </ul> Contenido tercer code