PDA

View Full Version : Expanding Images

glenmac
04-04-2005, 05:21 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> grow test</title>
<meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=UTF-8">
<script language="JavaScript" type="text/javascript">
var img_width = 100;
var timer = null;

function imageGrow(imgid)
{
var growImg = document.getElementById(imgid).style;
growImg.width= img_width+'px';

if(img_width < 500)
{
img_width += 10;
timer = setTimeout('imageGrow("' + imgid + '")', 60);
}
else
{
clearTimeout(timer);
document.getElementById('contrlD').style.display = "block";
document.getElementById('contrl').style.display = "none";
}
}

function imageShrink(imgid)
{
var growImg = document.getElementById(imgid).style;
growImg.width= img_width+'px';

if(img_width > 100)
{
img_width-= 10;
timer = setTimeout('imageShrink("' + imgid + '")', 60);
}
else
{
clearTimeout(timer);
document.getElementById('contrl').style.display = "block";
document.getElementById('contrlD').style.display = "none";
}

}
function changeSize(imgid)
{
if(img_width <= 100)
{
imageGrow(imgid)
}
else
{
imageShrink(imgid)
}
}

</script>

</head>
<body>
<div id = "container" style = "text-align:center; ">
<div id = "contrl">Click image to enlarge it</div>
<div id = "contrlD" style = "display:none;">Click image again to restore it </div>
<img src = "0.jpg" id = "imageResize" name = "imageResize" onclick="changeSize(this.id)" />
<img src = "1.jpg" id = "imageResize1" onclick="changeSize(this.id)" />
<img src = "test.jpg" width = "100" id = "imageResize2" onclick="changeSize(this.id)" />
<img src = "snow.jpg" width = "100" id = "imageResize3" onclick="changeSize(this.id)" />

<div id = "content" style = "position:absolute; top:400px; left:10px; background:blue; width:100%;">
Content of page here!!
</div>
</div>
</body></html>

I hope this is usefull to someone. Page validates and works in IE and FF.
royall
04-04-2005, 09:22 PM
I like it, but the picture quality weakens when the picture expands (which is unavoidable), and you should of said we had to create picture 1.jpg, 0.jpg, test.jpg, and snow.jpg. Besides that its great:thumbsup: , but I cant figure out what it would be great for....
the jasong
04-04-2005, 10:49 PM
It could be used for expanding buttons when the mouse hovers over them I guess?
glenmac
04-04-2005, 11:20 PM
The picture quality doesn't necesarily have to degrade. If you use an original image the size of the expanded size, only provide the width you want for the smaller image like I've done with test.jpg and snow.jpg. In my test page I used and image that was 500x300 and when it expands it is the right size, that's why I only play with the width(letting the image stay in proportion). I'm going to use this code to provide thumbnails and let the user decide if they want to see the original image. Something like this;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> grow test</title>
<meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=UTF-8">
<script language="JavaScript" type="text/javascript">
var img_width = 100;
var timer = null;

function imageGrow(imgid)
{
var growImg = document.getElementById(imgid).style;
growImg.width= img_width+'px';

if(img_width < 500)
{
img_width += 10;
timer = setTimeout('imageGrow("' + imgid + '")', 60);
}
else
{
clearTimeout(timer);
document.getElementById('contrlD').style.display = "block";
document.getElementById('contrl').style.display = "none";
}
}

function imageShrink(imgid)
{
var growImg = document.getElementById(imgid).style;
growImg.width= img_width+'px';

if(img_width > 100)
{
img_width-= 10;
timer = setTimeout('imageShrink("' + imgid + '")', 60);
}
else
{
clearTimeout(timer);
document.getElementById('contrl').style.display = "block";
document.getElementById('contrlD').style.display = "none";
}

}
function changeSize(imgid)
{
if(img_width <= 100)
{
imageGrow(imgid)
}
else
{
imageShrink(imgid)
}
}

</script>

</head>
<body>
<div id = "container" style = "display:inline; ">
<div id = "contrl">Click image to enlarge it</div>
<div id = "contrlD" style = "display:none;">Click image again to restore it </div>
<div class = "pics" style = "position:relative; z-index:2;"><img src = "a.jpg" id = "imageResize" width = "100" name = "imageResize" onclick="changeSize(this.id)" alt = "a"/>
</div>
<div class = "pics" style = "position:relative; z-index:2;"><img src = "b.jpg" id = "imageResize1" width = "100" onclick="changeSize(this.id)" alt = "b"/>
</div>
<div class = "pics" style = "position:relative; z-index:2;"><img src = "c.jpg" id = "imageResize2" width = "100" onclick="changeSize(this.id)" alt = "c"/>
</div>
<div class = "pics" style = "position:relative; z-index:2;"><img src = "d.jpg" id = "imageResize3" width = "100" onclick="changeSize(this.id)" alt = "d"/>
</div>
<div id = "content" style = "position:absolute; top:40px; left:110px; background:blue; width:90%; z-index:1;">
Content of page here!!
</div>
</div>
</body></html>
Of course I will provide a css stylesheet. the styles are shown just for this forum.
hemebond
04-05-2005, 02:29 AM
Um, it doesn't work very well and it definitely doesn't validate (your example at least). I click on things, and yes, they will eventually expand to full size; but if I click on another image while one is expanding, the whole thing goes mental. After an image is expanded, the next will jump to full-size then shrink.
glenmac
04-05-2005, 03:07 AM
Hmm guess you broke it! Thanks, I'm still working on bugs.
hemebond
04-05-2005, 03:35 AM
Here's mine<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>56111</title>
<meta name="description" content="Gradual image enlarge/shrink toggle on click">

<style type="text/css">
#images
{
list-style:none;
padding:0;
}
#images img
{
width:100px;
border:1px solid #000;
}
</style>
</head>
<body>
<p>
Click an image to enlarge.
</p>

<ul id="images">
<li><img src="/images/1.jpeg" alt="Image 1"></li>
<li><img src="/images/2.jpeg" alt="Image 2"></li>
<li><img src="/images/3.jpeg" alt="Image 3"></li>
<li><img src="/images/4.jpeg" alt="Image 4"></li>
</ul>

<script type="text/javascript">
var resizeRate = 26;

var images = document.getElementById('images').getElementsByTagName('img');

for(var i = 0; i < images.length; i++)
{
images[i].addEventListener('click', function(){this.changeState()}, true);
images[i].changeState = changeState;
images[i].resize = resize;
images[i].state = 'min';
images[i].originalWidth = images[i].width;
}

function changeState(state)
{
if(state == null)
{
switch(this.state)
{
case 'shrink':
{
this.state = 'min';
break;
}
case 'grow':
{
this.state = 'max';
break;
}
case 'max':
{
this.state = 'shrink';
break;
}
default:
{
this.state = 'grow';
break;
}
}
}
else
{
this.state = state;
}
this.resize();
}

function resize()
{

switch(this.state)
{
case 'grow':
{
this.style.width = (this.width + resizeRate) + 'px';
if(this.width >= this.naturalWidth)
{
this.style.width = this.naturalWidth + 'px';
this.changeState('max');
}
break;
}
case 'shrink':
{
this.style.width = (this.width - resizeRate) + 'px';
if(this.width <= this.originalWidth)
{
this.style.width = this.originalWidth + 'px';
this.changeState('min');
}
break;
}
}

if(this.state == 'grow' || this.state == 'shrink')
{
var thisObj = this;
setTimeout(function(){thisObj.resize()}, 50);
}
}
</script>
</body>
</html>
glenmac
04-05-2005, 05:15 AM
line:38
Error:Object doesn't support this property or method
Got the above error with Internet Explorer 6.
I tried it with FF and only the last 2 images expanded.
I used large images and couldn't control their size. Nice looking code though! :thumbsup:
hemebond
04-05-2005, 05:59 AM
Got the above error with Internet Explorer 6.IE does not support standards. In this case, the addEventListener method.I tried it with FF and only the last 2 images expanded.Any errors? What size images? Does nothing happen at all?I used large images and couldn't control their size.Control how? Initial size? Enlarged size? How big were the images?
glenmac
04-05-2005, 06:17 AM
Large images were 900 px wide.
No error messages but nothing happens when I click the first 2 images ( mind you I don't have all the extentions for FF. I have script debugging set up for IE). I need to control the expanded size.
I know IE isn't the greatest browser but it is the most used so we have to program for it.
hemebond
04-05-2005, 07:19 AM
No error messages but nothing happens when I click the first 2 images ( mind you I don't have all the extentions for FF. I have script debugging set up for IE).That's odd. There must be something about those two images that's throwing it off. Are they all 900px wide?I need to control the expanded size.Well that's easy. Just change the size comparison from naturalWidth to your own value.I know IE isn't the greatest browser but it is the most used so we have to program for it.Who's we? I'm not giving IE users anything more than the basics, they don't deserve it. Besides, for anyone that cares about IE, it's fairly easy to add in the functionality for it. In fact, I might try now.
hemebond
04-05-2005, 08:00 AM
Well, it works almost the same as good browsers<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>56111</title>
<meta name="description" content="Gradual image enlarge/shrink toggle on click">

<style type="text/css">
#images
{
list-style:none;
padding:0;
}
#images img
{
width:100px;
border:1px solid #000;
}
</style>
</head>
<body>
<p>
Click an image to enlarge.
</p>

<ul id="images">
<li><img src="/images/1.jpeg" alt="Image 1"></li>
<li><img src="/images/2.jpeg" alt="Image 2"></li>
<li><img src="/images/3.jpeg" alt="Image 3"></li>
<li><img src="/images/4.jpeg" alt="Image 4"></li>
</ul>

<script type="text/javascript">
var resizeRate = 26;

var images = document.getElementById('images').getElementsByTagName('img');

for(var i = 0; i < images.length; i++)
{
// IE fix
if(document.addEventListener)
{
images[i].addEventListener('click', function(){this.changeState()}, true);
}
else
{
images[i].attachEvent('onclick', function(){this.changeState()});
}
images[i].changeState = changeState;
images[i].resize = resize;
images[i].state = 'min';
images[i].originalWidth = images[i].width;

// IE fix
if(images[i].naturalWidth == null)
{
images[i].naturalWidth = '500';
}
}

function changeState(state)
{
// IE fix
if(this.style == null)
{
thisObj = window.event.srcElement;
}
else
{
thisObj = this;
}

if(state == null)
{
switch(thisObj.state)
{
case 'shrink':
{
thisObj.state = 'min';
break;
}
case 'grow':
{
thisObj.state = 'max';
break;
}
case 'max':
{
thisObj.state = 'shrink';
break;
}
default:
{
thisObj.state = 'grow';
break;
}
}
}
else
{
thisObj.state = state;
}
thisObj.resize();
}

function resize()
{
// IE fix
if(this.style == null)
{
thisObj = window.event.srcElement;
}
else
{
thisObj = this;
}

switch(thisObj.state)
{
case 'grow':
{
thisObj.style.width = (thisObj.width + resizeRate) + 'px';
if(thisObj.width >= thisObj.naturalWidth)
{
thisObj.style.width = thisObj.naturalWidth + 'px';
thisObj.changeState('max');
}
break;
}
case 'shrink':
{
thisObj.style.width = (thisObj.width - resizeRate) + 'px';
if(thisObj.width <= thisObj.originalWidth)
{
thisObj.style.width = thisObj.originalWidth + 'px';
thisObj.changeState('min');
}
break;
}
}

if(thisObj.state == 'grow' || thisObj.state == 'shrink')
{
setTimeout(function(){thisObj.resize()}, 50);
}
}
</script>
</body>
</html>Oh, this doesn't work at all in Opera btw. Not even an error. GG Opera.
glenmac
04-05-2005, 08:12 AM
Excelent !!!
hemebond you da man.
shlagish
05-01-2005, 05:43 AM
Have you tried it with an image whose width is smaller than the one you give it at first?

I found something fun. If you make an image expand but you click on it again before it's finished, it stops at that size :) Same for when it's shrinking.
Garadon
05-01-2005, 02:53 PM
I would advise against using such a thing to thumbnails.

1. if you had like 50 thumbnailed pictures each of like 50kb the total download
would be 2500kb per view of that page.

2. expanding and image in a thumbnailed setting is bound to make some odd
movements in the other images.
hemebond
05-01-2005, 11:20 PM
I found something fun. If you make an image expand but you click on it again before it's finished, it stops at that size :) Same for when it's shrinking.That's what it's suppose to do.
shlagish
05-02-2005, 11:50 PM
Oh my dog, I am so mixed up.