Añadir jCarousel en Blogger

Por Anónimo el lunes, junio 20, 2011

jCarousel es un plugin basado en jQuery creado por Jan Sorgalla el cual muestra en forma de galería una serie de imágenes. A petición de Retube Lo he configurado para que se pueda utilizar como un simple slider superior.

Puedes ver un ejemplo del slider en este blog de pruebas.

¿Cómo añadirlo a Blogger?:

Paso 1: Propiedades CSS:

En ''Diseño | Edición HTML'', buscaremos la siguiente sección:

]]></b:skin>

Arriba de esta, pegaremos el siguiente código:

.jcarousel-skin-tango .jcarousel-container {
    -moz-border-radius: 10px; /* Bordes redondeados para Firefox*/
    -webkit-border-radius: 10px; /*Bordes redondeados para otros navegadores*/
   border-radius: 10px; /* Bordes redondeados-valor estándar*/
    background: #F0F6F9; 
    border: 1px solid #346F97;
}

.jcarousel-skin-tango .jcarousel-direction-rtl {
    direction: rtl; /* Ignorar*/
}

.jcarousel-skin-tango .jcarousel-container-horizontal {
    padding: 20px 40px; /* Ignorar*/
}

.jcarousel-skin-tango .jcarousel-container-vertical {
    width: 100px; /* Ignorar*/
    height: 720px; /* Ignorar*/
    padding: 40px 20px; /*Ignorar*/
}

.jcarousel-skin-tango .jcarousel-clip {

    overflow: hidden;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width:  720px; /* Alto del plugin*/
    height: 100px; /* ancho del plugin*/
}

.jcarousel-skin-tango .jcarousel-clip-vertical {
    width:  100px; /*Ignorar*/
    height: 720px; /*Ignorar*/
}

.jcarousel-skin-tango .jcarousel-item {
    width: 95px; /*Ancho de cada item*/
    height: 95px; /*Alto de cada item*/
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
    margin-left: 0; /*Ignorar*/
    margin-right: 10px; /*Ignorar*/
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
    margin-left: 10px; /*Ignorar*/
    margin-right: 0; /*Ignorar*/
}

.jcarousel-skin-tango .jcarousel-item-vertical {
    margin-bottom: 10px; /*Ignorar*/
}

.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff; /*Ignorar*/ 
    color: #000; /*Ignorar*/
}

/**
 *  BOTONES
 */
.jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top: 43px;
    right: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(http://archivos.ayuda-bloggers.info/Scripts%20Recuperados/carousel/jCarousel/next-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
    left: 5px;
    right: auto;
    background-image: url(http://archivos.ayuda-bloggers.info/Scripts%20Recuperados/carousel/jCarousel/prev-horizontal.png);
}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-horizontal:focus {
    background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:active {
    background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top: 43px;
    left: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(http://archivos.ayuda-bloggers.info/Scripts%20Recuperados/carousel/jCarousel/prev-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
    left: auto;
    right: 5px;
    background-image: url(http://archivos.ayuda-bloggers.info/Scripts%20Recuperados/carousel/jCarousel/next-horizontal.png);
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover, 
.jcarousel-skin-tango .jcarousel-prev-horizontal:focus {
    background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
    background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:focus,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}

/**
 *  BOTONES VERTICALES- IGNORAR
 */
.jcarousel-skin-tango .jcarousel-next-vertical {
    position: absolute;
    bottom: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(http://archivos.ayuda-bloggers.info/Scripts%20Recuperados/carousel/jCarousel/next-vertical.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-next-vertical:hover,
.jcarousel-skin-tango .jcarousel-next-vertical:focus {
    background-position: 0 -32px;
}

.jcarousel-skin-tango .jcarousel-next-vertical:active {
    background-position: 0 -64px;
}

.jcarousel-skin-tango .jcarousel-next-disabled-vertical,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:focus,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}

.jcarousel-skin-tango .jcarousel-prev-vertical {
    position: absolute;
    top: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(http://archivos.ayuda-bloggers.info/Scripts%20Recuperados/carousel/jCarousel/prev-vertical.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-prev-vertical:hover,
.jcarousel-skin-tango .jcarousel-prev-vertical:focus {
    background-position: 0 -32px;
}

.jcarousel-skin-tango .jcarousel-prev-vertical:active {
    background-position: 0 -64px;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-vertical,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:focus,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}

Paso 2: Añadiendo la sección:

Ahora busca la siguiente sección en tu plantilla:

<div id='content-wrapper'>

Si utilizas una plantilla del Diseñador de Blogger busca la siguiente sección:

<div class='main-outer'>

Debajo de esta, pega el siguiente código:

<div class='jcarousel-skin-tango' id='mycarousel'>
<ul>

<li><a href='URL_ENLACE'><img alt='' height='95' src='IMAGEN 1' width='95'/></a></li>

<li><a href='URL_ENLACE'><img alt='' height='95' src='IMAGEN 2' width='95'/></a></li>
      
<li><a href='URL_ENLACE'><img alt='' height='95' src='IMAGEN 3' width='95'/></a></li>
      
<li><a href='URL_ENLACE'><img alt='' height='95' src='IMAGEN 4' width='95'/></a></li>
      
<li><a href='URL_ENLACE'><img alt='' height='95' src='IMAGEN 5' width='95'/></a></li>
      
<li><a href='URL_ENLACE'><img alt='' height='95' src='IMAGEN 6' width='95'/></a></li>

<li><a href='URL_ENLACE'><img alt='' height='95' src=IMAGEN 7' width='95'/></a></li>

<li><a href='URL_ENLACE'><img alt='' height='95' src='IMAGEN 8' width='95'/></a></li>
      
<li><a href='URL_ENLACE'><img alt='' height='95' src=IMAGEN 9' width='95'/></a></li>
      
<li><a href='URL_ENLACE'><img alt='' height='95' src='IMAGEN 10' width='95'/></a></li>
      
<li><a href='URL_ENLACE'><img alt='' height='95' src='IMAGEN 11' width='95'/></a></li>
      
<li><a href='URL_ENLACE'><img alt='' height='95' src='IMAGEN 12' width='95'/></a></li>

</ul>
  </div>

Reemplaza cada valor por el correspondiente.

Paso 3: Añadiendo el script y haciendo el llamado a las funciones:

Ahora busca la siguiente sección:

</head>

Arriba de esta pega el siguiente código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src='http://archivos.ayuda-bloggers.info/Scripts%20Recuperados/carousel/jCarousel/jquery.jcarousel.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function() {
    jQuery(&#39;#mycarousel&#39;).jcarousel({
    });
});
</script>

Previsualiza los cambios y si el resultado es satisfactorio guardalos.

Importante:

Si el carrusel se vé muy ancho o muy estrecho para tu blog, modifica los valores width en la zona CSS (Están descritas algunas funciones).
Para cambiar el tamaño de las imágenes, deberás modificar los siguientes valores en la zona CSS:

width: 95px; /*Ancho de cada item*/
height: 95px; /*Alto de cada item*/

También deberás cambiar el valor width y height de cada imagen del paso 2 (Por defecto están en 95).
Para cambiar las imágenes de los botones, deberás manejar cómo usar sprites (Una imagen que contenga varias).

Ir a la página principal Subir A favoritos