| View previous topic :: View next topic |
| Author |
Message |
NeoTA
Idiomatic Nomenclature
Joined: 15 Mar 2004
Posts: 165
|
 Posted: Sun Jul 18, 2004 7:48 pm Post subject: zoomable images for gamelist and art corner forum. |
 |
|
in high resolutions screenshots and sprites can be hard to see. i suggest adding this javascript to the gamelist and possibly the forums (just the art corner if possible), so to also make posting sprites easier.
this javascript is by Jeiel Aranal and is under the Creative Commons License. the version of it shown here is taken directly from Pixelation, so i can verify it works. it must be inlined though -- some browsers don't seem to understand src="filename" attributes for scripts.
EDIT: Clarified. INSTRUCTIONS HERE:
It Works Like:
+ to Zoom Into an image, Click on it.
+ to Zoom Out, hold one of (Ctrl,Shift,Alt) and Click on it.
+ Zoom Factor doesn't go below 100%.
+ Zooming In/Out modifies the Zoom Factor by 1x. .
to enable this behaviour for an image, insert ' class ="zoomable"' in the tag like this: | Code: | | <img src="image.png" class="zoomable"> |
the messageboard "[img]" tag can be modified to produce this by default.
| Code: |
<script language="Javascript" type="text/javascript">
<!--
if ( 0 )
{
window.open('privmsg.php?mode=newpm', '_phpbbprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');;
}
var zoomableClass = "zoomable";
var zoomedClass = "x2";
var zoomables, origWidth, origHeight;
/*
This function initializes the zoomer by putting all zoomable elements into
the zoomables array.
*/
function initZoomer() {
// Find all zoomed elements and put in array zoomed
zoomed = document.getElementsByClass(zoomedClass);
// loop through the zoomed array
for (i=0;i<zoomed.length;i++) {
// calculate what the height and width should be
zoomHeight = zoomed[i].height*2;
zoomWidth = zoomed[i].width*2
// stick these into the zoomed elements height/width property
zoomed[i].width = zoomWidth;
zoomed[i].height = zoomHeight;
}
// Find all zoomable elements and put in array zoomables
zoomables = document.getElementsByClass(zoomableClass);
// create arrays to remember the original height/width of the zoomable elements
origWidth = new Array();
origHeight = new Array();
// loop through zoomables array
for (i=0;i < zoomables.length;i++) {
// Assign the onclick event to zoomImg
if (document.addEventListener)
zoomables[i].addEventListener('click',zoomImg,false);
else
zoomables[i].onclick = zoomImg;
// Remember the original dimensions of the zoomable element
origWidth[i] = zoomables[i].width;
origHeight[i] = zoomables[i].height;
}
}
/*
This function is for assigning images to become a zoomable. Not as elegant as the class method but it might
make script exectution speedier if you wish customize the script. Just go to the last line of the script and
either comment it out or remove it. This will stop the script from running through all the images in the page
looking for the classes. However, doing so will disable zooming by class.
*/
function zoom(e) {
if (document.addEventListener)
e.addEventListener('click',zoomImg,false);
else
e.onclick = zoomImg;
}
/*
This function just increases the image size by 2
*/
function x2(e) {
zoomHeight = e.height*2;
zoomWidth = e.width*2
e.width = zoomWidth;
e.height = zoomHeight;
}
/*
This function handles the mouse clicking. It detects whether any of the zoom-out keys are pressed and
zooms out or in according to this.
*/
function zoomImg(e) {
// Check if the browser supports this method of checking whether the zoom-out keys are pressed
if (e) {
// If any of the zoomout keys are pressed the variables will be assigned true
ctrlKey = e.ctrlKey;
altKey = e.altKey;
shiftKey = e.shiftKey;
}
// If the browser does not support the method, use IE's method
else {
// If any of the zoomout keys are pressed the variables will be assigned true
ctrlKey = event.ctrlKey;
altKey = event.altKey;
shiftKey = event.shiftKey;
}
// Loop an infinite loop. Break inside.
for (i=0;true;i++) {
// 'this' keyword refers to the element that called this function.
// Check if the element that called the function is inside zoomable array.
// If it is, zoom in or out.
if (this == zoomables[i]) {
if (ctrlKey || altKey || shiftKey) zoomOut(i)// If any zoomed out key is pressed, zoom out (duh)
else zoomIn(i) // Else zoom in (again, duh)
break // break infinite loop
}
// Check if 'i' has passed out of zoomables array's range. If it has
// add the element to the zoomables array.
if (i == zoomables.length) {
// this will be the index of the zoomable element in the zoomables array
index = zoomables.length;
// Put the element into zoomables array, remember the original dimensions of this element
zoomables[index] = this;
origWidth[index] = this.width;
origHeight[index] = this.height;
// Go back by one in variable 'i'. In doing so, the element will pass the zoomables array check
// and take appropriate action
i--;
}
}
}
// This function does the actual work of zooming in. It takes in the index of the element in the zoomables array
function zoomIn(i) {
// Calculate the current zoom value by taking the current width and dividing by original width
zoomValue = zoomables[i].width/origWidth[i];
// Increase the zoom value
zoomValue++;
// Zoom image by multiplying original dimensions by zoom value
zoomables[i].width = origWidth[i]*zoomValue;
zoomables[i].height = origHeight[i]*zoomValue;
}
// This function zooms out image. Takes in index of the element in the zoomables array.
function zoomOut(i) {
// Calculate the current zoom value by taking the current width and dividing by original width
zoomValue = zoomables[i].width/origWidth[i];
// Decrease zoom value
zoomValue--;
// Check that the zoom value does not go to zero to prevent images from going below 1x
if (zoomValue != 0) {
zoomables[i].width = origWidth[i]*zoomValue;
zoomables[i].height = origHeight[i]*zoomValue;
}
}
/*
This function finds all the elements with the class name 'name'
*/
document.getElementsByClass = function ( name ) {
var all, ret = new Array();
all = document.body.getElementsByTagName('IMG');
for ( i = 0; i < all.length; i++ ) {
if ( all[i].className.toLowerCase() == name.toLowerCase() )
ret[ret.length] = all[i];
}
return ret;
}
/*
This initializes the script and allows it to find all the images that have class="zoomable".
If you wish, this line can be commented out for faster execution time. However, this will disable zooming by
class="zoomable".
*/
window.onload = initZoomer;
//-->
</script>
|
it needs to be placed inside the <head> section.
if this is implemented i can help with any installation difficulties, as i've installed it in my personal gallery previously.
Last edited by NeoTA on Thu Jul 22, 2004 8:00 pm; edited 4 times in total |
|
| Back to top |
|
 |
Velduanga
I heard there were bagels here...
Joined: 25 Jul 2003
Posts: 112
Location: A town away from White Owl, I kid you not, unless he moved.
|
| Posted: Sun Jul 18, 2004 7:56 pm Post subject: |
|
|
Wouldnt it be easier to download the image you want and zoom in on it in MSPaint?
_________________
If you hit a plane with the soccer, could you afford to fix it? - Shaolin Soccer
"If it's worth shooting, it's worth shooting twice"-Tom Clancy
 |
|
| Back to top |
|
|
NeoTA
Idiomatic Nomenclature
Joined: 15 Mar 2004
Posts: 165
|
| Posted: Sun Jul 18, 2004 8:02 pm Post subject: |
|
|
| go to pixelation and try it out, then tell me that again if you still believe it. |
|
| Back to top |
|
|
Inferior Minion
Metric Ruler
Joined: 03 Jan 2003
Posts: 741
Location: Santa Barbara, CA
|
| Posted: Mon Jul 19, 2004 6:57 am Post subject: |
|
|
That shouldn't be too hard to implement. Unless someone feels this shouldn't be added, I'll see if I can get it working after I get home from work this evening.
_________________
|
|
| Back to top |
|
|
NeoTA
Idiomatic Nomenclature
Joined: 15 Mar 2004
Posts: 165
|
| Posted: Wed Jul 21, 2004 5:48 pm Post subject: |
|
|
hello 
what is going on regarding the installation of this script? is assistance required?
I just tried saving a forum page in full(inc images) and making the logo zoomable, and it was quite straightforward. |
|
| Back to top |
|
|
Bob the Hamster
OHRRPGCE Developer
Joined: 22 Feb 2003
Posts: 2526
Location: Hamster Republic (Southern California Enclave)
|
| Posted: Wed Jul 21, 2004 6:56 pm Post subject: zoooom |
|
|
just tried out that feature on http://pixelation.cjb.net/
that is seven kinds of awesome, including three previous underscribed by science. |
|
| Back to top |
|
|
Inferior Minion
Metric Ruler
Joined: 03 Jan 2003
Posts: 741
Location: Santa Barbara, CA
|
| Posted: Thu Jul 22, 2004 6:25 am Post subject: |
|
|
Oh...sorry....I did implement it...just didn't post about it.... 
Try clicking on my signature
_________________
|
|
| Back to top |
|
|
NeoTA
Idiomatic Nomenclature
Joined: 15 Mar 2004
Posts: 165
|
| Posted: Thu Jul 22, 2004 6:45 am Post subject: |
|
|
testing..
SWISH!
woohoo, thanks!! |
|
| Back to top |
|
|
rpgspotKahn
Lets see...
Joined: 16 May 2004
Posts: 720
Location: South Africa
|
| Posted: Thu Jul 22, 2004 6:48 am Post subject: |
|
|
HOW DO I MAKE IT SMALLER!!! Ahhh! The giant fish guy! Save me!
_________________
2nd Edition out now! |
|
| Back to top |
|
|
jabbercat
Composer
Joined: 04 Sep 2003
Posts: 823
Location: Oxford
|
| Posted: Thu Jul 22, 2004 7:40 am Post subject: |
|
|
Please implement a control (Like shift + left click) to zoom out. 
Beautiful script!  |
|
| Back to top |
|
|
Inferior Minion
Metric Ruler
Joined: 03 Jan 2003
Posts: 741
Location: Santa Barbara, CA
|
| Posted: Thu Jul 22, 2004 9:44 am Post subject: Re: zoomable images for gamelist and art corner forum. |
|
|
| NeoTA wrote: |
it works like:
to zoom into an image, click on it.
to zoom out, hold one of (ctrl,shift,alt) and click on it. zoom
doesn't go below 100%.
zooming in/out modifies the zoom factor by 100%.
|
It's already there!!
_________________
|
|
| Back to top |
|
|
Me
HI.
Joined: 30 Mar 2003
Posts: 870
Location: MY CUSTOM TITLE CAME BACK
|
| Posted: Thu Jul 22, 2004 12:38 pm Post subject: |
|
|
I like this. No more saving pictures tiny sprites, zooming in, and deleting, just to comment on them. No more creating resized versions of EVERYTHING. Yayness.
_________________
UP DOWN UP DOWN LEFT LEFT RIGHT RIGHT A B START |
|
| Back to top |
|
|
jabbercat
Composer
Joined: 04 Sep 2003
Posts: 823
Location: Oxford
|
| Posted: Thu Jul 22, 2004 1:24 pm Post subject: |
|
|
Wonderful script! I can now zoom alot. All I need now are things to zoom in on !
PS: That post was a hint for Mr.Kahn . |
|
| Back to top |
|
|
Ysoft_Entertainment
VB Programmer
Joined: 23 Sep 2003
Posts: 810
Location: Wherever There is a good game.
|
| Posted: Thu Jul 22, 2004 7:16 pm Post subject: |
|
|
yo guys, you might want to set the limit on how much the picture is to be zoomed in, because I tried it, made the picture so big, that it disappeared and the entire post was messed up, but when I zoomed out, it went the post went back to normal.
Just a suggestion ignore it at will
_________________
Try my OHR exporter/importer.
OHRGFX
Striving to become better pixel artist then Fenrir Lunaris. Unfortunately the laziness gets in the way of my goals. |
|
| Back to top |
|
|
TMC
On the Verge of Insanity
Joined: 05 Apr 2003
Posts: 3240
Location: Matakana
|
| Posted: Thu Jul 22, 2004 9:59 pm Post subject: |
|
|
Wow! Amazingly simple but useful function! Thanks, Neo, IM!
That's strange, Ysoft? I try zooming in an extreme amount, and I never had any problems.
_________________
"It is so great it is insanely great." |
|
| Back to top |
|
|
|
FAQ
Search
Memberlist
Usergroups
Register
Profile
Log in to check your private messages
Log in
