lunes, 20 de junio de 2011

Añadir jCarousel en Blogger

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).
Publicado por en
Etiquetas: ,

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)