Fecha actual 24 Abr 2014, 00:53




Nuevo tema Responder al tema  [ 6 mensajes ] 
 Ayuda. para que se vayan cambiando las fotos 
Autor Mensaje
MiniRentabilizador

Avatar de Usuario

Registrado: 01 May 2010, 16:54
Mensajes: 107
Nota Ayuda. para que se vayan cambiando las fotos
hola como puedo hacer para que se vayan cambiando las fotos solas .

Algo parecido a esa http://anima-love.com/


10 Ene 2011, 21:44
Perfil



MiniRentabilizador

Registrado: 03 Ago 2009, 02:40
Mensajes: 146
Nota Re: Ayuda. para que se vayan cambiando las fotos
En la misma página lo ves,
me parece que con este código vale, cambias los nombres de las imágenes o creas imágenes con ese nombre.

JS
Código:
     
/***********************************************
* Ultimate Fade-In Slideshow (v1.51): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
 
var fadeimages2=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages2[0]=["gallery/1.jpg", "", ""] //plain image syntax
fadeimages2[1]=["gallery/2.jpg", "", ""] //image with link syntax
fadeimages2[2]=["gallery/3.jpg", "", ""] //image with link and target syntax
fadeimages2[3]=["gallery/4.jpg", "", ""] //image with link and target syntax

 
var fadebgcolor="white"

////NO need to edit beyond here/////////////
 
var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers
 
var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all
 
function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}
 
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}
 
fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}
 
 
fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}
 
fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}
 
 
fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}




Supongo que este código y listo
Código:
     
          <div style="border: 1px solid rgb(75, 114, 0); margin: 0pt auto; padding: 0pt; background: rgb(75, 114, 0) none repeat scroll 0% 0%; width: 900px; font-size: 12px; font-weight: bold; height: 312px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; position: relative;">

            <div style="border: 1px solid rgb(75, 114, 0); margin: 0pt auto; padding: 0pt; width: 886px; height: 295px; font-size: 12px; font-weight: bold; position: absolute; left: 6px; top: 7px;">

              <p class="dropmenudiv_a">

                <script type="text/javascript">

//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)



new fadeshow(fadeimages2, 886, 295, 0, 3000, 0)

 

</script>

              </p>

            </div>

          </div>


11 Ene 2011, 00:04
Perfil
Moderador

Avatar de Usuario

Registrado: 15 Abr 2008, 20:40
Mensajes: 2158
Ubicación: Uruguay
Nota Re: Ayuda. para que se vayan cambiando las fotos
Ya tienes una respuesta, pero te cuento que todos esos efectos estan hechos con JQuery, basta con buscar plugins de JQuery para imagenes por ejemplo y te vas a encontrar con muchos, tal vez haya alguno te guste más que otro.

_________________
Mi blog
http://www.DanielCostas.com


11 Ene 2011, 00:19
Perfil
MiniRentabilizador

Registrado: 08 Dic 2008, 20:46
Mensajes: 88
Nota Re: Ayuda. para que se vayan cambiando las fotos
Pasate por esta página si no la conoces ya, aqui muestran muchos efectos jquery para implementar en tus webs.

http://flowplayer.org/tools/demos/tabs/ajax.html

Saludos. ;)

PD. En el menu derecho estan todos organizados por categorias.


11 Ene 2011, 12:57
Perfil
MiniRentabilizador

Avatar de Usuario

Registrado: 01 May 2010, 16:54
Mensajes: 107
Nota Re: Ayuda. para que se vayan cambiando las fotos
Si he entendido bien

Tengo que copiar el codigo javacript

Poner el mismo codigo html en el div donde aparecen las foto

Y juntar todo en la misma carpeta con las fotos o tengo que descargar tambien el jquery y ponerlo en la misma carpeta


01 Feb 2011, 20:34
Perfil
MiniRentabilizador

Avatar de Usuario

Registrado: 01 May 2010, 16:54
Mensajes: 107
Nota Re: Ayuda. para que se vayan cambiando las fotos
Aqui les dejo el codigo a ver si me podeis decir donde tengo que poner el codigo y que codigo...
ya que se muy poco de javascript

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--

#apDiv1 {
   position:relative;
   margin:auto;
   width:850px;
   height:950px;
   z-index:1;
   background-color: #FFFFFF;
   top: 55px;
}

#apDiv3 {
   position:absolute;
   width:618px;
   height:283px;
   z-index:2;
   left: 231px;
}

-->
</style>
</head>

<body>
<div id="apDiv1">
 <div id="apDiv3">  AQUI EL DIV DONDE SE IRAN CAMBIANDO LAS IMAGENES </div>


</body>


gracias :mrgreen: :mrgreen:


09 Feb 2011, 03:22
Perfil
Mostrar mensajes previos:  Ordenar por  
Nuevo tema Responder al tema  [ 6 mensajes ] 


¿Quién está conectado?

Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 1 invitado


No puede abrir nuevos temas en este Foro
No puede responder a temas en este Foro
No puede editar sus mensajes en este Foro
No puede borrar sus mensajes en este Foro

Buscar:
Saltar a: