Slider sencillo, automático, manual y RWD | Oloblogger Seguimos avanzando y añadiéndole funcionalidades a ese simple y corto JavaSript bajo jQuery que vimo...

19 de marzo de 2014

Slider sencillo, automático, manual y RWD

Seguimos avanzando y añadiéndole funcionalidades a ese simple y corto JavaSript bajo jQuery que vimos hace un tiempo para construir un slider automático muy sencillo.

Primero vimos cómo incluir manualmente imágenes fijas con o sin enlace y posteriormente, la manera de leer un feed para cargar desde él automáticamente las imágenes y enlaces de las entradas recientes.

Más adelante la cosa consistió en hacer lo mismo pero de manera que los posts no fueran los últimos, sino unos cuantos cargados de manera aleatoria. Por cierto que esto último parece que en determinados casos concretos no funciona. Depende del feed que se use pero todavía no sé cual es el factor que provoca el fallo.


Pero bueno, hoy lo que toca es ver cómo ajustar el CSS para que el slider sea adaptable (RWD) y por otra parte, cómo tendría que ser el JavaScript para que sobre las imágenes aparezcan unas flechitas que nos permitan avanzar o retroceder adicionalmente de forma manual.

Y ya que estaba modificando el JS, he aprovechado para depurarlo un poco y que pudiéramos eliminar del HTML las cajas (div) innecesarias.



Debido a que ya son muchas las modificaciones hechas sobre el original, en esta ocasión partiremos otra vez de cero y lo que viene a continuación incluye todo el código necesario. Sólo tendréis que copiar y pegar en un gadget (tipo HTML/JavaScript) y luego ya ajustáis el CSS con los colores que creáis conveniente.

El que podéis desplegar en el siguiente botón es el código en cuestión y también lo podéis encontrar en este Codepen, desde dónde podréis hacer pruebas antes de pasarlo a vuestro sitio:



Sólo tenéis que cambiar URL_ENLACEx, URL_IMAGENx y TEXTOx enla parte HTML por vuestros propios datos y listo. Si se quieren poner diapositivas adiciones sólo hay que añadir nuevos enlaces con la misma estructura: a + img + p


Y para los curiosos, en la parte del script podréis comprobar que lo único que hicimos con respecto al anterior código fue separar la parte que ejecuta la función repetidamente según el intervalo de tiempo definido (6000 milisegundos) y la parte que va cambiando de orden los enlaces en el HTML. Esta última la ponemos ahora como función (changeDiv) para poder reutilizarla después.

Además se han añadido dos eventos onclick para cuando se pulsan los enlaces con las clases mas y menos, de manera que con ellos se cambian de orden también los enlaces y se resetea el tiempo del intervalo para que no se solape la función automática con la manual. Por último, el clic en el menos realiza un reordenamiento inverso para poder ir a la diapositiva anterior en lugar de a la siguiente usando prependTo.


Recuerdar en este punto que para que funcione necesitáis jQuery en vuestra plantilla. Con esa librería todo lo anterior generaría un cacharrito como este. Probad las flechas para comprobar cómo se puede retroceder y avanzar manualmente y redimensionar la ventana para ver cómo el slider se adapta al ancho disponible.




¿Y de dónde salió hacer esto? Pues de Masato, un lector que mediante comentarios nos empujó a terminar un código que él empezó para conseguir esto mismo. Gracias ;)

Actualización

Una idea que nos plantean en los comentarios y que puede ser resultona. Se trata de que las flechas sólo aparezcan cuando se pasa el puntero por encima del slider. Lo podéis ver funcionando en el Codepen que hice.

Para ello hay que modificar sólo parte del CSS.

En primer lugar añadimos un overflow:hidden; al selector #slide-wrapper y luego los de los enlaces tendrían que quedar así:

/* Flechas de navegación */
a.mas, a.menos {
position: absolute;
top: 50%;
left: 0px;
z-index: 10;
width: 20px;
height: 30px;
text-align: center;
line-height: 30px;
font-size: 30px;
color: white;
background: #333;
text-decoration: none;
transition: .5s margin ease;
}
a.mas {
left: 100%;
margin-left: 100px;
}
#slider-wrapper:hover a.mas {
margin-left: -40px;
}
a.menos {
left: 0;
margin-left: -100px;
}
#slider-wrapper:hover a.menos {
margin-left: 10px;
}

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

109 comentarios :

  1. Ya me gustaría añadir un slider de este tipo en mi blog. Afortunadamente mi página carga rápido porque es bastante simple ¿recargaría mucho el acceso?

    Saludos¡

    ResponderEliminar
    Respuestas
    1. ¿Este en concreto? El código casi nada.
      Sólo demorarían un poco la carga las imágenes a mostrar, pero si no las haces demasiado grandes, tampoco.

      Eliminar
  2. muchas gracias me gusta mucho.

    ResponderEliminar
  3. perdon como lo puedo poner va todo en diseño gadget,html, o hay que poner en plantilla css algo que ami hay que explicarlo paso a paso ajaja

    ResponderEliminar
  4. perdon culpa mia que no tenia instalado la galeria jQuery , ya que las pruebas las hago una plantilla justo era nueva. mis mas sinceras disculpas.

    ResponderEliminar
    Respuestas
    1. Entiendo que te funcionó entonces ;)

      Eliminar
  5. Gracias, siempre se aprende.
    Por cierto..¿sabes algo de los problemas que esta dando blogger con los seguimientos de los blog? Yo no puedo seguir muchos blogs ni me pueden seguir a mi

    ResponderEliminar
  6. Hola, he llegado a controlar la anchura a 640px pero no encuentro para redimensionar la altura a 460px , podrías decirme como. Gracias un saludo.

    ResponderEliminar
    Respuestas
    1. Al tratarse de una caja adaptable a los distintos anchos de pantalla, este slider no tiene un ancho o alto fijo, sino una proporción que fijo aquí:
      padding-bottom: 50%; /* Aspect ratio */

      En el ejemplo el ancho es dos veces el alto. Si cambias ese porcentaje del 50% por otro verás como cambia la proporción.

      Con ese sistema no necesitas fijar ninguna dimensión, sino simplemente elegir el formato y luego fijar el porcentaje.

      Eliminar
  7. Hola Oloman, como puedo hacer que funcione con un feed de posts, por ejemplo de http://feeds.feedburner.com/wii4everybody/dWFU quiero que siempre salga la imagen de los posts mas actuales sin necesidad de que tenga que poner el link de cada imagen y cada post siempre para actualizarlos...
    Saludos gente!

    ResponderEliminar
    Respuestas
    1. Mira el segundo enlace de esta misma entrada Oziel

      Eliminar
  8. Hola Oloman, tengo un slider en mi blog Villalis y he tratado de darle los estilos basándome un poco en este, una vez terminado lo pruebo con cuatro navegadores y todo correcto salvo en Safari que la flecha de la derecha no aparece y parece ser que Safari no tiene en cuenta la posición: " left: calc(100% - 30px)" y sitúa las dos en el mismo sitio, cosa que también ocurre en el slider de éste post. y como habra mas con el problema pregunto ¿hay alguna solucción?
    Un saludo y gracias por los consejos.
    Aceliano.

    ResponderEliminar
    Respuestas
    1. No sabía que en Safari no funcionaba el calc, pero lo he comprobado y así es. Prueba con esto otro:
      a.mas {
      left: 100%;
      margin-left: -40px;
      }

      Eliminar
    2. En primer lugar gracias por le respuesta.
      Con esto ya se posiciona la flecha en su sitio en los cuatro navegadores.
      Saludos.

      Eliminar
  9. Justo quería hacer un slide típico de wordpress, pero en blogger (ya que hace poco vi una bitácora de blogger con un slide). Pero antes de ahogarme en Google me he pasado por aquí por si acaso... y justo lo tienes a la vista. ¡Wow! Me ha ido muy bien, aunque me ha costado un poco. Felicidades y gracias. Aquí mi pequeño gran slide ;-) http://horizontefbt.blogspot.com.es/

    Saludos

    ResponderEliminar
  10. Hola Oloman!, ¿cómo se podrían ocultar las flechas del slider y que solo apareciesen cuando pulsamos el cursor por encima del slider? ¿Existe la posibilidad de que al pinchar sobre una imagen nos envíe a la dirección que nosotros le pongamos? Muchas gracias por el blog, es excelente.

    ResponderEliminar
    Respuestas
    1. Deseo concedido. Mira la actualización

      Eliminar
    2. Mil gracias Oloman!!! Lo he modificado un poquito y ahora es justo lo que buscaba. Lo utilizaré en breve para la publicidad de un blog de atletismo: http://atletismogerena.blogspot.com.es/ Grande la labor que haces con tu blog. Saludos.

      Eliminar
  11. Otro aficionado agradecido! Aunque está en pruebas, lo estoy probando en http://www.rutasmtbmurcia.com/integral/2014/index.html pero me queda una pequeña duda y es que en esta ultima versión se ha perdido el orden aleatorio de las imagenes, he intentado situar en el script la línea de código que se incluía en el anterior ejemplo, pero no se si esto sería posible... un saludo!

    ResponderEliminar
    Respuestas
    1. En un principio sí debería funcionar, pero algunos me indicaron que sus feeds no lo soportaban. Con probar sales de dudas ;)

      Eliminar
  12. Impresionante. Sobre todo el nivel de detalle y concreción de las explicaciones. Eso se agradece. Un atrevimiento: ¿Cómo se haría para conseguir parar el slider al poner el mouse sobre él, y que siga al retirarlo? No se nada de Jquery y me imagino que debe de haber una función de stop o algo parecido que se pueda agregar para conseguir esa funcionalidad

    ResponderEliminar
    Respuestas
    1. Yo tampoco sé demasiado de jQuery, pero supongo que sería con algo como esto.

      Eliminar
    2. Gracias. Con eso entiendo que tenemos el método para controlar cuando está entrando el mouse en nuestro slider. Ahora será necesaria alguna función que haga un stop sobre el slider, no?
      Imagino que los tiros deben de ir por ahí. Cómo lo ves tú?

      Eliminar
    3. Muy fino Miguel Angel :)
      Realmente no voy a desarrollar esa utilidad por el momento porque ando muy mal de tiempo y ya ves que ando contestando comentarios con 5 días de atraso,

      Pero así es. Si podemos detectar el hover ya sólo se trata de añadir ese comando en una función que pare el setInterval se detenga. Fíjate en cómo lo hice cuando se pinchaba (click) en el selector .mas y de forma similar haz el clear y cambia el 6000 por un número muy grande que para los efectos será como si se detuviera el slider.

      Creo que después tendrás que conseguir que cuando se deje de hacer el hover se reponga todo.

      Como ves te va a tocar currártelo ;)

      Eliminar
  13. Gracias por la respuesta y la atención. Me voy a poner a trabajar con esas directrices a ver si consigo algo. Si consigo hacer que funcione publicaré aquí la solución para que opines sobre ella.
    Un saludo

    ResponderEliminar
  14. Hola !!
    Chulisimo, es solo para la plantilla? O cual es el truco para utilizarlo tambien en las entradas como lo has hecho tu aqui?
    El mismo codigo o tengo que cambiar algo ?

    Un saludo
    AL

    ResponderEliminar
    Respuestas
    1. El mismo código Ana. En gadget o en entradas, el código casi siempre es el mismo. Sólo tienes que tener cuidado con los saltos de línea cuando se trate de entradas. En caso de problemas elimina todos los saltos y listo.

      Eliminar
  15. Hola, hiciste una excelente explicación pero tuve un problema :s, cuando pongo el slider en mi blog de prueba todo bien excepto las flechitas, solo sale un cuadro negro, que puedo hacer?

    Aqui mi blog
    http://tst-02.blogspot.com/

    Gracias

    ResponderEliminar
    Respuestas
    1. Fíjate en las primeras líneas del primer trozo de código de la entrada. Dentro de los enlaces van los símbolos de las flechitas expresados como entidades HTML: › y ‹

      Creo que olvidaste eso.

      Eliminar
    2. Pongo tal y como esta, le doy guardar e igual no salen las flechas....si apreto F5 al editor HTML el código que puse desaparece :s

      Tu slider es el que mejor que se adecua a mi blog, otros me lo deforman feo xD
      Creo q tendré que dejarlo con cuadraditos, serán flechitas revolucionarias t.t

      Graxiasss :3

      Eliminar
    3. Efectivamente sigues teniendo los enlaces vacíos (sin ningún símbolo) y por eso te salen los cuadraditos vacíos. No sé cuál es el problema concreto por el cual no puedes ponerlos, pero sólo se trata de eso, de añadir el símbolo dentro del enlace. Prueba con una "o" o algo así.

      Eliminar
  16. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. Yo no tengo publicado ninguno, pero mira este: http://codepen.io/Kseso/full/jtovd

      Eliminar
  17. Hola, pongo el codigo en el html javascrip, pongo las imagenes y el texto mas los enlaces y no me aparece nada...

    ResponderEliminar
    Respuestas
    1. ¿Nada? ¿Ni las imágenes? No puede ser, algo no me estás detallando.

      Eliminar
  18. Este Slider queda perfecto en mi blog, gracias Oloman!

    ResponderEliminar
  19. Gracias Oloman muy fácil y sencillo de entender tu slider, sólo que tengo un problema, como puedo ajustar las imágenes que son mas grandes que el tamaño del div "slider" para que se ajusten al tamaño del slider. -desde ya gracias.

    ResponderEliminar
    Respuestas
    1. Hola Jose Luis. El código CSS lo monté para que sirviera para cualquier tamaño de imágenes, incluso de tamaños distintos dentro del mismo slider, pero eso sólo puede ser a costa de "recortar" las que tengan un tamaño mayor. De otra manera, la alternativa sería deformar la imagen y eso considero que es mucho peor.

      De todas formas en tu slider lo veo todo bien. Para tu caso quizás quitaría el border-radius. Sólo eso.

      Eliminar
  20. Hola, se podría hacer un slider de este tipo para mi blog? dejo el enlace del slider al que me refiero.
    http://www.buff.eu/es_es/outlet.html?p=12
    gracias.

    ResponderEliminar
  21. qué es lo que debería copiar? ando un poco verde en esto jeje

    ResponderEliminar
  22. Hola Oloman!
    ¿Habría que modificar algo para poner más de un slide en una entrada? Lo quiero usar a modo de portfolio ya que el que tengo ahora carga muy lento.
    Saludos!!

    ResponderEliminar
    Respuestas
    1. Habría que modificar mucho Vanesa. De hecho pensando que era fácil lo he intentado un rato, pero mis conocimientos de JavaScript no llegan para hacerlo de manera ágil. La forma más rápida es poco eficiente, pero puedes probar si tienes mucha necesidad. Se trataría de duplicar todo el código, pero usando #sidebar-wrapper y #sidebar-wrapper2 y lo mismo con #slider y #slider2. Habría que duplicar todo, el HTML y el JavaScript, incluyendo en el CSS también esas "segundas" id (#).

      Eliminar
    2. Me pareció y por eso pregunté antes de probar :P
      Gracias de todas maneras por intentar. Saludos!

      Eliminar
  23. http://www.desarrolladoresweb.es/2014/10/slider-jquery-para-blogger-y-wordpress.html


    Me he tomado la libertad de crear una versión muy mejorada, tomando algunos pasos, en mi versión además de haber añadido un paginador, botones que van hacia delante o hacía atrás, selección de rss o atom, número de entradas a leer, y otras opciones

    El Slider que comento esta instalado en la web principal (solo es visible desde el index principal)
    http://www.desarrolladoresweb.es

    ResponderEliminar
    Respuestas
    1. Ok. Sergio ahí queda tu medio spam ;) para alguno al que le pueda interesar, aunque mi idea con este código era que fuera lo más sencillo posible. Gracias.

      Eliminar
  24. hola amigo, me gusto mucho tu slider pero me gustaría saber si sabes como añadirle botones o paginaciones enumeradas o simplemente botoncitos correspondientes a cada imagen

    ResponderEliminar
    Respuestas
    1. Pues no. De momento sólo atiné a ponerle esas flechas para desplazar las "diapositivas" manualmente.

      Eliminar
    2. es una lastima, pero bueno igualmente gracias amigo, es un magnifico aporte espero que sigas asi

      Eliminar
  25. Hola Oloman. Me he puesto tu slider en mi blog pero no sé cómo reducir la altura. El ancho es perfecto pero quiero que no sea tan alto. ¿Podrías indicármelo? No encuentro nada en el HTML.

    ResponderEliminar
    Respuestas
    1. Esta es la parte que controla el alto Judith:
      padding-bottom: 50%; /* Aspect ratio */

      Ese padding-bottom lo que hace es marcar la proporción entre el ancho y el alto. 50% es para que sea la mitad de alto que de ancho, así que sabiendo eso ya puedes regular la altura.

      Eliminar
  26. HOLA OLOMAN QUISIERA SABER SI EXISTE ALGUNA MANERA DE PUBLICAR UN SLIDER EN UNA ENTRADA POR HTML POR QUE ESTE CUANDO LO AGREGO NO FUNCIONA GRACIAS

    ResponderEliminar
    Respuestas
    1. Este que estás viendo en el post funcionando está precisamente en una entrada. Lo que seguramente te pasa es que no pusiste la librería jQuery. Consulta el post anterior a este que enlazo al principio.

      Eliminar
  27. Funciona perfectamente, le di algún retoque personal y quedo perfecto. Gracias.
    Un saludo

    ResponderEliminar
    Respuestas
    1. Es que si no le dierais vuestro toque personal me sentiría muy frustrado por el nivel de mis explicaciones :)
      De nada

      Eliminar
  28. Hola buenas espero que aun siga respondiendo a los comentarios...

    En primer lugar muchas gracias por este slider que me funciona perfectamente, pero quiero ponerlo que solo se vea en la pagina principal y ademas me gustaría que explicases un poco mejor como quitar las flechas y que solo aparezcan cuando paso el ratón por encima ya que no entendí nada..

    Un saludo y espero que me contestes, GRACIAS!

    ResponderEliminar
    Respuestas
    1. Hola Miguel. Con retraso por falta de tiempo, pero sigo contestando hoy día :)

      Para que sólo se vea en la página principal tendrás que ver primero esto. Luego en tu plantilla localizas el código que lleva el gadget del slider y ya simplemente te restará meter dicho código entre una condición tal y como verás que se hace en el primer enlace.

      Con respecto a lo de las flechas, si con lo que expliqué en la entrada no pudiste hacerlo, no sé cómo podría hacerlo mejor en un comentario. Lo siento.

      Eliminar
  29. Saludos Oloman,,gracias por la información..quisiera preguntarte algo ¿Cómo puedo aumentar de tamaño las flechas blancas del slider y después de hacer esto como centrearlas?

    ResponderEliminar
    Respuestas
    1. Hola. Las flechas se hacen más o menos grandes cambiando el 30px que figura en el font-size dentro del selector a.mas, a.menos { }. Y el centrado queda automático si lo demás no lo tocaste.

      Eliminar
  30. He eliminado el comentario anterior porque era incorrecto, así que lo pego aquí otra vez, pero arreglando lo que me había equivocado :)
    Genial el slider. Se lo he puesto al blog que estoy montando y queda estupendo.
    He intentado poner otro en un widget html de la barra lateral, pero no me sale. He cambiado "slider" por "slider2" en el CSS y en el html, he puesto el script en el código y el CSS en su sitio. El html lo he puesto en el widget, pero nada.
    También he probado poniendo el css entre "styles" en el widget, pero tampoco.

    El caso es que me salen las flechas aunque las haya quitado del CSS, pues en el de la barra lateral no las necesito y además las imágenes no me hacen el slider, sino que se quedan una encima de la otra.
    Lo he intentado también poniendo el slider simple del primer artículo y tampoco soy capaz.
    Seguro que hay alguna tontería que estoy haciendo mal y no soy capaz de averiguarla.
    De cualquier forma, un saludo y muchas felicidades por el blog. No lo descubrí hasta ayer, pero me tiene fascinado y ya le he dado varias vueltas a muchos trucos de los que publicas.
    Un saludo.

    ResponderEliminar
    Respuestas
    1. Este sistema, al estar construido mediante id y no clases, sólo funciona con un slider por página, por lo que a falta de verlo, supongo que es eso lo que te pasa. Para poner dos tendrías que duplicar todo como cosa más fácil pero cambiando todo aquello que sea #slider por #slider2, incluido el propio JavaScript.

      Eliminar
  31. buenas Olaman me gustaria saber como añadir los botones al slider aparte de las flechas tener botones gracias de antemano.

    ResponderEliminar
    Respuestas
    1. ¿Botones? ¿Te refieres a esos circulitos que algunos sliders tienen abajo para marcar directamente una diapositiva u otra? Si es eso, este no lo lleva... por sencillo que es precisamente.

      Eliminar
    2. Si a eso me referia. Me podriaa ayudar por favor.

      Eliminar
    3. No lo lleva Miguel. Es un slider sencillo y como tal no tiene apenas opciones.

      Eliminar
  32. Esto es maravilloso. Muchas gracias hombre me sacaste de un apuro, sin querer aprendí un poco más de jQuery ;)

    ResponderEliminar
  33. ¿Cómo que "sin querer"? Será por tu parte, porque por la mía fue todo lo contrario :D
    Precisamente me gusta explicar lo que publico para que esto no sólo sea copiar y pegar, sino que además vayáis aprendiendo cosas ;)

    ResponderEliminar
  34. Hola amigo Oloman.
    En principio y antes que nada, gracias por el enorme aporte, ayuda muchísimo.
    Mi consulta es cómo podría hacer para que el slider no sea automático sino sólo manual? Es decir, que las fotos no se cambien automáticamente sino sólo al darle a las flechas, como un típico slider .
    Hay que tocar la parte de Javascript, supongo??
    Gracias de antemano. Saludos
    Daniel

    ResponderEliminar
    Respuestas
    1. El primer enlace que encontrarás en esta entrada va al post origen de esta otra y en él expliqué con detalle cómo funcionaba el JavaScript precisamente para que pudierais modificarlo vosotros mismos.

      Te anticipo que un truco muy sencillo sería ponerle a setInterval un número muuuuy largo. Tan largo que nadie pueda estar tanto tiempo parado en la página ;)

      Eliminar
  35. Hola! Tuve un problema: el slider funciona bien solo que las imagenes no aparecen centradas, sino a la derecha y por la mitad. Como puedo solucionarlo?

    ResponderEliminar
    Respuestas
    1. ¿Cuál es tu blog que vea eso, Melody?

      Eliminar
  36. Esta aqui, al final de todo: thefashiongirlargentina.blogspot.com.ar

    ResponderEliminar
    Respuestas
    1. Prueba añadiendo en este trozo ese LEFT que te marco en negrita:
      #slider img {
      width: 100%;
      min-height: 100%;
      position: absolute;
      left:0;
      margin:0;
      padding:0;
      border:0;
      }

      Eliminar
    2. Me funciono!! Muchas gracias

      Eliminar
  37. Solo me paraba por aquí para darte las gracias, que en esta vida hay que ser como mínimo agradecido a quien se molesta en trabajar metodos sencillos de hacer cosas interesantes.

    Yo puedo compartir contigo si lo quieres algunos truquillos sencillos, a ver que te parecen:

    Si quieres yo tengo un sistema sencillito para:
    · Una página web multidioma con php usando includes y un if/else
    · Anclas animadas con Jquery
    · Mapas o videos que se colocan por encima clikear un link.
    · Un menu que se queda fija una parte y otra no.
    · Un menu responsive que al ponerse en mobile cambia su visualización.

    Todos estos trucos y el tuyo están en la página que me he programado para mi empresa, es:
    http://www.iberofleeting.es/

    Saludos y a seguir siendo tan generoso aportando tu sabiduría. :)

    ResponderEliminar
  38. Tremendo tutorial, gracias por la información, me fue de gran ayuda

    ResponderEliminar
  39. Hola Oloman! muy buen slider me gustaria saber como se le pudiera poner un boton pausa al slider....?????

    ResponderEliminar
    Respuestas
    1. No idea. Lo podría ver, pero al final el slider SENCILLO dejaría de serlo.

      Eliminar
  40. Hola Olomán, tengo un problema con este Slider, consiste en que al hacer scroll y pasar el slider por el menú, este pasa por delante de el y no por detras. El menú que le estoy incluyendo es, también tuyo "Menú desplegable en horizontal ocupando todo el ancho" además he puesto otro exclusivamente para la versión móvil al que le sucede lo mismo. LO tengo incluido en pruebas aquí por si puedes mirarlo: http://pruebasike.blogspot.com.es

    ResponderEliminar
  41. Hola, he comprobado ya que hice otro blog de pruebas que el problema es de la plantilla, uso la RWD que nos ofreciste en esta misma web, en otras plantillas el menú lo copio debajo de body expr:class='"loading" + data:blog.mobileClass'>" pero en esta plantilla no esta y solo aparece body ¿He de ponerlo quizá en otro lugar?

    ResponderEliminar
    Respuestas
    1. Jajaja... entre una cosa y otra, no veo más que trucos míos en tu blog ;)

      Para que el menú quede siempre por encima, sólo tienes que añadirle un z-index con un valor alto, pero creo que eso ya lo hiciste porque veo un z-index: 101 incorporado en tu plantilla.

      Solucionado entonces ¿no?

      Eliminar
    2. Tienes razón, ya lo incluí y olvidé luego decírtelo aquí... Verdaderamente casi toda la web o blog está configurada según diferentes post o trucos que has publicado... Pronto la subiré como la general del sindicato.

      Una duda, si uso el truco de partir el footer automáticamente las partes serán RWD o habría que hacer algo más?

      Gracias por darnos los minutos de tú tiempo libre.

      Eliminar
    3. Para que el footer dividido sea RWD, ya hay que hacer unas cuantas cosas... no será automáticamente adaptable. Esta plantilla es un punto de partida y por eso es simple.

      Para que el footer sera RWD no es lo mismo que haya 2, 3 o 4 bloques, así que no puedo dar una pauta general, pero básicamente se trata de hacer que el selector .footer .widget tenga un display:inline-block; y además que tenga un width: 50%; (para dos gadgets, o 33% para tres, etc.).

      Adicionalmente hay que añadir media queries (@media) para cuando las pantallas son más pequeñas.

      Esto anterior son sólo unos pequeños apuntes por si controlas CSS que sepas por dónde empezar, pero hay algunas cosillas más que habría que hacer para que quedara perfecto.

      Eliminar
    4. Imaginaba que habría que hacer varios cambios, de momento no lo tocaré y esperaré a que quizá en un futuro hagas un tuto sobre el tema. Gracias de nuevo por tú tiempo.

      Eliminar
  42. Genial Oloman, es lo que buscaba. Entonces... ¿cómo puedo aplicar este código con el "slider más sencillo del mundo" de las últimas entradas/entradas más recientes?

    ResponderEliminar
    Respuestas
    1. No sé si saldrá bien, pero esto sería para ponerlo en un gadget tipo HTML/JavaScript.
      No olvides cambiar la dirección del blog por la tuya (al final del código).

      <div id="slider-wrapper">
      <div id="slider"></div>
      <a href="javascript:void();" class="mas">&rsaquo;</a>
      <a href="javascript:void();" class="menos">&lsaquo;</a></div>

      <script type="text/javascript">
      //<![CDATA[
      $(function(){function e(){$("#slider a:first-child").fadeOut(1000).next("a").fadeIn(1000).end().appendTo("#slider")}$("#slider a:gt(0)").hide();var a=setInterval(e,6000);$(".mas").click(function(){e(),clearInterval(a),a=setInterval(e,6000)}),$(".menos").click(function(){$("#slider a:first-child").fadeOut(1000),$("#slider a:last-child").fadeIn(1000).prependTo("#slider"),clearInterval(a),a=setInterval(e,6000)})});
      function galeriaposts(e){for(var n="",t=e.feed.openSearch$totalResults.$t,r=new Array,l=0;t>l;++l)r[l]=l;for(numposts_gal>t&&(numposts_gal=t),l=0;l<numposts_gal;++l){for(var i=e.feed.entry[r[l]],s=i.title.$t,o=0;o<i.link.length;o++)if("alternate"==i.link[o].rel){enlace=i.link[o].href;break}if("content"in i)var f=i.content.$t;if(x=f,a=x.indexOf("<img"),b=x.indexOf('src="',a),c=x.indexOf('"',b+5),d=x.substr(b+5,c-b-5),-1!=a&&-1!=b&&-1!=c&&""!=d)var g=d;else var g="http://lh4.googleusercontent.com/-xOm3GjEeKp0/T29pY9DlYPI/AAAAAAAACUY/Ec_j6_CMB5M/s000/sin-imagen.png";n+='<a href="'+enlace+'"><img src="'+g+'" /><p>'+s+"</p></a>"}document.getElementById("slider").innerHTML=n}
      //]]></script>

      <style>
      #slider-wrapper{position:relative;width:1200px;max-width:100%;overflow:hidden;margin:0 auto;padding:0 10px;font-family:arial,sans-serif;font-size:0;line-height:0;box-sizing:border-box}
      #slider{position:relative;width:100%;padding-bottom:50%;overflow:hidden;border:10px solid #333;border-radius:5%/10%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
      #slider > a{position:absolute;top:0;left:0;width:100%;min-height:100%}
      #slider img{width:100%;height:auto;display:block;position:absolute;top:-100%;bottom:-100%;left:-100%;right:-100%;margin:auto;padding:0;border:0}
      #slider p{position:absolute;bottom:5%;left:0;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:80%;margin:0;padding:5px 0;box-sizing:border-box;border-radius:0 20px 20px 0;color:#eee;background:#333;font-size:18px;line-height:18px;text-align:center}
      a.mas,a.menos{position:absolute;top:50%;z-index:10;width:30px;height:30px;text-align:center;line-height:30px;font-size:30px;color:#fff;background:#333;text-decoration:none;transition:all .4s}
      a.menos{left:-50px}
      a.mas{right:-50px}
      #slider-wrapper:hover a.menos{left:25px}
      #slider-wrapper:hover a.mas{right:25px}
      </style>

      <script style="text/javascript">
      var numposts_gal = 6; // Número de entradas a mostrar
      </script>

      <script src="http://URL_DEL_BLOG/feeds/posts/default?orderby=published&alt=json-in-script&callback=galeriaposts&max-results=10"></script>

      Eliminar
    2. Hola...¿Si quisiera añadir este junto con el otro, he de cambiar todos los "slider" por otros como "slider1"?

      Eliminar
    3. ¿Qué "otro" Ike? Entre ayer y hoy os he contestado como a 30 personas distintas y sin un contexto me pierdo...

      Eliminar
    4. Me refiero a tener los dos en la misma plantilla... el sencillo y este.

      También quería saber si conoces algún script que al truncar textos con el editor de blogger, el del folio cortado, salga luego el post con puntos suspensivos o elipsis...

      Gracias por tú tiempo Oloman, te volvemos loco sin duda.

      Eliminar
    5. No Ike. No está preparado el código para ello porque ambos utilizan los mismos selectores.

      Y lo otro no es posible hacerlo de modo nativo. El salto de Blogger corta por dónde tú indiques, pero no añade nada. Se podría hacer un JavaScript para crear esos resúmenes de texto y añadir los puntos, pero sinceramente, no creo que merezca la pena.

      Eliminar
  43. Hola, tenía una duda, no me quedaban bien las imagenes sino que se cortaban, así qué pensaba en escribir, para preguntar, pero trasteando un poco lo he conseguido así que te escribo para algo que de todos modos debía hacer, para agradecerte.
    Muchas gracias por todos los aportes.

    ...Y por si a alguien le pasa lo mismo, se soluciona colocando height: 100%, en #slider img dentro del css.

    ResponderEliminar
    Respuestas
    1. De nada Francisco. A tí por compartir nuevas soluciones ;)

      Eliminar
  44. Hola Oloman, primero gracias por el aporte y segundo tengo un pequeño problema, después de mirar y mirara el código me las arregle para que el slider ocupara todo el ancho de la pagina o entrada donde lo colocara, después de horas de mirar y cambiar una cosa y la otra vi que la solución mas simple era colocarle un padding-left: 111%; y también le puse un margin: 0 -40px; y todo perfecto lo adapte como quería pero el problema esta que al mirarlo desde el movil no se adapta a todo el ancho y no se que hacer para solucionarlo, espero me puedas ayudar, esta es la pagina donde esta el slider= http://www.diexti.com

    ResponderEliminar
    Respuestas
    1. Mientras nos soluciona el tema quien verdaderamente puede hacerlo, Oloman, indicar que el fallo de corte de las imágenes no es por el tamaño que elegimo, es por el lugar al ponerlo, si lo ponemos debajo de la cabecera en lo que blogger llama "crosscol" con la intención que ocupe todo el ancho, las imágenes se cortan, si lo ponemos en el "main" por ejemplo encima de las entradas, ya no sucede. Es lo que yo hice para solucionar este pequeño fallo. Un saludo.

      Eliminar
    2. Eso que dices Ike, denota que no tienes configuradas iguales la caja Crosscol y la Main. Si estuvieran iguales, el funcionamiento del slider también sería igual.

      Y KeHu, el CSS original que di es para que ocupe siempre el 100% del ancho. Si no era así entonces es por causa de algún CSS que tiene la caja contenedora o las imágenes, que afecta al funcionamiento. La solución más eficaz sería cambiar ese "algo", pero si no lo veo como estaba originalmente, no sabría decirte dónde está el problema.

      De todas formas intuyo que en tu caso la cosa está en que usas imágenes mucho más anchas que altas. Prueba simplemente a reducir el porcentaje del padding-bottom.

      Eliminar
    3. Debe de ser, aunque no sabría decir las diferencias, pero sin duda así será.

      Una duda, podrías hacer algún tutorial para indicarnos cómo poner bajo la cabecera una imagen que ocupara todo el ancho del blog, normalmente es una formula que se usa mucho en las Landing page, incluso un tutorial de como hacer una Landing page, pero ello imagino es muy costoso en tiempo. En cualquier caso, si con unas nociones básicas puedes decirnos lo primero, particularmente yo estaría sumamente agradecido.

      Eliminar
    4. Gracias por la respuesta Oloman, pero veo que no me han entendido el problema, a lo mejor no me supe explicar, las imágenes me van perfecto y no tengo problema con el ancho o alto, lo que pasa es que el slider al verlo desde un pc va perfecto, pero al momento de entrar a mi pagina desde un movil el slider no ocupa todo el ancho y no entiendo por que pasa eso, lo puedes verificar entrando a mi pagina desde el PC y luego desde el movil= www.diexti.com ,Un saludo

      Eliminar
    5. El problema del tutorial es de tiempo, sí, pero sobre todo de cómo explicar una cosa de manera genérica cuando depende muy mucho de la estructura particular de cada página y de los nombres de selectores que cada cual usa. Imposible.

      La idea principal es que el cuerpo de la cabecera y de la imagen vayan independientes del resto del blog, es decir, que no compartan contenedor. Luego sólo es cuestión de dar el 100% de ancho a la caja de la imagen (y a esta) y otra media a la cabecera, con un max-width

      Eliminar
    6. KeHu, el código que di es válido tanto para escritorio como para móvil.

      Lo que te ocurre es que la caja contenedora de tu slider tiene un padding y lógicamente, esos márgenes no los ocupa el slider.

      .item .entry-content, .static_page .entry-content {
      position: relative;
      padding: 20px 30px 0;
      margin-bottom: 30px;
      }

      Si ese padding los pones a cero, verás que el slider sale más ancho, ocupando toda la caja de las entradas.

      Eliminar
  45. Hola
    Realicé los pasos al pié de la letra pero sólo me muestra la imagen y texto 3 y las imágenes no pasan por sí solas.
    Que debo hacer?
    gracias

    ResponderEliminar
    Respuestas
    1. Tendría que ver el sitio dónde lo pusiste para averiguarlo. Pásame un link.

      Eliminar
  46. Maestro Oloman, ¿cómo está? Justo quería algo como esto, había puesto un GIF anteriormente ya que no sabía de esta posibilidad jajaja.

    He implementado "exitosamente" el slider en una de mis entradas, todo marcha bien excepto un pequeño detalle. No lo noto igual de fluido en cuanto a transiciones en comparación con el que se encuentra en este post. ¿Cuál podrá ser la causa?

    Aprovechando el comentario le hago otra pregunta, ¿cómo controlo el tiempo de permanencia de cada imagen? En el otro slider más sencillo modificaba el valor (4000) de → ".end().appendTo('#slider');}, 4000);". Sin embargo en este nuevo código no contiene dicho valor, probé añadiéndoselo pero no se mostraban las diapositivas, daba error.

    Dejo aquí la dirección de la entrada: https://bugs-and-others.blogspot.mx/2016/06/colaboracion-entre-insectos-y-un-artista.html

    Saludos :)

    ResponderEliminar
    Respuestas
    1. P.D. La diferencia de fluidez es más apreciable al presionar las flechas de adelante y atrás.

      Eliminar
    2. Me ha costado descubrirlo, pero la causa está aquí:
      a:link, a:visited {
      color: #89B399;
      text-decoration: underline;
      outline: none;
      transition: all 1s ease;
      }

      Si quitas ese TRANSITION verás que el slider se comporta más "normal". Lo que no sé es si te será necesario para otro efecto.

      Eliminar
    3. Excelente maestro, eliminé la transición y el cambio es notorio :) Me da curiosidad cómo dio con la causa y cuál era la razón por la que ese estilo perjudicaba el código. También me gustaría me ayudara con la otra cuestión del comentario 47 que cito a continuación:

      "...Aprovechando el comentario le hago otra pregunta, ¿cómo controlo el tiempo de permanencia de cada imagen? En el otro <> modificaba el valor (4000) de → ".end().appendTo('#slider');}, 4000);". Sin embargo en este nuevo código no contiene dicho valor, probé añadiéndoselo pero no se mostraban las diapositivas, daba error"

      Gracias totales!

      Eliminar
    4. Lo descubrí investigando el código. No hay más.

      Con respecto a lo de la duración de la transición, el valor 6000 sería el que tendrías que cambiar ahora... todas las veces que figura en el código.

      Eliminar