Scalable Gallery

gibney.org : Technology : Javascript : Experiments : Scalable Gallery

(Entry Nr. 226, by user 1 | edit)

This is a test of a Gallery Layout. Its under construction and not usable yet.
 
<style>
img.sw_scale
{
 width: 50px;
 height: 50px;
 margin: 15px;
}
</style>
<img class=sw_scale src="http://www.gibney-enterprises.de/images/size00/0001.jpg">
<img class=sw_scale src="http://www.gibney-enterprises.de/images/size00/0002.jpg">
<img class=sw_scale src="http://www.gibney-enterprises.de/images/size00/0003.jpg">
<img class=sw_scale src="http://www.gibney-enterprises.de/images/size00/0004.jpg">
<img class=sw_scale src="http://www.gibney-enterprises.de/images/size00/0005.jpg">
<img class=sw_scale src="http://www.gibney-enterprises.de/images/size00/0006.jpg">
<img class=sw_scale src="http://www.gibney-enterprises.de/images/size00/0007.jpg">
<img class=sw_scale src="http://www.gibney-enterprises.de/images/size00/0008.jpg">
 
<img class=sw_scale src="http://www.gibney-enterprises.de/images/size00/0009.jpg">
<img class=sw_scale src="http://www.gibney-enterprises.de/images/size00/0010.jpg">
<img class=sw_scale src="http://www.gibney-enterprises.de/images/size00/0001.jpg">
<img class=sw_scale src="http://www.gibney-enterprises.de/images/size00/0002.jpg">
<img class=sw_scale src="http://www.gibney-enterprises.de/images/size00/0001.jpg">
<img class=sw_scale src="http://www.gibney-enterprises.de/images/size00/0002.jpg">
<img class=sw_scale src="http://www.gibney-enterprises.de/images/size00/0003.jpg">
<img class=sw_scale src="http://www.gibney-enterprises.de/images/size00/0004.jpg">
 
<img class=sw_scale src="http://www.gibney-enterprises.de/images/size00/0001.jpg">
<img class=sw_scale src="http://www.gibney-enterprises.de/images/size00/0002.jpg">
<img class=sw_scale src="http://www.gibney-enterprises.de/images/size00/0003.jpg">
<img class=sw_scale src="http://www.gibney-enterprises.de/images/size00/0004.jpg">
<img class=sw_scale src="http://www.gibney-enterprises.de/images/size00/0005.jpg">
<img class=sw_scale src="http://www.gibney-enterprises.de/images/size00/0006.jpg">
<img class=sw_scale src="http://www.gibney-enterprises.de/images/size00/0007.jpg">
<img class=sw_scale src="http://www.gibney-enterprises.de/images/size00/0008.jpg">
 
<img class=sw_scale src="http://www.gibney-enterprises.de/images/size00/0009.jpg">
<img class=sw_scale src="http://www.gibney-enterprises.de/images/size00/0010.jpg">
<img class=sw_scale src="http://www.gibney-enterprises.de/images/size00/0001.jpg">
<img class=sw_scale src="http://www.gibney-enterprises.de/images/size00/0002.jpg">
<img class=sw_scale src="http://www.gibney-enterprises.de/images/size00/0001.jpg">
<img class=sw_scale src="http://www.gibney-enterprises.de/images/size00/0002.jpg">
<img class=sw_scale src="http://www.gibney-enterprises.de/images/size00/0003.jpg">
<img class=sw_scale src="http://www.gibney-enterprises.de/images/size00/0004.jpg">

function mg_getElementY(obj)
{
	var curtop = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			curtop += obj.offsetTop
			obj = obj.offsetParent;
		}
	}
	else if (obj.y)
		curtop += obj.y;
	return curtop;

//return document.getElementById(id).offsetTop;
}

function iniImages()
{
 var elements=document.getElementsByTagName("img");
 var exs=new Array();
 var eys=new Array();
 for (var i in elements) 
 {
  if (elements[i].className=="sw_scale")
  {
   exs[i]=mg_getElementX(elements[i]);
   eys[i]=mg_getElementY(elements[i]);
  }
 }

for (var i in elements) 
 {
  if (elements[i].className=="sw_scale")
  {
   elements[i].style.position="absolute";
   elements[i].style.left=exs[i];
   elements[i].style.top=eys[i];

elements[i].left_ori=exs[i];
   elements[i].top_ori=eys[i];

}
}

}

function scaleImages(x,y)
{
 var elements=document.getElementsByTagName("img");
 for (var i in elements) 
 {
  if (elements[i].className=="sw_scale")
  {
   ori_x=elements[i].left_ori;
   ori_y=elements[i].top_ori;

//ex=parseInt(elements[i].style.left);
   //ey=parseInt(elements[i].style.top);

ex=ori_x+25;
  ey=ori_y+25;

absta=(ex-x)*(ex-x)/2+(ey-y)*(ey-y)/2;
 absta=absta/100;
 size=1000/absta;
 if (size>300) size=300;
 if (size<50) size=50;

if (size==50)
   { 
    if(elements[i].isOkAsItIs) continue;
    else elements[i].isOkAsItIs=true;
   }
   else
   {
     elements[i].isOkAsItIs=false;
   }

window.status=ori_x;
   elements[i].style.width=size+"px";
   elements[i].style.height=size+"px";
   elements[i].style.left=ori_x-size/2;
   elements[i].style.top=ori_y-size/2;
   elements[i].style.zIndex=size.toFixed(0);
   //elements[i].style.filter="Alpha(opacity="+(size-30)/100+", finishopacity=0, style=2)"

}
 }
}

function handleMouseMove(e)
{
 mouseX=0;
 mouseY=0;
 OffsetX=0;
 OffsetY=0;

x = isDOM ? (OffsetX + e.clientX - mouseX) : (OffsetX + event.clientX - mouseX);
  y = isDOM ? (OffsetY + e.clientY - mouseY) : (OffsetY + event.clientY - mouseY);

scaleImages(x,y);
 //	dragObj.target.style.width =(getLeft(dragObj)-getLeft(dragObj.target))+'px';
 //	dragObj.target.style.height=(getTop(dragObj)-getTop(dragObj.target))+'px';
	
   return false;
}

var isDOM=document.getElementById&&!document.all;

iniImages();

document.onmousemove=handleMouseMove;

</script>

Create a new entry at this position