Probando

De Oloman -
Esta forma de contruir un slider de imágenes que vi en CSS Science tiene dos cosas que me gustan. Una es que todo se monta con CSS y no es necesario utilizar JavaScript. La otra es que la caja del visor se adapta al tamaño de la ventana automáticamente. Es fácil comprobarlo abriendo y cerrando esta misma que estas leyendo. El truco principal por así llamarlo, es flotar las imágenes una junto a otra y ocultarlas mediante un overflow. Luego, mediante unos botones radio a modo de controles, se van aplicando unos márgenes negativos equivalentes a 0, 1, 2, 3 y 4 veces (el ejemplo es para cinco imágenes) el 100% del ancho del contenedor y así es como se logra ir viendo las distintas imágenes. Una transición hace que simule el efecto slider y como comentan en la página, todo lo demás es estilo.
#slide1:checked ~ #slides .inner { margin-left:0; } #slide2:checked ~ #slides .inner { margin-left:-100%; } #slide3:checked ~ #slides .inner { margin-left:-200%; } #slide4:checked ~ #slides .inner { margin-left:-300%; } #slide5:checked ~ #slides .inner { margin-left:-400%; }
El fichero CSS completo es algo extenso, así que aquí lo dejo plegado. Lo que hay que hacer con él es copiarlo y pegarlo antes del cierre del SKIN (}]]></b:skin>), en la parte de estilo. También podéis descargarlo desde este enlace o desde este otro.
Ver/Ocultar
Otra opción sería alojarlo en un servicio externo y luego hacer una llamada desde la plantilla mediante una de estas fórmulas: Enlace a alojamiento externo desde plantilla. Insertar antes de <b:skin><![CDATA[/*:
<link rel='stylesheet' type='text/css' href='FICHERO_ESTILO.CSS'/>
Enlace a alojamiento externo desde un post (o desde plantilla, antes de </head>:
<style type="text/css"> @import url(FICHERO_ESTILO.CSS); </style>
Una vez que tenemos nuestro CSS ya sólo resta construir el visor en sí mismo mediante HTML. Esta sería la estructura. Los DIV INFO y su contenido son opciones:
<div id="slider"> <input checked type="radio" name="slider" id="slide1" /> <input type="radio" name="slider" id="slide2" /> <input type="radio" name="slider" id="slide3" /> <input type="radio" name="slider" id="slide4" /> <input type="radio" name="slider" id="slide5" /> <div id="slides"> <div id="overflow"> <div class="inner"> <article><div class="info"> <h5>Título</h5> <a href="#">Autor</a></div> <img src="URL_IMAGEN" style="border: 0; max-width: 100% !important;" /> </article> <article><div class="info"> <h5>Título</h5> <a href="#">Autor</a></div> <img src="URL_IMAGEN" style="border: 0; max-width: 100% !important;" /> </article> <article><div class="info"> <h5>Título</h5> <a href="#">Autor</a></div> <img src="URL_IMAGEN" style="border: 0; max-width: 100% !important;" /> </article> <article><div class="info"> <h5>Título</h5> <a href="#">Autor</a></div> <img src="URL_IMAGEN" style="border: 0; max-width: 100% !important;" /> </article> <article><div class="info"> <h5>Título</h5> <a href="#">Autor</a></div> <img src="URL_IMAGEN" style="border: 0; max-width: 100% !important;" /> </article> </div> </div> </div> <div id="controls"> <label for="slide1"></label><label for="slide2"></label><label for="slide3"></label><label for="slide4"></label><label for="slide5"></label></div> <div id="active"> <label for="slide1"></label><label for="slide2"></label><label for="slide3"></label><label for="slide4"></label><label for="slide5"></label></div> </div>

Comentarios

Publicar un comentario

Entradas populares de este blog

Around the world in 80 days

De Oloman -
Imagen
The pilot went on board at six, and took his place on the bridge, to guide the Rangoon through the channels to the port of Hong Kong. Passepartout longed to ask him if the steamer had left for Yokohama; but he dared not, for he wished to preserve the spark of hope, which still remained till the last moment. He had confided his anxiety to Fix who—the sly rascal!—tried to console him by saying that Mr. Fogg would be in time if he took the next boat; but this only put Passepartout in a passion. Mr. Fogg, bolder than his servant, did not hesitate to approach the pilot, and tranquilly ask him if he knew when a steamer would leave Hong Kong for Yokohama. "At high tide to-morrow morning," answered the pilot. "Ah!" said Mr. Fogg, without betraying any astonishment. Passepartout, who heard what passed, would willingly have embraced the pilot, while Fix would have been glad to twist his neck. "What is the steamer's name?" asked Mr. Fogg.
Leer más

Alice in Wonderland

De Oloman -
Imagen
'It's—it's a very fine day!' said a timid voice at her side. She was walking by the White Rabbit, who was peeping anxiously into her face. 'Very,' said Alice: '—where's the Duchess?' 'Hush! Hush!' said the Rabbit in a low, hurried tone. He looked anxiously over his shoulder as he spoke, and then raised himself upon tiptoe, put his mouth close to her ear, and whispered 'She's under sentence of execution.' 'What for?' said Alice. The Film
Leer más

The scarlet plague

De Oloman -
Imagen
"Yet in those few minutes I remained with the dying woman in my classroom, the alarm had spread over the university; and the students, by thousands, all of them, had deserted the lecture-room and laboratories. When I emerged, on my way to make report to the President of the Faculty, I found the university deserted. Across the campus were several stragglers hurrying for their homes. Two of them were running. "President Hoag, I found in his office, all alone, looking very old and very gray, with a multitude of wrinkles in his face that I had never seen before. At the sight of me, he pulled himself to his feet and tottered away to the inner office, banging the door after him and locking it. You see, he knew I had been exposed, and he was afraid. He shouted to me through the door to go away. I shall never forget my feelings as I walked down the silent corridors and out across that deserted campus. I was not afraid. I had been exposed, and I looked upon myself as already dead. It
Leer más