Simple Slideshow, otra opción que les permitirá montar sus Slideshow o diapositivas animadas de la forma más simple. Si deseas animar sus encabezados, pero no les agrada la idea de utilizar animaciones en flash, Simple Slideshow puede ser una buena opción a tener en cuenta.
Ver Demo – Descarga – Mas Info Simple Slideshow
Moving Boxes, otra interesante opción para montar cajas con contenido deslizante. La ida original sigue siendo la base de Start/Stop slider que también comentamos. Botones de control a sus laterales para navegar por el contenido de nuestra caja, pero con la diferencia que al encontrase en el centro de la caja el contenido que hayamos introducido, se producirá un Zoom que lo hace muy llamativo.
Ver Demo – Descarga – Mas info Moving Boxes
Otro agradable plugin jQuery para agregar a nuestra extensa lista. Easy Slider, como llama a este plugin Alen Grakalic, nos permitirá deslizar horizontalmente o verticalmente tanto imágenes como cualquier otro contenido que se nos ocurra. Es completamente configurable tan solo con CSS, lo que permite una integración realmente simple a nuestro sitio. Si desean ver una idea de cómo podrían llegar a implementar Easy Slider en sus porfolios, basta con visitar templatica, otro de los sitios de Alen Grakalic, donde ha logrado integrar Easy Slider de una forma maravillosa.
Demos
Mas Info Easy Slider - Descarga ejemplos
Uso:
agregando estilo
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider, #slider li{
/*
define width and height of container element and list item (slide)
list items must be the same size as the slider area
*/
width:696px;
height:241px;
overflow:hidden;
}
span#prevBtn{}
span#nextBtn{}
/* // Easy Slider */
Contenido
El script automáticamente agregara la navegación "anterior" y "próximo", pero se le ha asignado un ID (identificación) que pueden utilizar para darle un poco de estilo mediante CSS
Create an Amazon Books Widget with jQuery and XML, un fabuloso tutorial paso a paso que nos permitirá crear un Widget Amazon Books con jQuery y XML, algo así como una caja donde exponer nuestros productos totalmente navegable mediante su carrusel. Inclusive nos permitirá añadir una breve descripción del producto, algo que lo torna mucho más interesante. Requiere de JavaScript y jQuery, esta ultima diseñada para recorrer documentos XML con facilidad, archivo que utilizaremos para actualizar los datos en nuestro widget de productos.
Ver demo - Descarga demo - Mas info Create an Amazon Books Widget
Uso
Realizar las llamadas desde nuestro encabezado < head > - Observar que se hace referencia a la ubicación del archivo book.xml, documento que utilizaremos para actualizar los datos de nuestro widgets:
$(function(){
BOOKS.init({
xmlPath : "data/books.xml",
imgPath : "images",
perView : 4
});
});
</script>
Un poco de estilo
/* styles */
#books .buttons {
position: relative;
height: 30px;
margin: 0 0 5px 0;
}
#books .prev {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
}
#books .next {
position: absolute;
top: 0;
right: 0;
}
#books .showing {
margin: 5px 60px 0 60px;
text-align: center;
font-size: .8em;
}
#books .top {
background: url(../images/books_top.gif) repeat-x;
}
#books .inner {
padding: 0 0 0 20px;
margin: 0 0 -20px 0;
background: url(../images/books_left_mid.gif) repeat-y;
}
#books ul {
margin: 0;
padding: 0;
list-style-type: none;
background: url(../images/books_right_mid.gif) repeat-y top right;
}
#books ul li {
display: none;
position: relative;
margin: 0;
padding: 0 20px 20px 0;
font-size: .8em;
z-index: 1;
}
#books ul li.loader {
display: block;
float: none;
height: 115px;
margin: 0 0 20px -20px;
background: url(../images/books_loader.gif) no-repeat center center;
}
#books ul li a.info {
position: absolute;
bottom: 20px;
right: 20px;
}
#books ul li a.thumb {
display: block;
border: 1px solid #ddd;
}
#books ul li a.thumb img {
display: block;
margin: 0;
padding: 3px;
}
#books .btm {
background: url(../images/books_btm.gif) repeat-x;
}
.books_tool_tip {
display: none;
position: absolute;
top: 0;
left: 0;
width: 350px;
z-index: 9999;
}
.books_tool_tip .books_pointer_left {
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 10px;
background: url(../images/books_pointer_left.gif);
}
.books_tool_tip .books_pointer_right {
position: absolute;
top: 0;
right: 0;
width: 10px;
height: 10px;
background: url(../images/books_pointer_right.gif);
}
.books_tool_tip .inner {
border: 1px solid #ddd;
padding: 15px 15px 3px 15px;
margin: 0 0 0 9px;
background: #fff;
}
.books_tool_tip .inner_right {
margin: 0 9px 0 0;
}
.books_tool_tip .inner p {
font-size: .8em;
margin: 0;
padding: 0 0 12px 0;
}
Contenido
Start/Stop Slider otra atractiva propuesta por Chris Coyier para generar Contenido Deslizante (Slider) en tus proyectos online. Requiere de jquery y es completamente personalizable desde su archivo startstop-slider.js, basta tener un poco de conocimiento o tiempo y curiosidad. Start/Stop Slider posee una característica que es fácil deducir ya con el nombre del proyecto, nos permite mediante un botón parar la animación de nuestro slider cuando lo deseemos, una buena forma de permitir a nuestros usuarios leer con tranquilidad las cosas que deseemos mostrar en ellos. Además posee otras funcionalidades, que invito a que conozcan testeando Start/Stop Slider desde sus ordenadores.
Ver Demo - Descarga - Mas Info Start/Stop Slider by: Chris Coyier
Uso:
Realizar la llamada correspondiente a nuestros script desde el encabezado de nuestro theme < head >...
Añadir estilo en nuesra hoja de Style.css
Contenido
<div id="mover">
<div id="slide-1" class="slide">
<h1>Garden Rack</h1>
<p>Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.</p>
<a href="#"><img src="images/slide-1-image.png" alt="learn more" /></a>
</div>
<div class="slide">
<h1>Tulip Bulbs</h1>
<p>Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.</p>
<a href="#"><img src="images/slide-2-image.png" alt="learn more" /></a>
</div>
<div class="slide">
<h1>Garden Gloves</h1>
<p>Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.</p>
<a href="#"><img src="images/slide-3-image.png" alt="learn more" /></a>
</div>
</div>
</div>
¿Aun con ganas de testear más opciones para generar tus “slideshows”? Con s3Slider jQuery plugin tienes una opción mas para agregar a tu extensa lista, un script escrito en jQuery con opciones muy interesantes y efectos muy atractivos. Sin dejar de lado la opción de añadir fragmentos de texto que acompañen nuestras fotos.
Ver demos - descarga - Via webintenta - visual-blast.
Uso:
Descargar y alojar los archivos en nuestro servidor, luego realizar la llamada correspondiente desde nuestro “head”
Un poco de estilo CSS - En este caso para el ejemplo N° 1
y por ultimo: Nuestra estructura
Zoomy.js otra atractiva para generar lightbox. Pesa tan solo 4k y depende de Prototype Javascript Framework y Scriptaculous (effect.js , dragdrop.js) para funcionar. El efecto realizado por Zoomy.js es el de los tradicionales lightbox, hacer un zoom al dar click sobre las imágenes, solo que con la ventaja que al cargar las imágenes de antemano, no hay retraso cuando se produce el Zoom. Además de forma opcional podremos mostrar un titulo o añadir la opción de cerrar las ventanas de forma manual.
Ver Mi demo - Descarga Demo - Web Oficial Zoomy - Fuente Anieto2k
Opciones :
Uso
Un poco de CSS
.zoomy a, .zoomy2 a {outline:none; border:2px solid #372919; text-decoration:none; background-position:left top; text-indent:-9999px; display:block; width:150px; height:100px; }
#zoomy { position:absolute; border:1px solid #B3BEAD; background:#000000; padding:5px; color:#fff; line-height:100%; }
#zoomy p { margin:0; padding:5px 5px 10px 5px; position:relative; }
#close { position:absolute; right:5px; width:12px; height:12px; background:url(close.gif) no-repeat; cursor:pointer;}
contenido
<ul class="zoomy">
<li><a href="#" style="background-image: url(fotito.jpg)" title="Demo Website Xyberneticos">Xyberneticos</a></li>
<li><a href="#" style="background-image: url(fotito.jpg)" title="Demo Website Xyberneticos">Xyberneticos</a></li>
<li><a href="#" style="background-image: url(fotito.jpg)" ttitle="Demo Website Xyberneticos">Xyberneticos</a></li>
<li><a href="#" style="background-image: url(fotito.jpg)" title="Demo Website Xyberneticos">Xyberneticos</a></li>
</ul>
<h3>Efecto Zoomy Draggable</h3>
<ul class="zoomy2">
<li><a href="http://www.xyberneticos.com/" style="background-image: url(fotito.jpg)" title="Demo Website">Xyberneticos</a></li>
<li><a href="http://www.xyberneticos.com/" style="background-image: url(fotito.jpg)" title="Demo Website">Xyberneticos</a></li>
<li><a href="http://www.xyberneticos.com/" style="background-image: url(fotito.jpg)" title="Demo Website">Xyberneticos</a></li>
<li><a href="http://www.xyberneticos.com/" style="background-image: url(fotito.jpg)" title="Demo Website">Xyberneticos</a></li>
</ul>
Siguenos desde tu lector de feeds favorito.
Recibe los artículos en tu casilla de correo electrónico.
Set de Iconos para organizar todos tus archivos WP en tu ordenador Formato .Ico y Png
Set de Iconos con estilo Jeans, para resaltar los RSS de tu blog. Formato Png y en varios Px
Set de Iconos para tus RSS inpirados en la Marca Levis. Formato Png y en varios Pixeles.
