jueves, 19 de mayo de 2011

Vagabundia

Vagabundia


Entradas relacionadas con slider

Posted: 18 May 2011 08:00 PM PDT

Abusando de transiciones y otras modernidades, esta es una variante para mostrar entradas relacionadas en Blogger, creando una especie de slider y se basa en Posts relacionados con miniaturas usando Json a la que simplemente le haremos algunas modificaciones.

El script es igual al que se mostraba en la entrada entrada anterior aunque con los nombres diferentes; para no complicarse la vida puede descargarse desde acá y lo agregamos a la plantilla antes de </head>:
<script type='text/javascript'> //<![CDATA[   ... acá pegamos el contenido del archivo de texto ... //]]> </script>
Allí es necesario establecer algunos datos personales tal como en el otro:

var relmaxamostrarslider = 20; // cantidad de entradas a ser mostradas
var relmaxlen = 75; // la cantidad de caracteres de los resumenes
var relimagenpodefectoslider = "URL_imagen"; // la imagen por defecto

y otros nuevo que, en este ejemplo son estos:

var SRwidth = 144; // ancho de cada DIV
var SRmin = 0;
var SRmax = -2160; // longitud máxima

Otro cambio es el HTML que decía esto:
<div id='postsrelacionados'>   <script type='text/javascript'>mostrarrelacionados();</script> </div>
y que vamos a complicar un poco, cambiándolo así:
<div id="postsrelacionadosslider">   <a onclick='desplazarrels(1);' class='sflecha' id='relleft' href='javascript:void(0);'>     <img src='URL_FLECHA_IZQUIERDA'/>   </a>   <div id='postsrelacionadosinner'>     <div id='postsrelacionadoscontenedor' style='left:0'>       <script type='text/javascript'>mostrarrelacionadosslider();</script>     </div>   </div>   <a onclick='desplazarrels(-1);' class='sflecha' id='relright' href='javascript:void(0);'>     <img src='URL_FLECHA_DERECHA'/>   </a> </div>
¿Que es todo eso? Dentro de un DIV colocaremos una flecha que será un enlace para desplazarse hacia la izquierda, otra hacia la derecha y en el centro mostraremos una tira de entradas relacionadas.

Para que esto funcione lo fundamental es el CSS:
<style>     /* al rectángulo contenedor lo centramos, le damos altura y eliminamos los saltos de línea indeseados */   #postsrelacionadosslider {     height: 180px;     position: relative;     width: 635px;   }   #postsrelacionadosslider br { display:none; }    /* las imágenes que sirven para navegar las posiconamos una a cada extremo */   #relleft { left: 0; }   #relright { right: 0; }   .sflecha { height: 180px; position: absolute; width: 25px; }   .sflecha img { height: 180px; width: 25px; }    /* al rectángulo central lo dimensionamos, lo posicionamos e impedimos que se deborde */   #postsrelacionadosinner {     height: 180px;     left: 30px;     overflow: hidden;     position: absolute;     width: 576px; /* es el ancho real de cada post resumido por la cantidad visible, en este caso 4 */   }   /* esta será la "tira" a desplazar */   #postsrelacionadoscontenedor {     height: 180px;     position: absolute;     width: 2800px; /* es el ancho real de cada post resumido por la cantidad a mostrar, en este caso 20 */     /* el efecto */     -moz-transition: all 1s;     -webkit-transition: all 1s;     -o-transition: all 1s;     transition: all 1s;   }    /* cada post resumido */   .relspostsslider {     background-image: -moz-linear-gradient(100% 100% 90deg, #303941, #101921);     background-image: -webkit-gradient(linear, left bottom, left top, from(#303941)), to(#101921));     filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF101921', EndColorStr='#FF303941');     float: left;     height: 180px;     margin: 0 2px;     overflow: hidden;     padding: 0 5px;     text-align: center;     width: 130px;   }    /* los contenidos de esos posts resumidos */   .relspostsslider a {     color: #EEE;     display: inline;     font-size: 11px;     line-height: 1;   }   .relspostsslider img {     height: 72px;     padding: 5px;     width: 72px;   }   .relspostsslider h6 {     display: table-cell;     height: 5em;     margin: 0;     overflow: hidden;     padding: 0;     vertical-align: middle;     width: 130px;   }   .relspostsslider p {     color: #AAA;     font-size: 10px;     height: 4em;     line-height: 1;     margin: 0;     overflow: hidden;     padding: 0;   }  </style>
Si nada falló, el resultado sería algo así:

No hay comentarios:

Publicar un comentario

Correo Vaishnava

Archivo del blog