:: CP - Recursos Web :: - Auto Photo Slider

Auto Photo Slider

- Esta es una galeria que permite mostrar de una manera más ordenada y lujosa tus galerias, es muy facil de instalar y muy vistosa para tu web.

[ Ejemplo: ]

Anterior

Siguiente

Información:
Nombre: Auto Photo Slider
Fecha: 13-Octubre-2010
Creditos: N/A
Garantia: Si ?

Enlazanos:

Compartir

[ Codigos: ]

- Pon esto en las etiquetas "head" o por encima de la pagina:

<style type="text/css">
#wrapcpaps {width:580px; height:380px;background: #333; position:relative; border:2px solid #000; margin:30px auto 20px auto;}
#slidecpaps {width:480px; height:280px; overflow:hidden; position:absolute; left:49px; top:29px; background:#000; border:1px solid #888;}
#slidecpaps a {text-decoration:none; display:block; width:480px; height:360px; position:absolute; left:480px;}
#slidecpaps a img {display:block; border:0;}
#previouscpaps b {display:none;}
#previouscpaps {width:32px; height:32px; background:url("https://img.webme.com/pic/c/cssplantillas/leftcpaps.png"); position:absolute; left:34px; top:154px; cursor:pointer;}
* html #previouscpaps {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='iphoto-slide/left.png', sizingMethod='crop');}
#nextcpaps b {display:none;}
#nextcpaps {width:32px; height:32px; background:url("https://img.webme.com/pic/c/cssplantillas/rightcpaps.png"); position:absolute; left:514px; top:154px; cursor:pointer;}
* html #nextcpaps {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='photo-slide/right.png', sizingMethod='crop');}
#buttonscpaps {position:absolute; left:50px; top:330px;}
#buttonscpaps div {width:62px; height:37px; float:left; margin-right:8px; display:inline;}
#buttonscpaps div img {display:block; cursor:pointer; border:1px solid #444;}
img#loading {position:absolute; left:240px; top:170px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="http://cssplantillas.zobyhost.com/js/autoslide.js" type="text/javascript"></script>

- Edita y pon esto donde quieres que salga la galeria

<div id="wrapcpaps">
<div id="slidecpaps">
			<img id="loading" src="https://img.webme.com/pic/c/cssplantillas/loading.gif" alt="" />
			<a id="p1" href="#url"><img src='URL IMAGEN 1' alt='' width="480px" height="280"/></a>
			<a id="p2" href="#url"><img src='URL IMAGEN 2' alt='' width="480" height="280"/></a>
			<a id="p3" href="#url"><img src='URL IMAGEN 3' alt='' width="480" height="280"/></a>
			<a id="p4" href="#url"><img src='URL IMAGEN 4' alt='' width="480" height="280"/></a>
			<a id="p5" href="#url"><img src='URL IMAGEN 5' alt='' width="480" height="280"/></a>
			<a id="p6" href="#url"><img src='URL IMAGEN 6' alt='' width="480" height="280"/></a>
			<a id="p7" href="#url"><img src='URL IMAGEN 7' alt='' width="480" height="280"/></a>
		</div>
		<div id="previouscpaps"><b>Anterior</b></div>
		<div id="nextcpaps"><b>Siguiente</b></div>
		<div id="buttonscpaps">
			<div id="b1"><img src='URL IMAGEN 1' alt='' width="60" height="35"/></div>
			<div id="b2"><img src='URL IMAGEN 2' alt='' width="60" height="35"/></div>
			<div id="b3"><img src='URL IMAGEN 3' alt='' width="60" height="35"/></div>
			<div id="b4"><img src='URL IMAGEN 4' alt='' width="60" height="35"/></div>
			<div id="b5"><img src='URL IMAGEN 5' alt='' width="60" height="35"/></div>
			<div id="b6"><img src='URL IMAGEN 6' alt='' width="60" height="35"/></div>
			<div id="b7"><img src='URL IMAGEN 7' alt='' width="60" height="35"/></div>
</div></div>

Enlaces de ayuda:

Instrucciones:
- Solo modifica el script 2 donde dice "URL IMAGEN Nº" debe ir la misma imagen arriba y abajo donde despues vuelve a decir lo mismo. Y lo pegas donde quieras obiamente con la opcion HTML activada.
- Para cualquier consulta visita nuestro Foro de soporte.

:: CP - Recursos Web ::

Auto Photo Slider

Auto Photo Slider

Buscador

Lo más reciente:

PUBLICIDAD

EN TWITTER!

Suscribete

Lo más buscado