how do you make it so when you click on an image, it enlarges? like here

javascipt, theres many example codes on the net just google it

that uses a peice of javascript i think to make it like that you can find it or steal the sorce

or get dt or veggie to make you one, they are skilled and quick

i knew it was a script

i want the script, too much crap in the source

quote:

---

Originally posted by Absorbation
or get dt or veggie to make you one, they are skilled and quick

---

code:

---

// Image zoom script, used in features section and others

var ie=document.all
var ns6=document.getElementById&&!document.all

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat" && !window.opera)? document.documentElement : document.body
}

function enlarge(which, e, position, imgwidth, imgheight){
if (ie||ns6){
crossobj=document.getElementById? document.getElementById("showimage") : document.all.showimage
if (position=="center"){
pgyoffset=ns6? parseInt(pageYOffset) : parseInt(ietruebody().scrollTop)
horzpos=ns6? pageXOffset+window.innerWidth/2-imgwidth/2 : ietruebody().scrollLeft+ietruebody().clientWidth/2-imgwidth/2
vertpos=ns6? pgyoffset+window.innerHeight/2-imgheight/2 : pgyoffset+ietruebody().clientHeight/2-imgheight/2
if (window.opera && window.innerHeight) //compensate for Opera toolbar
vertpos=pgyoffset+window.innerHeight/2-imgheight/2
vertpos=Math.max(pgyoffset, vertpos)
}
else{
var horzpos=ns6? pageXOffset+e.clientX : ietruebody().scrollLeft+event.clientX - 4
var vertpos=ns6? pageYOffset+e.clientY : ietruebody().scrollTop+event.clientY - 4
}
crossobj.style.left=horzpos+"px"
crossobj.style.top=vertpos+"px"

crossobj.innerHTML='<img alt="Loading image, please wait..." title="Click to close the image" src="'+which+'" onClick="closepreview()">'
crossobj.style.visibility="visible"
return false
}
else //if NOT IE 4+ or NS 6+, simply display image in full browser window
return true
}

function closepreview(){
crossobj.style.visibility="hidden"
}

---

code:

---

onClick="return enlarge('http://files.msgplus.net/images/features/emosounds.jpg',event)"

---

quote:

---

Originally posted by Ezra
* Ezra Runs

---

Can't you just do this in HTML?

code:

---

<img src="blah.png" width="100" height="100">

---

code:

---

<a href="blah.png" title="Click to enlarge"><img src="blah.png" width="100" height="100"></a>

---

actually i found an even better one
http://webdeveloper.earthweb.com/repository/javas.../vergrootglas.html

quote:

---

Originally posted by Concord Dawn
Can't you just do this in HTML?

code:

---

<img src="blah.png" width="100" height="100">

---

That would (I believe) make the picture fit those dimensions, so you could, in theory, just do that, and then make that picture a link to the full sized picture that's sitting on your server. Something like this:

code:

---

<a href="blah.png" title="Click to enlarge"><img src="blah.png" width="100" height="100"></a>

---

IMO, that'd be a lot easier than using the crazy Javascript and it also means that you're not reliant on other people having a Java-enabled browser.

---

yes that will work as it will be just like a normal link. Only the image will open in a new window (or replace the current window) and that is exactly what is not supposed to be happening on the Plus! site.

It all depends on what you mean with "opening an enlarged image". It depends on what you want to do and how you want it to look to the user.

----

btw using

<a href="blah.png" title="Click to enlarge"><img src="blah.png" width="100" height="100"></a>

is a very bad method as you will actually always load the entire image. If the image is a 2MB big picture, the user will still need to wait a very long time, even if you put 100px as the dimensions. The dimensions do not resize the download of the image, the image is still downloaded fully. Only it will be displayed a bit smaller.

Much better is having two images, a thumbnail (100x100 px) to show to your user, and the original big one (1240x1240 px or something whatever) to show when the user clicks the thumbnail

<a href="blahBIG.png" title="Click to enlarge"><img src="blahTHUMBNAIL.png" width="100" height="100"></a>

yeah...use some editor to resize the pic to a seperate file and then link  them together...the one on the plus site seems really advanced....

its VERY bad practice to use the large image as the thumbnail!

One of the reasons for thumbnails is to reduce loading times, and that wont happen if you use the original file.

quote:

---

Originally posted by Veggie
its VERY bad practice to use the large image as the thumbnail!

One of the reasons for thumbnails is to reduce loading times, and that wont happen if you use the original file.

---

that is true but thumbnails are ment to help 56kers.. also resizing the image using html createds really low quality thumbnails.

quote:

---

Originally posted by Millenium_edition

quote:

---

Originally posted by Veggie
its VERY bad practice to use the large image as the thumbnail!

One of the reasons for thumbnails is to reduce loading times, and that wont happen if you use the original file.

---

they both have advantages and disadvantages... the large image will always have the advantage that it loads instantly when you click it, which is a much more pleasant experience for broadband users...

---

quote:

---

Originally posted by CookieRevised
broadband users don't feel a thing when they need to load an extra 500 bytes for a thumbnail in case they both load the thumbnail and afterwards the original picture... It is always a bad practice.

---

So am I....

The 500KB is the "extra" data needed to load for the thumbnails only.


Example 1: without the aid of a thumbnail

blah1.png to blah10.png are 1024x1024x32b images which are 2MB in filesize each.

<a href="blah1.png"><img src="blah1.png" width="100" height="100"></a>
<a href="blah2.png"><img src="blah2.png" width="100" height="100"></a>
etc...

Yes, after a extremely long wait the images are preloaded and when you click on a thumbnail the image appears instantly, but everyone (broadband users as well as 56K'ers) will load ALL the images at once. That is 10x2MB=20MB of data, just to see the thumbnails only!!! Imagine the long wait for 56K'ers...



Example 2: with the aid of a thumbnail

blah1.png to blah10.png are 1024x1024x32b images which are 2MB in filesize each.

blah1THUMB.png to blah10THUMB.png are 100x100x4b images which are 500 bytes in filesize each.

<a href="blah1.png"><img src="blah1THUMB.png" width="100" height="100"></a>
<a href="blah2.png"><img src="blah2THUMB.png" width="100" height="100"></a>
etc...

When the page is loaded, only 10x500 bytes= 5KB is to be loaded. This is both for 56K'ers as well as for broadband user extremely faster then the 20MB needed in the first (bad) example.

When the users wants to view an image in full, he clicks on the 500 byte thumbnail and the original full image is loaded. This is each time 2MB.

In the end, and when the user clicked on every thumbnail (which in practice very rarely occurs) he will have loaded 20MB+5KB in data. That's only 5KB data more then in the first example, yet he had a very quick viewing experience when the page initially loaded.

5KB is also something a broadband user will not feel at all, especially compared to 20MB. And even a 56K'er will not feel the extra 5KB much.

---------

Using the HTML resize elements width and height on big pictures to simulate thumbnails is ALWAYS a bad thing to do. There are no advantages for example 1 at all, it is simply a very bad practice...

Indeed, I agree with Cookie.

If you don't know what programs to use, get IrfanView (free image viewer and editor). It will batch resize your images to create thumbnails.

use photoshop...no probs

You can also make a php script to generate the right thumbnail

we were actually trying to simplify things...i personally find php above my understanding