Jul 02
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 <head>
<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
Compartir
Please IE6.0 Buttons Problem.. PLEASE
Hi Jos Whats is your problem? Tell us more to help you
BYE
Problem with IE 6.0 is open Images of the buttons in PNG does not display well
“div#header div#slide-holder div#slide-controls p#slide-nav a{background-image:url(images/silde-nav.png);}”
check demo Please en IE6.0
Problem with IE 6.0 is open Images of the buttons does not display PNG transparency correctly
“div#header div#slide-holder div#slide-controls p#slide-nav a{background-image:url(images/silde-nav.png);}”
Please check demo IE6.0
Problema es abrir con IE 6.0 Las imagenes de los botones de PNG transparencia no muestra correctamente
this is a IE’s problem, with transparences, look this post to arrange this mistake
http://www.zoneartcss.com/general/ie-png-fix-solucion-a-png-s-con-transparencia-en-ie6/
and here for download
http://code.google.com/p/pnghack/
good bye and good luck
———————————–
download this
http://code.google.com/p/pnghack/
and use in to
and then in you “functions.js” add this
$$('a#slide-link-0','etc','etc');a#slide-link-0
a#slide-link-1
a#slide-link-2
a#slide-link-3……..etc Your buttons ok?…
add all ID’s for fixed (transparency)… and its all sorry for my bad english…
but if you have not understand, (let me know)
Please continue problema IE6.0
post:
if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},{"id":"slide-img-2","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-3","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-4","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-5","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-6","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-7","client":"nature beauty","desc":"add your description here"}];
WTF???????….
your problem is with images, ok?… Not, with the “Beautiful Slide”, well, ask in this link
http://www.zoneartcss.com/foro/
Please all the dudes to the forum
por favor todas las dudas al foro
Thank you, Gracias
Ok gracias
Hola, he seguido el tutorial, funciona estupendamente, pero que tengo que hacer si en vez de poner imagenes quiero poner texto, no se como hacerlo¡¡¡, espero tu respuesta y gracias de antemano
Hola la vdd no lo he probado, en cuanto busque la manera lo pongo!!!
Saludos!!