Como crear transicion entre fotos

garrotes · #1 (**permalink**) 27/02/2011, 09:57

Hola amigos!

Me gustaría saber como crear este efecto http://bfmedificatoria.com/proyectosdecoracion.php para hacer mi página web. me gusta esa transición de fotos pero no tengo ni idea de como se puede hacer. He visto más de una página con ello. ¿Alguien me puede ayudar? Muchas gracias!

TheoriaX · #2 (**permalink**) 27/02/2011, 20:36

prueba buscando galerias con jquery ahi muchas de ese tipo y bastantes elegantes...

camilo1012 · #3 (**permalink**) 27/02/2011, 20:39

Te recomiendo que uses Adobe Widget Browser y busques el Spry Image Slideshow-Basic, te dejo una muestra y los codigos de scrip por si los nesesitas.

[URL="http://srichards.host.adobe.com/SprySlideShow.html"]http://srichards.host.adobe.com/SprySlideShow.html[/URL]

El codigo HTML:

Código:


	Código HTML:
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Spry Image Slideshow - Basic : 250 x 200 Sidebar Slideshow</title>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryDOMUtils.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryDOMEffects.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryWidget.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryPanelSet.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryFadingPanels.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryImageLoader.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryImageSlideShow.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryPanAndZoomPlugin.js'></script>
<link type='text/css' href='Spry-UI-1.7/css/SpryImageSlideShow.css' rel='stylesheet'/>
<style type="text/css">
#ImageSlideShow.ImageSlideShow {
	width: 250px;
	height: 200px;
	border: solid 1px #000000;
}

#ImageSlideShow .ISSClip {
	background-color: #000000;
}
</style>
</head>

<body>
<ul id="ImageSlideShow">
	<li><a href="http://labs.adobe.com/technologies/spry/demos/gallery/galleries/china/images/china_01.jpg"><img src="http://labs.adobe.com/technologies/spry/demos/gallery/galleries/china/thumbnails/china_01.jpg" alt="" /></a></li>
	<li><a href="http://labs.adobe.com/technologies/spry/demos/gallery/galleries/china/images/china_02.jpg"><img src="http://labs.adobe.com/technologies/spry/demos/gallery/galleries/china/thumbnails/china_02.jpg" alt="" /></a></li>
	<li><a href="http://labs.adobe.com/technologies/spry/demos/gallery/galleries/china/images/china_03.jpg"><img src="http://labs.adobe.com/technologies/spry/demos/gallery/galleries/china/thumbnails/china_03.jpg" alt="" /></a></li>
	<li><a href="http://labs.adobe.com/technologies/spry/demos/gallery/galleries/china/images/china_04.jpg"><img src="http://labs.adobe.com/technologies/spry/demos/gallery/galleries/china/thumbnails/china_04.jpg" alt="" /></a></li>
	<li><a href="http://labs.adobe.com/technologies/spry/demos/gallery/galleries/china/images/china_05.jpg"><img src="http://labs.adobe.com/technologies/spry/demos/gallery/galleries/china/thumbnails/china_05.jpg" alt="" /></a></li>
</ul>
<script type="text/javascript">
var ImageSlideShow = new Spry.Widget.ImageSlideShow("#ImageSlideShow", {
	widgetID: "ImageSlideShow",
	injectionType: "replace",
	autoPlay: true,
	displayInterval: 4000,
	transitionDuration: 2000,
	componentOrder: ["view"],
	plugIns: [  ]
});
</script>
</body>
</html>