Este script llamado sliderman.js es una solución aceptable aunque algo compleja para quienes quieren usar sliders de imágenes con algúna clase de efecto animado y no quieran agregar librerías externas de ninguna clase ya que es independiente de todas ellas. Si ya estamos usando una, es indistinto; funcionará con cualquiera porque no las utiliza.

En el sitio original podemos descargar el ZIP que contiene los demos y los archivos necesarios. Ellos muestran tres alternativas diferentes pero, el script es el mismo para todos y lo que variará será la forma en que lo utilicemos; eso, lo hacemos con parámetros personales, CSS y HTML así que las posibilidades son muchas.

Primero agregamos el script antes de </head>, ya sea subiéndolo a un servidor:
<script type='text/javascript' src="URL_sliderman.js" />
o poniendo el contenido del archivo directamente en la plantilla:
<script type='text/javascript'>
//<![CDATA[
  ... aquí ponemos el contenido del archivo sliderman.js ...
//]]>
</script>
Luego, el CSS que variará según sea el modelo; más adelante pueden ver los que he utilizado para estos ejemplos:
<style>
  ... aquí ponemos las reglas de estilo ...
</style>
El resto lo agregaremos donde querramos mostrar el slider, ya sea en un post o en un elemento HTML y tendremos la posibilidad de agregar varios sin inconvenientes en la misma página, identificando cada uno de ellos con un ID único.

Vamos al primer ejemplo donde utilizo imágenes de 500x375.

<style>
  #slider_container_1 { /* el rectángulo contenedor */
    background: #345;
    height: 375px;
    margin:0 auto;
    padding: 10px;
    width: 500px;
    -moz-border-radius: 10px 10px;
    -webkit-border-radius: 10px 10px;
    border-radius: 10px 10px;
  }
  #SliderName { /* el rectángulo con las imágenes */
    height: 375px;
    margin: auto;
    width: 500px;
  }
  .SliderNamePrev, .SliderNameNext { /* las flecha para ir hacia atrás (son imágenes de 24x24 */
    background: url() no-repeat center center;
    display: block;
    height: 24px;
    position: absolute;
    text-decoration: none;
    top: 155px;
    width: 24px;
  }
  .SliderNamePrev { /* la flecha para ir hacia atrás */
    background-image: url(URL_left.gif);
    left: 10px;
  }
  .SliderNameNext { /* la flecha para ir hacia adelante*/
    background-image: url(URL_right.gif);
    right: 10px;
  }
  .SliderNameDescription { /* el rectángulo con los textos */
    font-family: Verdana;
    font-size: 10px;
    padding: 5px;
    text-align: left;
  }
  #SliderNameNavigation {/* la barra de navegación inferior */
    background-color: #FFF;
    height: 28px;
    margin: 10px 0 0 0;
    text-align: center;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
  }
  /* los enlaces de la barra de navegación son imágenes */
  #SliderNameNavigation a:link, #SliderNameNavigation a:active, #SliderNameNavigation a:visited, #SliderNameNavigation a:hover{
    background: url(URL_nav.gif) no-repeat center center;
    font-size: 0px;
    line-height: 0px;
    margin: 0 2px;
    padding: 10px;
    text-decoration: none;
  }
  #SliderNameNavigation a.active:link, #SliderNameNavigation a.active:active, #SliderNameNavigation a.active:visited, #SliderNameNavigation a.active:hover{
    background: url(URL_nav_active.gif) no-repeat center center;
  }
</style>

<div id="slider_container_1">

  <!-- el DIV con las imágenes y las descripciones -->
  <div id="SliderName">
    <!-- la primera imagen que puede ser un enlace -->
    <a href="URL_a_alguna_parte"><img src="URL_imagen_1"/></a>
    <div class="SliderNameDescription">
      ... aquí ponemos el texto para la imagen 1 ...
    </div>
    <!-- la segunda imagen que puede no ser un enlace-->
    <img src="URL_imagen_2" />
    <div class="SliderNameDescription">
      ... aquí ponemos el texto para la imagen 2 ...
    </div>
    ... y seguimos agregando imágenes siempre con la misma estructura ...
  </div>

  <!-- el DIV con la barra de navegación inferior -->
  <div id="SliderNameNavigation"></div>

  <!-- y ahora, llamamos a al función -->
  <script type="text/javascript">
    // creamos el efecto dándole un nombre cualquiera (por ejemplo demo01)
    Sliderman.effect({name: 'demo01', cols: 10, rows: 5, delay: 10, fade: true, order: 'straight_stairs'});
    var demoSlider = Sliderman.slider({container: 'SliderName', width: 500, height: 375, effects: 'demo01',
      display: {
        pause: true, // el slider se detendrá al colocar el punterodel ratón encima de una imagen
        autoplay: 3000, // el tiempo entre imágenes (en milisegundos)
        always_show_loading: 200, // forzamos a que se muestre una imagen de loading
        description: {background: '#FFFFFF', opacity: 0.5, height: 50, position: 'bottom'}, // tamaño, ubicación y colores de los textos
        loading: {background: '#000000', opacity: 0.2, image: 'URL_loading.gif'}, // la imagen de loading
        buttons: {opacity: 1, prev: {className: 'SliderNamePrev', label: ''}, next: {className: 'SliderNameNext', label: ''}}, // los botones atrás y adelante
        navigation: {container: 'SliderNameNavigation', label: '&nbsp;'} // la barra de navegación
        }
      });
  </script>
</div>

¿Qué significa cada cosa? Hay que andar adivinando un poco aunque en la parte de documentación se explica más o menos de manera detallada.

El segundo ejemplo es similar pero un poco más simple ya que no se agregan textos ni navegación sin embargo, las imágenes se van cambiando utilizando efectos diversos.

<style>
  #slider_container_2 { /* el rectángulo contenedor */
    border: 1px #333 solid;
    height: 375px;
    margin:0 auto;
    width: 500px;
  }
  #SliderName_2 { /* el rectángulo con las imágenes */
    height: 375px;
    margin: auto;
    overflow: hidden;
    width: 500px;
  }
  .SliderNamePrev_2, .SliderNameNext_2 { /* las flecha para ir hacia atrás (son imágenes de 35x50 */
    display: block;
    height: 375px;
    position: absolute;
    text-decoration: none;
    top: 0;
    width: 50px;
  }
  .SliderNamePrev_2 { /* la flecha para ir hacia atrás */
    background: url(URL_left.png) no-repeat left center;
    left: 0;
  }
  .SliderNameNext_2 { /* la flecha para ir hacia adelante*/
    background: url(URL_right.png) no-repeat right center;
    right: 0;
  }
</style>

<div id="slider_container_2">

  <!-- el DIV con las imágenes -->
  <div id="SliderName_2" class="SliderName_2">
    <img src="URL_imagen_1" width="500" height="375"/>
    <img src="URL_imagen_2" width="500" height="375"/>
    ... y seguimos agregando imágenes siempre con la misma estructura ...
  </div>

  <!-- y ahora, llamamos a al función -->
  <script type="text/javascript">
    // creamos varios efectos
    demo2Effect1 = {name: 'myEffect21', top: true, move: true, duration: 400};
    demo2Effect2 = {name: 'myEffect22', right: true, move: true, duration: 400};
    demo2Effect3 = {name: 'myEffect23', bottom: true, move: true, duration: 400};
    demo2Effect4 = {name: 'myEffect24', left: true, move: true, duration: 400};
    demo2Effect5 = {name: 'myEffect25', rows: 3, cols: 9, delay: 50, duration: 100, order: 'random', fade: true};
    demo2Effect6 = {name: 'myEffect26', rows: 2, cols: 4, delay: 100, duration: 400, order: 'random', fade: true, chess: true};
    // los incializamos
    effectsDemo2 = [demo2Effect1,demo2Effect2,demo2Effect3,demo2Effect4,demo2Effect5,demo2Effect6,'blinds'];
    // los ejecutamos
    var demoSlider_2 = Sliderman.slider({container: 'SliderName_2', width: 500, height: 375, effects: effectsDemo2, display: {autoplay: 3000}});
  </script>
</div>

26 comentarios:

Unknown  

Queda bellísimo!

Responder
Anónimo  

Veo que te han gustado los sackboys de LittleBigPlanet :)

Responder
La hormiguita  

Que bonito.... !!:)

Responder
Albus Dumbledore  

Hola JMiur, yo por aquí de nuevo como cosa rara...

He implementado en algunas entradas de mi blog SPRITES usando el código que maravillosamente explicas en esta entrada y todo salido bien.

Ahora quiero colocar un SPRITES en uno de los enlaces de navegación del blog (Home) pero cuando coloco el código en la plantilla no me funciona.

Para que entiendas un poco mejor lo que digo revisa esto por favor.

Responder
JMiur  

Albus Dumbledore:

¿Para qué te complcias usando eventos onmouseout y onmouseover si es mucho más sencillo aplicar el CSS a la clase:

Si este es el enlace:

<a class='home-link' expr:href='data:blog.homepageUrl'></<>

estas son las dos reglas de estilo:
.home-link-BIS {
background: url("http://1.bp.blogspot.com/_vBY646YviQw/TTQMV0KewcI/AAAAAAAACWw/-XnRvspwtno/s1600/NOTICIAS.png") no-repeat scroll 0 0 transparent;
display: block;
height: 230px;
margin: 0 auto;
width: 281px;
}
.home-link-BIS:hover {
background-position: 0 -231px;
}

Responder
Sergio Gil  

Hola JMiur.

he aplicado el sliderman en mi blog de pruebas www.latobon.blogspot.com , pero no funciona en IE8, se queda cargando las imagenes, no aparecen los botones de navegación y los bordes se ven en angulos en ves de redondos.

De otra parte, el margen del post-footer se sobrepasa y cubre los links de los marcadores sociales.

Te ruego el favor de revisar el tema a ver si le podemos aplicar los correctivos del caso.

Gracias y saludos,

Sergio

Responder
Alonso  

Hola JMiur, lamento irrumpir otra vez en un post para preguntar algo que no tiene nada que ver con él, pero eres el único que me puede decir/orientar si es posible o no hacer lo siguinte:

Supongamos que tengo 2 blogs: Blog1 y Blog2. Ahora, en ambos blogs publico (por ejemplo) la misma foto, así: Blog1-foto1 y Blog2-foto1 ¿Es posible que los comentarios que dejen en Blog1-foto1 se puedan ver tambien en Blog2-foto1? En este caso ambos tendrían el mismo contendio (mismo post/misma información) y lo que se comente en uno tendría toda reación con el otro (es el mismo post pero en blogs diferentes) ¿no sé si me explique bien? y bueno, lo sé, lo sé... es una locura pero ¿es posible? Quizas con un script o con un sistema de comentarios diferente al de blogger que permita una opción asi... no sé... quisiera tu consejo si es posible.

De antemano gracias, prometo no volver a irrumpir en un buen tiempo, sé que somos muchos los que te pedimos ayuda y no hay que abusar. Saludos.

Responder
JMiur  

La Tobonera:

Fíjate si mofificando el script se resuelve; por l omenos en estos ejemplos, he visto que si lo hace. Es fácil si se logra mostrar el código en el comentario, claro. Busca esta parte:

function setStyle(style, property, value){
if(typeof(value) == 'string') style[property] = value;
else if(property == 'clip') style[property] = 'rect('+Math.round(value[0])+'px, '+Math.round(value[1])+'px, '+Math.round(value[2])+'px, '+Math.round(value[3])+'px)';
else if(property == 'opacity') setOpacity(style, value);
else style[property] = Math.round(value)+'px';
}

y cámbiala así:

function setStyle(style, property, value){
if(typeof(value) == 'string') {
style[property] = value;
} else if(property == 'clip') {
style[property] = 'rect('+Math.round(value[0])+'px, '+Math.round(value[1])+'px, '+Math.round(value[2])+'px, '+Math.round(value[3])+'px)';
} else if(property == 'opacity') {
setOpacity(style, value);
} else {
if(value) {style[property] = Math.round(value)+'px';}
}
}

Responder
JMiur  

Alonso:

No, sé si eso pueda hacerse; tal vez, leyendo los feeds de los comentarios:
http://nombreblog.blogspot.com/feeds/ID_DEL_POST/comments/default

Pero, no le veo el sentido y además, ambos blogs podrían ser penalizados por Google ya que tienen contenido duplicado; son dos URLs con el mismo contenido.

¿Para qué quieres hacer eso?

Responder
Albus Dumbledore  

@JMiur Muchas gracias JMiur, todo salió bien.

Responder
Sergio Gil  

Hola JMiur

No entendi tu comentario y ese script no lo encuentro. Lo curioso es que cuando abro la pagina de http://www.devtrix.net/sliderman/examples.html con IE8 se pueden ver el image slider sin errores y he copiado y pegado los codigos que ellos publican en el demo uno en mi blog www.latobon.blogspot.com y al abrilo con IE8 no funciona. Igual cuando abro tu blog vagabundia con IE8 tampoco funciona.

Vos que pensas cual puede ser el problema ?

Slds,

Sergio

Responder
JMiur  

Pués, la función es parte del script sliderman.1.2.1.js y comienza en la línea 110 del original.

Este ejemplo lo veo perfectamente en IE8 e incluso en IE7.

Responder
Alonso  

Jeje... bueno yo con gusto te explico JMiur pero la verdad es un super rollo. Te enviaré una explicación a vagabundia@gmail.com para no aturdir a los visitantes ni a ti. Si tienes un tiempo para checarlo te lo agradecería mucho y si no pues no hay problema. Probablemente lo que quiero hacer tenga una solución más sencilla que andar duplicando entradas jeje pero fue lo primero que se me ocurrió.

Gracias una vez más :)

Responder
JMiur  

No hay problema. Sólo fue curiosidad :D

Responder
Alonso  

Te envié la explicación de lo que quiero hacer por mail JMIur, espero lo hayas recibido bien y puedas echarle un ojo cuando tengas un tiempillo. ;)

Responder
D2U2  

Por mas que coloco en la ubicacion de la description position: 'bottom' se sigue mostrando en la parte superior del slider :O alguna forma de solucionar esto? saludos

Responder
JMiur  

Tendría que ver tu ejemplo.

Responder
Katz Dixon  

gracias, lo acabo de poner, y me anda de maravilla

Responder
Katz Dixon  

@SDK
Hola, hace poco puse el script y todo bien, pero lo instale con la url que ofrecen en el sitio, y por lo que veo ya se cayó xD, podrías subir el archivo para que lo aloje en otro lado?

Responder
JMiur  

SDK.
Lo puedes descargar de acá.

Responder
Arternativo  

Hola!!
intente poner este slider en mi pagina pero me descuadraba el resto del contenido es decir lo desplasaba hacia abajo pero de verdad muy abajo.

El slider que tengo actualmente en mi blog ( www.arternativo.com )me gusta muchisimo (preferiria conservarlo en ves de utilizar este) pero desgraciadamente no me funciona en Internet explorer, entonces quisiera preguntarte si hay alguna forma de hacer que no aparesca el slider si el blog lo abren en Internet explorer.
ojala puedas ayudarme

Responder
JMiur  

Para ver por que te ocurría eso debería ver un ejemplo, seguramente, algún error en las reglas de estilo.

Antes de ver l ode IE, deberías verificar los errores de JavaScript que se muetran en tu blog porque es posible que sean esos errores los que hagan que el slider no funcione. Hay dos:

$(".animar") is null en $('.animar').hover(function() {

JSON.extend is not a function en stringify: function(obj) {

Responder
Arternativo  

esos errores ya no aparecen sin embargo hay otro que dice:
this.eles nulo o no es un objeto
la verdad es que no se como solucionarlo
de cualquier forma si pudieras decirme si se puede descartar contenidos de pendiendo del navegador te lo agradeceria

Responder
JMiur  

Suponiendo que la función que ejecuta eso es esta:

function startGallery() {
.........
}

Debería comenzar más o menos así:

function startGallery() {
var navegador = navigator.appName;
if (navegador == "Microsoft Internet Explorer") { return;}
....... y luego el resto
}

Responder
ironumora77  

hola... uso firefox y crhome y a veces funciona y a veces no...no se que pasa

JMiur  

Imposible responder eso; en términos generales, las cosas funcionan o no funcionan y no hay términos medios. Probablemente, el script no se carga o hay algún problema en la conexión.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR