Beautiful Slide con jQuery

Liz Palacios — Thu, 02 Jul 2009 19:18:00 +0000

Hola!!!

Este tutorial explica cómo crear Hermoso Slide con jQuery,

Paso 1: página HTML:
Descargar los archivos jquery.js, scripts.js,y llamarlos en el HTML dentro de la etiqueta

<script type="text / javascript">
var _siteRoot='index.html',_root='index.html'; //index.html archivo donde incluiremos nuestro slide
</script>
<script src="js/jquery.js" type="'text/javascript'"></script>
<script src="js/scripts.js" type="'text/javascript'"></script>

Paso 2: página HTML:

<div id="header">
<div class="wrap">
<div id="slide-holder">
<div id="slide-runner">
<a href=""><img id="slide-img-1" src="images/nature-photo.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-2" src="images/nature-photo1.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-3" src="images/nature-photo2.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-4" src="images/nature-photo3.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-5" src="images/nature-photo4.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-6" src="images/nature-photo4.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-7" src="images/nature-photo6.png" class="slide" alt="" /></a>
<div id="slide-controls">
<p id="slide-client" class="text"><strong>post: </strong><span></span></p>
<p id="slide-desc" class="text"></p>
<p id="slide-nav"></p>
</div>
</div>
</div>
</div>
</div>

Paso 3: codigo CSS:

*{
margin:0;
padding:0;
}
html{
height:100%;
}
body{
height:100%;
color:#a4a4a4;
cursor:default;
font-size:11px;
line-height:16px;
text-align:center;
background-color:#000;
background-position:50% 0;
background-repeat:no-repeat;
font-family:Tahoma,sans-serif;
}
a:link,a:visited{
color:#fff;
text-decoration:none;
}
a img{
border:0;
}
div.wrap{
width:993px;
margin:0 auto;
text-align:left;
}
div#top div#nav{
float:left;
clear:both;
width:993px;
height:52px;
margin:22px 0 0;
background:url url(images/nav-bg.png) 0 0 no-repeat;
}
div#top div#nav ul{
float:left;
width:700px;
height:52px;
list-style-type:none;
}
div#nav ul li{
float:left;
height:52px;
}
div#nav ul li a{
border:0;
height:52px;
display:block;
line-height:52px;
text-indent:-9999px;
}
div#header{
margin:-1px 0 0;
}
div#video-header{
height:683px;
margin:-1px 0 0;
}
div#header div.wrap{
height:299px;
background:url(images/header-bg.png) 50% 0 no-repeat;
}
div#header div#slide-holder{
z-index:40;
width:993px;
height:299px;
position:absolute;
}
div#header div#slide-holder div#slide-runner{
top:9px;
left:9px;
width:973px;
height:278px;
overflow:hidden;
position:absolute;
}
div#header div#slide-holder img{
margin:0;
display:none;
position:absolute;
}
div#header div#slide-holder div#slide-controls{
left:0;
bottom:228px;
width:973px;
height:46px;
display:none;
position:absolute;
background:url(images/slide-bg.png) 0 0;
}
div#header div#slide-holder div#slide-controls p.text{
float:left;
color:#fff;
display:inline;
font-size:10px;
line-height:16px;
margin:15px 0 0 20px;
text-transform:uppercase;
}
div#header div#slide-holder div#slide-controls p#slide-nav{
float:right;
height:24px;
display:inline;
margin:11px 15px 0 0;
}
div#header div#slide-holder div#slide-controls p#slide-nav a{
float:left;
width:24px;
height:24px;
display:inline;
font-size:11px;
margin:0 5px 0 0;
line-height:24px;
font-weight:bold;
text-align:center;
text-decoration:none;
background-position:0 0;
background-repeat:no-repeat;
}
div#header div#slide-holder div#slide-controls p#slide-nav a.on{
background-position:0 -24px;
}
div#header div#slide-holder div#slide-controls p#slide-nav a{background-image:url(images/silde-nav.png);}
div#nav ul li a{background:url(images/nav.png) no-repeat;}

Por ultimo, guarden y prueben!!!!!!

Les paso el link de los archivos.

Link al DEMO

Fix CSS “#Loquesea:hover” para IE 6

miguelortega — Mon, 29 Jun 2009 16:00:05 +0000

Bueno a la hora de revisar nuestros proyectos en diferentes navegadores y todos nos topamos con la inminente llegada del “FCK IE” y mas aun el IE6, siempre el enojo que por alguna razon que enverdad me la suda, no funcionan algunas propiedades CSS… y en este caso el ” *:hover ”

Si aveces… muchos implementadores con experiencia, ni saben que en el IE6 esta y otras propiedades CSS no andan, ya que maquetan a XHTML/CSS sin importarles si funciona o no en algun explorador, cumplen en tener sus codigos estandarizados (validos por la W3C); pero nosotros no somos asi (chiste) y nos gusta ser lo mas optimo para con nuestros clientes y/o visitantes de estos… asi que aqui les pongo 2 opciones o bien soluciones a este y otros problemas con el FKC IE…

Primera solución:
Whatever:hover
Link de la web del autor

Esta enfocada a solo resolver el “loquesea:hover” en IE6… es ligera, discreta y nos
vale para tener el famoso “li:hover” en nuestros menus y submenus… o igual nuestas “img:hover” en algunas ocaciones.

Descargar:
Esta ultima version nos arregla tambien el
:hover
:active
:focus

Descargar version ligera/paquetada

Descargar el codigo de fuente/sin empaquetar

Y como lo aplicamos?
Tan facil y sencillo como agregar esto en el body de nuestra hoja de estilos

1	body {behavior: url("csshover3.htc");}

Segunda Opcion:
En lo personal me gusta esta opcion ya que tiene mas arreglos… y aveces hace que nuestros proyectos, se vean casi igual en todos los IE…
:hover
:first-child
:background-image (transparencia PNG; pero no con imagenes en mosaico o bien que se repita)
:max-height – :min-height
:max-width – :min-width
position:fixed;
etc, etc… enfin una buena libreria js que nos ahorrara mucho tiempo y evitariamos miles de “Hacks” que solo nos dan un codigo CSS sucio, feo, e invalido… y diria que casi debe ser un complemento mas e imprescindible en nuestros proyectos.

Descargar:
La version actual es 2.0 beta 3
y podemos ver las otras versiones aqui del ie7 js en google

http://ie7-js.googlecode.com/svn/version/

Y como lo aplicamos?
Igual es sencillo si queremos una solucion rapida y externa podemos usar este codigo para actualizar cualquier version del IE anterior al IE7 con esto

1
2
3

tambien podemos usar esta libreria para actualizar cualquier version del IE anterior al IE8

1
2
3

si queremos podemos descargarnos la libreria e integrarla en nuestros proyectos y solo cambiamos la url del destino del archivo js ejemplo:

1
2
3

Ver demo enlinea

ZoneArtCSS | Desarrollo Web, Diseño de páginas Web, Aplicaciones Móviles, Notas de Tecnología » internet

Beautiful Slide con jQuery

Fix CSS “#Loquesea:hover” para IE 6