Visor Css de múltiples imágenes panorámicas

Galería y visor de múltiples imágenes panorámicas: al seleccionar una de las miniaturas se visualiza la imagen y al :hover sobre ella se desplaza lateralmente.

Visor Css de múltiples imágenes panorámicas

Por Kseso ✎ 9

Tercer visor de la serie. Múltiple imágenes y sus miniaturas con desplazamiento en la seleccionada.

Check out this Pen!

¡Hey! ¡Que es sábado!. No esperarías, además de la demo, una explicación detallada de los códigos, ¿verdad?. En esta ocasión las explicaciones son a demanda. Si tienes alguna haz uso de los comentarios. Gracias.

Ver demo en codepen

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 9

  1. Pues como en esas andamos aprovecho y comparto un slider que hice siguiendo tus post, pero que aun no esta full terminado y hasta el momento solo lo he probado en chrome.

    http://codepen.io/g3kdigital/pen/vsuxh

    Lo que aun no me deja tranquilo, es el asuntillo de accesibilidad que me fue planteado por Lea Verou y es que uso checkbox, pero estos no son accesibles por el teclado aún, pero según y aun no estoy seguro de como, si es posible que lo sea solo con css.

    Gran recopilación, como siempre de lo mejor. Abrazos.

    ResponderEliminar
  2. Muchas gracias. Logré publicar las imágenes en el blog. Sin embargo, solo deseo que la galería aparezca en el home y no en todos las entradas de mi menú desplegable. ¿ Cómo se publica la galería de imágenes únicamente en la entrada principal de blog?.

    Gracias anticipadas.

    ResponderEliminar
    Respuestas
    1. Hola Brayan
      Me alegra si te fue de ayuda y pudiste usarlo.
      Para discriminar contenido en función del tipo de página has de usar los condicionales de Blogger (porque supongo que estás usando su plataforma):
      [code]
      <b:if cond='data:blog.pageType == "index"'>
      <!-- aquí los contenidos para ser mostrados en páginas tipo "index" -->
      </b:if>

      <b:if cond='data:blog.url == data:blog.homepageUrl'>
      <!-- sólo la página de inicio o home del blog -->
      </b:if>
      [/code]
      Condicionales que puedes "vitaminizar" con los operadores lógicos o encadenando varios de ellos.

      Para una información más precisa sobre el particular te recomendaría pasarte por el blog de @Oloman. Creo recordar que tiene unos cuantos post sobre este tema.

      Un saludo

      Eliminar
  3. Una pequeña consulta, ¿para cambiar las miniaturas por otras imágenes? Y que claramente la imagen original sea otra xD
    Estoy buscando hacer algo como esto: http://i.imgur.com/orGKb3Z.gif

    ResponderEliminar
  4. En esta demo las imágenes están vía la propiedad background-image siendo la misma para cada miniatura y su cuadro.
    Pero viendo que este detalle se le ha escapado casi que le recomendaría alguna otra demo para realizar lo que muestra el gif.

    Aunque tampoco sería muy difícil adaptar esta demo. Eso sí, necesitará unos conocimiento (pocos pero algunos obligados) de Css y Html

    Un saludo, Dullahan Dragon

    ResponderEliminar
    Respuestas
    1. Gracias por responder :)

      Ahora mismo ya tengo mi slider casi terminado, pero el script me está dando algunos problemillas y querría saber de alguien que pudiera solucionarlo. Son dos simples cosillas, que hay muchas transiciones que no quiero y que hay algo por ahí que impide que el overflow se muestre y pueda desplazarme entre los thumbnails.

      Eliminar
    2. No entiendo qué tiene que ver ese slider [js (y jQuery) dependiente por completo] con el mostrado en este artículo.
      Creo que lo acertado es que se dirija a su creador. Tiene muchas más posibilidades de hallar ayuda allí que en un blog 99'999% css.

      Suerte

      Eliminar
    3. El creador del javascript (no de el slider, mi css es una mezcla de varios sliders) es inglés y ese es mi problema exactamente, llevo días con esto y no creo para nada que esa persona pueda aportarme algo, busco alguien conocedor de javascript en español, ya sea un contacto suyo o lo que sea me sería de gran ayuda, no creo que sea un problema que conlleve mucho esfuerzo para arreglar, por eso pido ayuda.

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap