viernes, 10 de junio de 2011

Carrusel de diapositivas con JQuery: Slider para Blogger

Este es el otro Slider con JQuery que uso, especialmente para mi sitio principal, en la parte inferior de la página.

Le he hecho ligeros cambios y quitado gran parte del código de más que poseía, como sea da mucha lata a la hora de escalar y si ustedes los hacen deben aumentar o restar a todos los width (incluyendo en el código javascript) salvo los marcados como no modificables en valores de 20px.

Pueden ver el demo aquí. Se basa en el Slider de Jacob Gube, pueden descargar las imágenes necesarias para su funcionamiento: [Descargar archivos]

Instalación:
Vamos a Diseño ► Edición HTML, buscamos la etiqueta </head> y justo antes pegamos:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 480;
  var slides = $('.slide');
  var numberOfSlides = slides.length;
  $('#slidesContainer').css('overflow', 'hidden');
  slides
    .wrapAll('<div id="slideInner"></div>')
    .css({
      'float' : 'left',
      'width' : slideWidth
    });
  $('#slideInner').css('width', slideWidth * numberOfSlides);
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clic para la izquierda</span>')
    .append('<span class="control" id="rightControl">Clic para la derecha</span>');
  manageControls(currentPosition);
  $('.control')
    .bind('click', function(){
  currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    manageControls(currentPosition);
     $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });
  function manageControls(position){
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  } });
//]]>
</script>
var slideWidth viene establecido en pixeles con un valor por defecto para este tutorial de 480, si modifica este valor hágalo en valores de 20 (40, 60, 80, etcétera) y todos los valor Width de la parte de CSS salvo los indicados expresamente.

Ahora vamos a ]]></b:skin> y justo antes pegamos:
/* Slideshow con JQuery */
 #slidesContainer
{
background:#000;color:#fff;
}
#slideshow {
margin:0 auto; /* Este valor solamente centra el contenedor */
width:540px !important; /* reducir en valores de 20 px */
height:224px;
background:transparent;
position:relative;
        overflow:hidden; /* overflow evita se desborde sin Javascript */
}
#slideshow #slidesContainer {
  margin:0 auto;
  width:460px !important; /* reducir en valores de 20 px */
  height:224px;
  overflow:auto; /* allow scrollbar */
  position:relative;
}
#slideshow #slidesContainer .slide {
width:480px !important; /* reducir en valores de 20 px */
height:224px; /* Alto de caja */
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.control {
  display:block;
  width:39px; /* no modificar valor */  height:224px; /* Alto de control */
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
  top:0;
  left:0;
  background:transparent url(https://lh4.googleusercontent.com/-3XB0HuZBsnQ/TemjDhwITXI/AAAAAAAAU_U/RsLx1jxRFHU/control_left.png) no-repeat 0 0;
}
#rightControl {
  top:0;
  right:0;
  background:transparent url(https://lh6.googleusercontent.com/-spG-lN2Up-U/TemjDk3Wc-I/AAAAAAAAU_Q/mt3hz5lkNlc/s288/control_RIGHT.png) no-repeat 0 0;
}
.slide h2, .slide p {
  margin:15px;
  font:italic 12px Georgia, "Times New Roman", Times, serif; /* Tipografía texto normal en un párrafo*/
}
.slide h2 {
  font:italic 20px Georgia, "Times New Roman", Times, serif; /* Tipografía cabecera H" */
  color:#ccc;
  letter-spacing:-1px;
}
.slide img {
  float:right;
  margin:0 15px;
}
/* Fin JQuery Slider */
Solamente modificaremos los valores en azul, siempre de 20px en 20px. Guardamos la plantilla.

Instalando el código visible
Ahora vamos a Diseño ► Elementos de la plantilla

Y donde queramos ponerlo pulsamos en Agregar un Gadget (Para este ejemplo debe ser un espacio de 550px de ancho):
Buscamos el artilugio HTML/Javascript y pulsamos en el "+":

Y agregamos el siguiente código:
<!-- Slideshow HTML -->
  <div id="slideshow">
    <div id="slidesContainer">
<!-- modulos puedes poner los que quieras, pero te recomiendo menos de 6 -->
<! modulo 1 -->
 <div class="slide">
   <h2>Titulo 1</h2>
      <p>
<img src="imagen.png" alt="" width="215" height="145" border="0" />
Texto de contenido del contenido 1
        <br/><br/>
        <a href="#">[Leer artículo...]</a>
    </p>
</div>
<!--modulo 2-->
 <div class="slide">
   <h2>Titulo 2</h2>
      <p>
<img src="imagen.png" alt="" width="215" height="145" border="0" />
Texto de contenido del contenido 2
        <br/><br/>
        <a href="#">[Leer artículo...]</a>
    </p>
</div>
<!-- copia y pega más modulos antes de los dos últimos div -->
<!-- Fin modulos puedes poner los que quieras, pero te recomiendo menos de 6 -->
    </div>
  </div>
  <!-- Slideshow HTML -->
Ponemos nuestro contenido e imágenes y guardamos.

Conclusiones
Las imágenes son de 215 de ancho por 145 de alto, pero puedes quitarlas y solo tener texto o poner tu propio contenido, los modulos son todo desde <div class="slide"> a su div final </div> puedes copiarlos y pegarlos uno tras de otro segun se ve con los dos módulos de arriba.

Ejemplo de un módulo, por si no lo tienes claro:
<div class="slide">
   <h2>Titulo 2</h2>
      <p>
<img src="imagen.png" alt="" width="215" height="145" border="0" />
Texto de contenido del contenido 2
        <br/><br/>
        <a href="#">[Leer artículo...]</a>
    </p>
</div>
Con el demo veremos que este Slider tipo diapositiva debe pulsarse primero para dar el cambio de ficha, tiene sus ventajas y desventajas, pero es muy fácil de implementar, con un gran diseño y me encanta.

Comentarios y Consultas

Los mensajes serán revisados a veces. No te olvides que soy una persona, no se trata de faltar al respeto, todos tenemos opiniones, no hay que enojarse.

Puedes marcar Notificarme para recibir la notificación de la respuesta.

3 comentarios:

El ascenso de Skywalker(2019)

Joker 2019Una película que ha roto a divido a los fans muchos culparán a sus director por querer reparar Los últimos Jedi, no es su culpa al final.

[Leer artículo...]

La Espada del Inmortal (2019

Blade of The Immortal (2019)La historia de Manji, un guerrero samurái sin señor que ha sido condenado con la inmortalidad...

[Leer artículo...]

Kemono Michi: Rise Up (2019)

Kemono Michi: Rise Up (2019)Del autor de Konosuba, Genzo Shibata es un luchador japonés que es transportado a un mundo de fantasía, quien está obsesionado con los seres peludos.

[Leer artículo...]

ELI (2019)de Netflix

ELI (2019)de Netflix Reseña y criticaPelícula lanzada directo a video que nos cuenta una historia que parecería sacada de la Dimensión desconocida.

[Leer artículo...]

  © Cgnauta | CGsign blog | [Ver Licencia de uso] | Matius Lenin, Creative Commons, algunos derechos reservados

Regresar ARRIBA  

Vistas desde Mayo 2009

▼/▲ Archivo del Blog

Visitas totales

Información

IBSN: Internet Blog Serial Number 01-77-94-2008

Esta plantilla es creada y diseñada por Matius Lenin para CGnauta blog. Con Scripts de JQuery bajo licencia GNU/GPL. CGnauta es una marca registrada propiedad de Matius Lenin.