Esto es un simple archivo en .PSD que sirve de ayuda al momento de diseñar los templates en Photoshop.
Link | Friday’s Freebie: Clean Slideshow PSD
Descarga | Download Clean Slideshow PSD
Posts etiquetados con ‘ slideshow ’
Jorge Alejandro Inturias C. ha escrito 127 entradas en este sitio.
Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...
Pensé que los slideshows ya no me podían sorprender más y que ya lo había visto todo en cuanto slideshows pero este tiene algo distinto, para empezar los thumbs en la parte inferior desordenados y con leves rotaciones que hacen que el efecto polaroid sea mas real y no solo eso sino que le da un borde, una sombra, tiene un una imagen de espera (.gif) mientras carga la imagen grande con un título al pie de la misma, y algo que a mi me gustó es que ocupa toda la página, y por último es que puedes tener varias galerías en la misma página como bien se ve en el demo.
Aparte que es un buen slideshow con efecto de Polaroid, el autor pone el tutorial completo de todo el script y css (en ingles).
Link y Tutorial | Polaroid Photobar Gallery with jQuery
Demo | Polaroid Photobar Gallery
Jorge Alejandro Inturias C. ha escrito 127 entradas en este sitio.
Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...
Scrollerota, es un slideshow interesante con un efecto muy atractivo para mostrar el texto descriptivo o informativo, como todos los buenos plugins tiene una serie de opciones comunes, por ejemplo: el Ancho, Alto, Tiempo de pausa, velocidad de la transición, y tipo de Transición.
Para su uso en el html es básicamente asi:
<div id="scrollerota">
<ul class="images">
<li><img src="images/image1.jpg" /></li>
<li><img src="images/image2.jpg" /></li>
<li><img src="images/image3.jpg" /></li>
</ul>
<ul class="text">
<li>Nullam rutrum, nibh sit amet sodales luctus, mauris est placerat justo, molestie gravida lorem enim eu sapien.<a href="#" class="readmore">Leer más..</a></li>
<li>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam et eros nisl. Etiam vehicula lobortis pharetra. Integer ut ipsum risus.<a href="#" class="readmore">Leer más..</a> </li>
<li>Nulla facilisis felis vitae leo condimentum quis adipiscing turpis rhoncus. Sed id lacus libero, ut accumsan lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<a href="#" class="readmore">Leer más..</a> </li>
</ul>
</div>
Obviamente antes a esto se tiene que agregar las librerias:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.scrollerota.min.js"></script>
Luego inicializar el plugin indicando las configuraciones:
<script type="text/javascript">
$("#scrollerota").scrollerota({
width: 500,
height: 333,
padding: 10,
speed: 2000,
timer: 5000,
slideshow: true,
easing: 'easeInOutQuart'
});
</script>
Y por ultimo Agregar el CSS.
No es mucha documentación como ven, es un plugin sencillo de usar e implementar en nuevos proyectos.
Demo, y Descarga | Scrollerota jQuery Plugin
Jorge Alejandro Inturias C. ha escrito 127 entradas en este sitio.
Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...
Sliderman.js, es un potente slideshow, que tiene todos los efectos en transiciones (en total 25 tranciciones) para los slideshows y no utiliza ninguna otra librería conocida.
Para usarlo simplemente necesitas agregar el .js y el .css del plugin.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="/js/sliderman.1.2.1.js"></script> <link rel="stylesheet" type="text/css" href="/css/sliderman.css" /> </head>
El html quedaría mas o menos así:
<div id="slider_container_2">
<div id="SliderName_2">
<img src="demos/demo_2/img/1.jpg" width="700" height="450" alt="Demo2 first" title="Demo2 first" />
<div class="SliderName_2Description">Featured model: <strong>Charlize Theron</strong></div>
...
<img src="demos/demo_2/img/2.jpg" width="700" height="450" alt="Demo2 second" title="Demo2 second" />
...
<img src="demos/demo_2/img/2.jpg" width="700" height="450" alt="Demo2 second" title="Demo2 second" />
<div class="SliderName_2Description">Featured model: <strong>Charlize Theron</strong></div>
</div>
<div id="SliderNameNavigation_2"></div>
</div>
y ahora solo queda inicialisar el Sliderman.js
<script type="text/javascript">
var demoSlider = Sliderman.slider({ container: 'SliderName_2', width: 700, height: 450, effects: effectsDemo2,
display: {
autoplay: 3000,
loading: {background: '#000000', opacity: 0.5, image: 'demos/demo_2/img/loading.gif'},
buttons: {
hide: true,
opacity: 1,
prev: {className: 'SliderNamePrev_2', label: ''},
next: {className: 'SliderNameNext_2', label: ''}
},
navigation: {container: 'SliderNameNavigation_2', label: '<img src="img/clear.gif" />'}
}
});
</script>
y como ves las imagenes se cargan dentro el div id=”SliderName_2″ que es el mismo id que se le indica al javacript para que cargue las transiciones.
Este Slideshow es muy potente, lo recomiendo para sus proyectos.
Descarga | Sliderman.js
Demo | Examples Sliderman.js
Jorge Alejandro Inturias C. ha escrito 127 entradas en este sitio.
Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...
Un nuevo Plugin para una galería de imágenes en un Slideshow hecho bajo Mootools, no solo muestra imágenes, también muestra todo tipo de contenido que por lo general es texto e imagenes en divs, y ofrece una variedad de personalización.
Su uso es bastante sencillo: solo se necesita agregar el .JS del slideshow en el head y lo usamos con este código:
var basic;
document.addEvent('domready', function(){
basic = new SlideShow('basic-slideshow', {
autoplay: true,
delay: 3000,
transition: 'slideDown'
});
});
Link, Demo y Descarga | Mootools Slideshow
Jorge Alejandro Inturias C. ha escrito 127 entradas en este sitio.
Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...
Supersized 3.0 es una actualización de otro slideshow que se hizo en febrero del 2009, que básicamente tiene la misma característica, hacer un slide ocupando toda la pantalla.
Entre sus características tenemos:
- Redimensionar las imagenes para ocupar todo el ancho de la ventana del navegador manteniendo las dimensiones.
- Ocupa toda la pantalla con efectos de transiciones, de navegación, leyendas y precarga.
- Se integra facilmente con sitios ya creados.
Novedades
- Incrementa el desempeño de los slides.
- Se añadió miniaturas para la navegación.
- y más..
Demo y Descarga | Supersized 3.0
Jorge Alejandro Inturias C. ha escrito 127 entradas en este sitio.
Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...
Una opción de Slideshows, hecha para jQuery y para Scriptaculous, algo para destacar es que este slide interactúa con la rueda del mouse.
Su uso:
jQuery
<script src='jquery.mousewheel.js' type="text/javascript"></script> <script src='path_to_your_js/class.horinaja.jquery.js' type='text/javascript'></script> <link rel="stylesheet" href="path_to_your_css/horinaja.css" type="text/css" media="screen" />
Su integración en el html es bastante sencilla también solo necesita de un Div con la clase “horinaja” y poner el contenido en listas ( li ).
<div id="demo" class="horinaja"> <ul> <li><!-- content 1 --></li> <li><!-- content 2 --></li> ... </ul> </div>
En el sitio del autor podrán ver su uso para Scriptaculous.
Link | Horinaja
Jorge Alejandro Inturias C. ha escrito 127 entradas en este sitio.
Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...
Presentation Cyrcle, es un excelente Slideshow, hecho como variante de las funciones del plugin de Cyrcle, aparte trae una barra de progreso que muestra de una manera muy elegante el tiempo que tarda la transición del efecto, el autor dice que solo funciona en los navegadores modernos, así que no intenten hacerlo funcionar en IE6.
La implementación del script es sencilla solo basta con añadir los archivos dentro del head:
<head>
<!-- Stylesheets-->
<link rel="stylesheet" type="text/css" href="css/presentationCycle.css" />
<!-- Scripts -->
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript' src='js/jquery.cycle.all.min.js'></script>
<script type='text/javascript' src='js/presentationCycle.js'></script>
</head>
y su uso es mediante DIVs y dentro se puede poner cualquier etiqueta html
<div id="presentation_container" class="pc_container"> <div class="pc_item"> <div class="desc"> <h1>Description title</h1> You can put your description in here. </div> <img src="images/slide1.jpg" alt="slide1" /> </div> <!-- ... repetir para los siguientes Slides --> </div>
Tiene muchas opciones de personalización visiten la web del autor.
Link | Presentation Cyrcle: With a progress bar
Demo | Demo Presentation Cyrcle
Descargar | Download the script
Jorge Alejandro Inturias C. ha escrito 127 entradas en este sitio.
Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...
Un excelente Slide hecho bajo jQuery, según el autor este Slide ha sido actualiza y optimizado desde su subida a GitHub, y se ha convertido en un slide de cualquier tipo de contenido y ajustable al mismo, osea que no necesitas tener un ancho o un alto fijo para poder desplazar el contenido, altamente recomendado.
Su uso es mediante listas <li>, antes añadimos el script en el header.
Link | AnythingSlider 1.4
Descarga | AnythingSlider in GitHub
Jorge Alejandro Inturias C. ha escrito 127 entradas en este sitio.
Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...