Nuevo Slide con desplazamiento manual usando jQuery

01 agosto 2010

Nuevo Slide con desplazamiento manual usando jQuery

    1 comentario
Los slides dan un toque de profesionalismo en cada pagina web o blog que los posea, ya que tienen efectos vistosos que rápidamente pueden llamar la atención del lector, invitándolos a hacer clics sobre cada uno de ellos. Este no es el primer Slide con desplazamiento que he publicado en este blog, de hecho, hay uno aquí publicado que posee el mismo efecto y usa jQuery para su acción pero es totalmente diferente en su estilo.


Es momento de comenzar comenzar con la explicación, recuerda siempre de usar imágenes con dimensiones de 307px de ancho (Width) por 254 de altura (Height). También te recomiendo que descargar los archivos Javascript a tu computador y alojarlos en tu propio servidor. Antes de comenzar, te dejo una vista previa en imagen del Slide, pero siempre puede ver la demostracion en mi blog de pruebas.



1) Entra a Blogger > Diseño > Edición HTML
2) Usando Ctrl + F, encuentra la etiqueta </head> dentro del codigo
3) Pega el siguiente código justo antes de la etiqueta que acabas de buscar

<script src='http://bnote.googlecode.com/files/jquery-1.2.6.min.js' type='text/javascript'></script>
<script src='http://bnote.googlecode.com/files/jquery.jcarousel.pack.js' type='text/javascript'></script>
<script src='http://bnote.googlecode.com/files/jquery-ui-personalized-1.5.2.packed.js' type='text/javascript'></script>

<script type="text/javascript">
jQuery(document).ready(function() {
      jQuery('#mycarousel').jcarousel({
      wrap:"both",
      scroll:2,
      animation:"slow"
});
      function mycarousel_initCallback(carousel) {
      jQuery('#featured-next-button').bind('click', function() {
              carousel.next();
              return false;
      });

      jQuery('#featured-prev-button').bind('click', function() {
              carousel.prev();
              return false;
      });
      jQuery('.button-nav span').bind('click', function() {
              carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
              return false;
      });
};
      jQuery('#feature-carousel').jcarousel({
      wrap:"both",
      scroll:1,
      auto:10,
      initCallback: mycarousel_initCallback,
      buttonNextHTML: null,
      buttonPrevHTML: null
});

});
</script>

<style type="text/css">
.jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;}

.jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;}

.jcarousel-skin-tango .jcarousel-clip-horizontal {width:  941px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;}
.jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;}

.jcarousel-skin-tango .jcarousel-next-horizontal {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZZ3oOofRzj00u0DOzX4AbHCaMaflm9y8Rw5imkUf11Ef3ksNG5BD0xh1-IvdLsEhglusBTlsEtlwe13si-6Ygns6c6yoF5mWWuwrgA87nL0fPz6KWYFqJGAtxj_z4556wk048jYP_RNVu/s1600/image-slider-button.png) no-repeat scroll -46px 0;
cursor:pointer;
height:254px;
right:20px;
position:absolute;
top:0;
width:46px;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZZ3oOofRzj00u0DOzX4AbHCaMaflm9y8Rw5imkUf11Ef3ksNG5BD0xh1-IvdLsEhglusBTlsEtlwe13si-6Ygns6c6yoF5mWWuwrgA87nL0fPz6KWYFqJGAtxj_z4556wk048jYP_RNVu/s1600/image-slider-button.png) no-repeat scroll 0 0;
cursor:pointer;
height:254px;
left:20px;
position:absolute;
top:0;
width:46px;
}

.jcarousel-container {position: relative;}
.jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;}
.jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;}
.jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;}
.jcarousel-next {z-index: 3;display: none;}
.jcarousel-prev {z-index: 3;display: none;}

#news-slider{background-color:#FFFFFF;padding:20px 0;}
#news-slider img{border:none;height:254px;width:307px;}
</style>

4) Guarda los cambios
5) Dirígete hasta Diseño > Elementos de la pagina
6) Clic en Añadir un Gadget de tipo HTML/Javascript
7) Pega el siguiente codigo
allí

<div id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li><a href='SLIDE-1-LINK-HERE'><img src='SLIDE-1-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-2-LINK-HERE'><img src='SLIDE-2-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-3-LINK-HERE'><img src='SLIDE-3-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-4-LINK-HERE'><img src='SLIDE-4-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-5-LINK-HERE'><img src='SLIDE-5-IMAGE-ADDRESS-HERE'/></a></li>
</ul>
</div>

En Naranja: URL a la que el usuario se dirigira al hacer el clic
En Azul: URL de cada imagen

Agregar un nueva entrada al slide


Para añadir una nueva entrada al slide, tan solo debes copiarel siguiente codigo justo antes de la etiqueta </ul> del codigo anterior.

<li><a href='SLIDE-6-LINK-HERE'><img src='SLIDE-6-IMAGE-ADDRESS-HERE'/></a></li>

8) Eso es todo! Esta hecho.

Enlaces para compartir en tu blog o pagina web.




Widget por Friki Bloggeo


1 comentario :

Suscribirse a: Enviar comentarios ( Atom )