How to Create a Stylish Image Content Slider in Pure #CSS3 by @designmodo

Fuente : designmodo.com

How to Create a Stylish Image Content Slider in Pure CSS3 [Tutorial]

In this tutorial we will create a CSS3 only image slider inspired on the Futurico User Interface by Vladimir Kudinov. The CSS3 features that we’ll be using in this tutorial are in tests in the most recent browsers so this slider will not work in all browsers (try preview in Chrome and Safari). I don’t recommend you to use it on your professional projects as this will not work properly, use this tutorial just to play around with the last CSS3 features that you will be able to use in the feature.

Ir al tutorial | Ver Demo

Usando MOOdalBox para abrir una ventana al cargar el html automaticamente sin necesidad de pulsar en ningun link

Vamos, lo tipico de las ventanas de publicidad en cualquier web cuando entras y lo primero que te sale es publicidad …

Debemos añadir esto en el head:

<script type=”text/javascript”>
function go(){
var id = setInterval(“go2()”,1000);
setTimeout(“clearInterval(“+id+”)”,1001);
}
function go2(){
MOOdalBox.open(“premios-e-commerce.html”, “”, “215 275″);
}
</script>

y en el body esto:

<body onload=”javascript:go()”>

Me imagino que estareis flipando con lo de setinterval, esto es debido a que si llamamos directamente desde el onload del body es como si se ejecutase demasiado rapido y el script genera un error debido a que no le dio tiempo a obtener las dimensiones de la ventana del explorador (o al menos a mi me pasa eso, claro que mi ordenador esta poseido por el satan del infierno del silicio claro … eso quizas influya algo) donde 1000 es el tiempo que tarda en abrirse la ventana lightbox en milisegundos y 1001 es para romper el setinterval

Espero haber sido de ayuda, muchachada 😀

Lightbox 2 – auto ajuste de imagen

Modificacion del mitico Lightbox 2 para que las fotos que sean mas grandes que la resolucion de la pantalla se ajusten automaticamente de tal forma que nunca necesiten scroll horizontal.

Enlace a la libreria .js modificada: http://seb.box.re/assets/2007/2/4/lightboxSEB.js

Descargamos esta libreria y la sustituimos por la anterior

Autor: Sébastien Grosjean

Fuente: http://seb.box.re/2006/11/22/lightbox-2-auto-resizing-enhancement