Foros del Web » Creando para Internet » HTML »

Como crear transicion entre fotos

Estas en el tema de Como crear transicion entre fotos en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/02/2011, 09:57
 
Fecha de Ingreso: febrero-2011
Mensajes: 1
Antigüedad: 6 años, 9 meses
Puntos: 0
Como crear transicion entre fotos

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!
  #2 (permalink)  
Antiguo 27/02/2011, 20:36
Avatar de TheoriaX  
Fecha de Ingreso: agosto-2009
Ubicación: Hermosillo, Sonora
Mensajes: 217
Antigüedad: 8 años, 4 meses
Puntos: 5
Respuesta: Como crear transicion entre fotos

prueba buscando galerias con jquery ahi muchas de ese tipo y bastantes elegantes...
__________________
Desarrollador .Net y Php
MCTS Framework 2.0:Windows Applications
Microsoft Certificated Profesional
  #3 (permalink)  
Antiguo 27/02/2011, 20:39
Avatar de camilo1012  
Fecha de Ingreso: febrero-2011
Mensajes: 46
Antigüedad: 6 años, 10 meses
Puntos: 1
Respuesta: Como crear transicion entre fotos

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> 

Etiquetas: fotos, transicion
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:11.