Foros del Web » Programando para Internet » Javascript »

Modificar efecto zoom EasyGallery

Estas en el tema de Modificar efecto zoom EasyGallery en el foro de Javascript en Foros del Web. Buenas. Estoy tratando de modificar el efecto zoom que trae el script EasyGallery (http://wingnut.freitagmorgen.de) para que quede funcional con imágenes individiales y no por las ...
  #1 (permalink)  
Antiguo 28/02/2008, 09:12
 
Fecha de Ingreso: abril-2007
Mensajes: 42
Antigüedad: 17 años
Puntos: 0
Pregunta Modificar efecto zoom EasyGallery

Buenas.
Estoy tratando de modificar el efecto zoom que trae el script EasyGallery (http://wingnut.freitagmorgen.de) para que quede funcional con imágenes individiales y no por las generadas automáticamente. En otras palabras, quiero igualar ese mismo efecto pero para úna sola imagen.


Código:
<script>
var zoom = 4;
var speed = 4;
var real = 0;
var intervalIn;
var divs = document.getElementsByTagName('div');
for (var i=0; i<divs.length; i++)
{
  if (divs[i].id == 'livethumbnail')
  {
	var myimg = divs[i].getElementsByTagName('img')[0];	
	myimg.smallSrc = myimg.getAttribute('src');
	myimg.smallWidth = parseInt(myimg.getAttribute('width'));
	myimg.smallHeight = parseInt(myimg.getAttribute('height'));
	divs[i].onmouseover = scaleIn;
	divs[i].onmouseout = scaleOut;
	if (!myimg.smallWidth)
    {
    <?php
    if (isset($image)){
	  if ($image[0] > $image[1])
	  {
        echo "myimg.smallWidth = $image[0];\n";
        echo "myimg.smallHeight = $image[1];\n";
      }
      else
	  {
        echo "myimg.smallWidth = $image[1];\n";
 	    echo "myimg.smallHeight = $image[0];\n";
      }
	}
    ?>
      real = 0;
    }
    else
    {
  	  real = 1;
    }
  }
}

function scaleIn()
{
  var myimg = this.getElementsByTagName('img')[0];
  this.style.zIndex = 20;
  myimg.src = myimg.smallSrc;
  var count = 0;
  var real = 0;
  intervalIn = window.setInterval(scaleStepIn, 1);
  return false;
  
  function scaleStepIn()
  {
	var widthIn = parseInt(myimg.style['width']);
	var heightIn = parseInt(myimg.style['height']);
	var topIn = parseInt(myimg.style['top']);
	var leftIn = parseInt(myimg.style['left']);
	if(widthIn >= heightIn) {
	  widthIn += speed;
	  heightIn += Math.floor(speed * (3/4));
	  topIn -= (Math.floor(speed * (3/8)));
	  leftIn -= (speed/2);
	}
	else
	{
	  widthIn += Math.floor(speed * (3/4));
	  heightIn += speed;
	  topIn -= (speed/2);
	  leftIn -= (Math.floor(speed * (3/8)));
	}
	myimg.style['width'] = widthIn;
	myimg.style['height'] = heightIn;
	myimg.style['top'] = topIn;
	myimg.style['left'] = leftIn;
	count++;
	if (count >= zoom)
	  window.clearInterval(intervalIn);
  }			
}
function scaleOut()
{
  window.clearInterval(intervalIn);
  var myimg = this.getElementsByTagName('img')[0];
  myimg.src = myimg.smallSrc;
  this.style.zIndex = 10;
  var mydiv = this;
  var interval = window.setInterval(scaleStepOut, 1);
  return false;

  function scaleStepOut()
  {
	var width = parseInt(myimg.style['width']);
	var height = parseInt(myimg.style['height']);
	var top = parseInt(myimg.style['top']);
	var left = parseInt(myimg.style['left']);
	if(width >= height) {
	  width -= speed;
	  height -= Math.floor(speed * (3/4));
  	  if(width < myimg.smallWidth + 4) {
	    myimg.style['width'] = myimg.smallWidth;
	    myimg.style['height'] = myimg.smallHeight;
	    myimg.style['top'] = 0;
	    myimg.style['left'] = 0;
		mydiv.style['zIndex'] = 1;
		window.clearInterval(interval);
	  }
	  else{
	    myimg.style['width'] = width;
	    myimg.style['height'] = height;
	    myimg.style['left'] = left + (speed/2);
	    myimg.style['top'] = top + (Math.floor(speed * (3/8)));
	  }
	}
	else
	{
	  width -= Math.floor(speed * (3/4));
	  height -= speed;
	  if(real==1)
	  {
	    if(width < myimg.smallWidth + 4)
	    {
	      myimg.style['width'] = myimg.smallWidth;
	      myimg.style['height'] = myimg.smallHeight;
		  myimg.style['top'] = 0;
	      myimg.style['left'] = 0;
		  mydiv.style['zIndex'] = 1;
	      window.clearInterval(interval);
		}
		else{
		  myimg.style['width'] = width;
	      myimg.style['height'] = height;
	      myimg.style['top'] = top + (speed/2);
	      myimg.style['left'] = left + (Math.floor(speed * (3/8)));
		}
	  }
	  else
	  {
	  	if(height < myimg.smallWidth + 4)
	    {
	      myimg.style['width'] = myimg.smallHeight;
	      myimg.style['height'] = myimg.smallWidth;
		  myimg.style['top'] = 0;
	      myimg.style['left'] = 0;
		  mydiv.style['zIndex'] = 1;
	      window.clearInterval(interval);
		}
		else{
		  myimg.style['width'] = width;
	      myimg.style['height'] = height;
	      myimg.style['top'] = top + (speed/2);
	      myimg.style['left'] = left + (Math.floor(speed * (3/8)));
		}
	  }
	}	  
  }
}
    </script>
El ejemplo del mismo, lo pueden ver en la página web del script al poner el mouse sobre alguna imagen de la galeria.
Quiero que me ayuden.

Muchas gracias.
  #2 (permalink)  
Antiguo 03/03/2008, 12:25
 
Fecha de Ingreso: abril-2007
Mensajes: 42
Antigüedad: 17 años
Puntos: 0
Re: Modificar efecto zoom EasyGallery

No tendrán algún efecto similar en su biblioteca de códigos?
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 05:49.