Shoutbox

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

---

sure

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)"

---

Stolen from the msgplus website

* Ezra Runs

quote:

---

Originally posted by Ezra
* Ezra Runs

---

lol, thnx

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.

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.

---

that will work....i have tried it

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>