Slider con tu contenido destacado de modo elegante

El Smooth Slider 2.0 es un plugin que ya tiene su trayectoria, pero ahora es relanzado con varias mejoras, entre las que contamos un panel de opciones muy completo y la posibilidad de ir tildando los posts / páginas que queremos incluir allí.

  • Se instala como cualquier plugin, subiendo el contenido del .zip a tu carpeta “wp-content/plugins”, lo activás y lo configurás desde su solapa de opciones.
  • Editá posts o páginas, tildando un casillero nuevo, que ahora nos aparece al final de cada página en su modo edición.
  • Insertá el código para desplegar el slider en donde vos quieras:
 <?php if ( function_exists( 'get_smooth_slider' ) ) {
get_smooth_slider(); } ?>

Las imágenes pueden ser ingresadas vía custom field o dejar que el plugin la tome del contenido, y también podremos determinar un tamaño fijo o permitir que tome el tamaño original de la imagen, con lo que podremos manejarlas independientemente.

Y además de ser simple de instalar y de utilizar, está optimizado para buscadores.

Uno de los mejores sliders que encontré hasta ahora, muy recomendable.

Web del autor: http://www.clickonf5.org/smooth-slider

Hermoso y sencillo javascript TinySlideShow

javascriptDesde leigeber.com siempre podemos ver material de calidad, en este caso nos trae una hermosa galería de imagenes con un slider para seleccionar la imagen deseada. Si no hay acción por parte del usuario, las imagenes correran solas, y tenemos disponible la opción de agregar un texto descriptivo.

Vean el demo de la galería para que no les queden dudas sobre lo que digo. Ahora veamos como se pone en marcha esto. El código lo descargan desde el site del autor en TinySlideShow 

Deben subir los dos archivos .js para que funcione, y tienen un ejemplo con imagenes cargadas en el zip para que puedan basarse en él.

<ul id="slideshow">
<li>
<h3>Image One</h3>
<span>photos/image-one.jpg
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="#"><img src="thumbnails/image-one.jpg" alt="Image One" /></a>
</li>
<li>
<h3>Image Two</h3>
<span>photos/image-two.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<img src="thumbnails/image-two.jpg" alt="Image Two" />
</li>
</ul>

El autor nos señala que cada li representa a una imagen, el h3 es el título de la imagen y p la descripción (el texto que aparece debajo). Con las etiquetas span indicamos la ruta a la imagen en tamaño completo. Finalmente en el site mencionado encontrarán los valores que pueden cambiar para modificar el modo en que se ven las imagenes (velocidad del show, transparencia, colores) desde el archivo javascript.

Es un complemento muy liviano para añadir a una web.

TinySlideShow