thumbnail preview?

[maverick]

hey,I have a "view picture" button and when you click it,it goes to the url of the picture.I'm wondering if theres anyway to make a thumbnail of the picture when you hover over the "view picture" button in javascript?i dont want to have to make a small thumbnail of every picture in photoshop,like some people suggested.

thanks for the support

regards

Mav

[tech_support]

You can do something like this:



<script language="javascript">
function resizeImage(id,w,h) {

var resizeimg = document.getElementById(id)
resizeimg.style.height = h
resizeimg.style.width = w

}
</script>


and do whatever you like with it eg.



<img src="something.jpg" id="something" width="100" height="100" onmouseover="resizeImage(this.id,'400','400')">


ID: You will need an ID for the image

Tell me if it doesn't work ;)

[jscheuer1]

Thumbnails are really the way to go. They save so much on bandwidth when loading the page. Many programs can make these smaller images at one pass of a directory. There really is no reason not to use thumbnails and many reason why you should.

[maverick]

yeah i guess i could resize the images with some software,in that case... whats the JS code to display a small thumbnail of the picture when you hover the " view picture" button? regards

Mav

[tech_support]

Try my script ;)

[maverick]

yep I'v tried it and it seems pretty good but once you hover over the image it doesn't resize back and once you hover over it,since alot of my pictures are big it disrupts the whole page.I found this script :

http://jsmadeeasy.com/javascripts/Image%20Effects/image-pop-up-box/index.htm

it kind of seems to be what i;m looking for but it does not show up on firefox,its just for IE.:(

or similar to this:

http://icant.co.uk/articles/imagepreview/

only once you click the preview it open the link on a new windows insted of having to click the text next to camera image.

[tech_support]

It uses this:

resizeImage(your_id,your_height,your_width)

So you can customize it onmouseover or onmouseout or whatever!

[tech_support]

yep I'v tried it and it seems pretty good but once you hover over the image it doesn't resize back and once you hover over it,since alot of my pictures are big it disrupts the whole page.I found this script :

http://jsmadeeasy.com/javascripts/Image%20Effects/image-pop-up-box/index.htm

it kind of seems to be what i;m looking for but it does not show up on firefox,its just for IE.:(

or similar to this:

http://icant.co.uk/articles/imagepreview/

only once you click the preview it open the link on a new windows insted of having to click the text next to camera image.

Here - Try this:

406

I hope it's what your looking for!

[maverick]

sweet,thanks thats exactly what I was looking for :p

[jscheuer1]

Doesn't make it any less of a bad idea. Can you say 'slow page loads'?

[Twey]

How about "badly resized images?" Never trust a browser to do a photo editor's job.

[tech_support]

How about "badly resized images?" Never trust a browser to do a photo editor's job.

Software resizing is of course more better (and cleaner)!

But if they want it then give them it :p

[djr33]

(EDIT: I'm referring to resizing with the browser in this post... it was ambiguous before.)

It also takes memory and will slow things, in addition to taking longer to transfer and wasting bandwidth.

But what tech says does hold true, in some ways.

[Twey]

Not really. This defeats the point of thumbnails. Thumbnails exist so that the user can see at a glance what each image vaguely looks like, without having to wait for all those huge images to load.

[djr33]

Unless they're using that to trick the system to fake preloading.

But, yes, that is generally the idea.


Note: I meant "relying on browser resizing" above... post edited now, if that gave you confusion.