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 son moderados serán revisados antes de publicarse.

Este no es un foro de adolescentes, no uses letras en vez de palabras completas como "q" en vez de "que", ni escribas tus mensajes en mayúsculas, se respetuoso con los demás, si no estás de acuerdo no comentes.

Una cosa es que no te guste una crítica, otra que uses un lenguaje inapropiado para demostrarlo. No me siento en la obligación de publicar ningún mensaje en específico o de leerlo entero si usas palabras altisonantes.

3 comentarios:

Samurai Jack (2017), episodio 7

Samurai Jack (2017)Ashi enfrenta a su madre, Jack a su yo interior lleno de ira.

[Leer artículo...]

Noragami entra en paro indefinido

Noragami es suspendida temporalmenteUna de las autoras no puede continuar con su trabajo al frente del manga y se ha decidido meter la historia en hiatus, lo que puede significar...

[Leer artículo...]

Tales of Zestiria y su final Yuri

El final de Tales the Zestiria The XLas aventuras de Itami y sus amigos llega a su fin con el rescate de Piña de las manos de Zorzal.

[Leer artículo...]

Warau Salesman New (2017) El vendedor sonriente

Warau Salesman New (2017) EstrenosSatoru descubre al culpable de la trama, es el momento de enfrentarse y tendrá que dar todo de sí para cambiar su suerte.

[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.

Anexos

Bitacoras.com