Visor Css de múltiples imágenes panorámicas 25.5.13
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
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 codepenKseso
the obCSServer ᛯ 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 Kseso
me gusta ; - )
ResponderEliminarPues 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.
ResponderEliminarhttp://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.
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?.
ResponderEliminarGracias anticipadas.
Hola Brayan
EliminarMe 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
Una pequeña consulta, ¿para cambiar las miniaturas por otras imágenes? Y que claramente la imagen original sea otra xD
ResponderEliminarEstoy buscando hacer algo como esto: http://i.imgur.com/orGKb3Z.gif
En esta demo las imágenes están vía la propiedad background-image siendo la misma para cada miniatura y su cuadro.
ResponderEliminarPero 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
Gracias por responder :)
EliminarAhora 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.
No entiendo qué tiene que ver ese slider [js (y jQuery) dependiente por completo] con el mostrado en este artículo.
EliminarCreo 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
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