PDA

View Full Version : Image auto resizer

Timmeh7
02-07-2006, 10:00 PM
Hello :) first post \o/. I'm a long time vB lover/coder, first time poster here (having purchased my own liscence earlier... no more hanging off friend's forums for me).

Brief outline:

This mod is designed to prevent images horizontally stretching the screen, while giving you the ability to revert them to their full size if you wish.

How does this affect the user

This is a silent script - after its installation, there is no configuration or further modification required.

Lets see it then!

There are two images of the mod in action attached.

What versions will this support?

Defiantly 3.5.3 and 3.5.0 (I believe it was RC2) although it was a slightly different string you needed to search for in the php file, but it's in essentially exactly the same. I imagine that with a little messing around, it'll support earlier versions also.

Installation:

First, download the attached zip file (autoresize.zip). A copy of these instructions are also there.

Upload autoresize.js to /clientscripts/ from your forum directory.

Log into your forum admin panel, go to styles & templates > style manager > edit templates.

Edit the "SHOWTHREAD" template (Under Show Thread templates), find </head>

Just above it, add


<script type="text/javascript" src="clientscript/autoresize.js"></script>

Save it.

Repeat, adding it in the same place to the newthread template.

Now, from your forum directory, open /includes/class_bbcode.php

search for:

return '<img src="' . $link . '" border="0" alt="" />';

Replace it with:

return '<div style= "display: none; background-color: black; color: white" onClick="catflap_toggle_image_size(this); return false">&nbsp;</div><img src="' . $link . '" onLoad="catflap_resize_image(this); return false;" border="0" />';

Give it a test, under different templates with different boundaries, it may well still stretch the table make the image a little/be a little too small.

Should this be the case, open /clientscript/autoresize.js

modify the 100 in

size_available = winwidth - 100;

either up or down (start by moving it up and down in 100's, then when it gets closer to perfect, 10's) until an image that would normally stretch the table fits completely within the forum boundaries. 100 is perfect for the default vbulletin 3.5.3 template.

Enjoy! :) If you have any problems, just give a shout and I'll do my best to put you right. All feedback/suggestions are also welcome.
ThePimp
02-08-2006, 01:40 AM
Wrong forum. This is a "Code Modification".
PcFreak
02-08-2006, 02:23 AM
For me, the forum is the right ones.

Thank you for sharing your js script. :pirate:

PcFreak
apfparadise
02-08-2006, 04:26 AM
Interesting, how about a link to a working version. I can't figure it out from the screenies. Does it open it in a new window as a full, or resizes it in the same window. What's the default state, resized or original? Does it work cross-browser? IE, Opera, and Firefox?
hiiped
02-08-2006, 04:36 AM
Interesting, how about a link to a working version. I can't figure it out from the screenies. ...........Does it open it in a new window ... NO


http://www.timbashford.com/forum/showthread.php?p=7#post7
Timmeh7
02-08-2006, 07:00 AM
Interesting, how about a link to a working version. I can't figure it out from the screenies. Does it open it in a new window as a full, or resizes it in the same window. What's the default state, resized or original? Does it work cross-browser? IE, Opera, and Firefox?

It resizes in the same window (and stretches the table as it goes), the default state is resized - though if you didn't like this, it'd be very easy to swap around, it works in all browsers I've tested including IE, Firefox, Opera, Mozilla etc.

Link is up there :)
c0d3x
02-08-2006, 09:16 AM
unfortunately it doesn't works for me, i run vb 3.5.3, the bar says it reduced the image, but the image has still its original dimensions
3dsoft
02-08-2006, 09:27 AM
the pics (bbcode) don't resize. And it does not show "Click this bar..."
I have got the default layout template 3.5.3 installed.

Edit: works great - I accidently put the code before <head> instead of </head>
stcont
02-08-2006, 10:19 AM
Firefox 1.5.0.1 does not resize image. Note that if u whant use "style.width" u must specify width accoding to spec with dimensions eg not imageref.previousSibling.style.width=size_availabl e; but imageref.previousSibling.style.width=size_availabl e+'px';
Thats fixes problem in FF
c0d3x
02-08-2006, 10:31 AM
width of the table or of the img??
stcont
02-08-2006, 10:37 AM
Any, whenever in script meets style.width ant the end of statement should be added +'px'
3dsoft
02-08-2006, 10:53 AM
Thats fixes problem in FF

that did not fix it in my firefox browser

Edit:
It works, but since I got a fixed width size for my template, the size of the image gets reduced differently depending on the browser.

The image has half of the size in Internet Explorer & Opera than in Firefox 1.5
c0d3x
02-08-2006, 10:53 AM
still don't work :\
Snake
02-08-2006, 11:12 AM
Thankies!
Zia
02-08-2006, 04:07 PM
Sounds nice...a java script...

does that touce sigs ? image hosted on imageshack/photobucket would be re-size too?
instead of klik ..cant it re-size the image to a pre-defined size?
Mr Chad
02-08-2006, 09:13 PM
this work?
c0d3x
02-09-2006, 05:37 AM
yes, until you use firefox 1.5.0.1 :\
Zia
02-09-2006, 12:17 PM
strange..where is Timmeh7 ?
GuaRRand
02-09-2006, 12:48 PM
yes, until you use firefox 1.5.0.1 :\
Workx fine with ff 1.0x - 1.6.x
SnickersTK
02-13-2006, 04:26 PM
it doesn't work with my Firefox, nor my friends :(
Xzyte
02-14-2006, 12:10 PM
Same here, not working with FF 1.5.0.1
The strange thing is that the sample in his forum ( http://www.timbashford.com/forum/showthread.php?p=7#post7 ) works on my FF.
ubblite
02-26-2006, 07:14 PM
Sounds nice...a java script...

does that touce sigs ? image hosted on imageshack/photobucket would be re-size too?
instead of klik ..cant it re-size the image to a pre-defined size?

I'd like to know this too. And the Firefox issue worries me a bit.
wrang
02-27-2006, 06:03 PM
It dosent work for me at all
i run 3.5.4
Kanustep
03-01-2006, 11:23 AM
Don't work here too...Using 3.5.4
Mr Chad
03-04-2006, 07:23 PM
Don't work here too...Using 3.5.4

it works in 3.5.4 in IE, not FF tho.
cloyal
03-05-2006, 08:57 PM
it works in 3.5.4 in IE, not FF tho.


This is the same thing I have, works in 3.5.4 just not FF, IE works great.


Is there a way to address this for FF?
aladinliverpool
03-08-2006, 02:39 PM
This is the same thing I have, works in 3.5.4 just not FF, IE works great.


Is there a way to address this for FF?

ive just installed this as well. maybe ill start reading what happens to users first.
himring
03-18-2006, 11:30 AM
Hi, I modified the script this way, thanks to stcont, and it work perfectly in Firefox and Opera.


function catflap_resize_image (imageref)
{
var winwidth = 0;
var size_available = 700; //to set 700pixel as your max image size
if (self.innerWidth) winwidth = self.innerWidth;
else if (document.documentElement && document.documentElement.clientWidth) winwidth = document.documentElement.clientWidth;
else if (document.body) winwidth = document.body.clientWidth;
//size_available = winwidth - 600;
if (imageref.width > size_available)
{
var pc = Math.round (size_available / imageref.width * 10000) / 100;
imageref.catflap_original_width=imageref.width;
imageref.catflap_shrunk_width=size_available;
imageref.catflap_shrunk_pc=pc;
imageref.catflap_shrunk_status=1;
imageref.style.width=size_available+'px';
if (imageref.previousSibling)
{
imageref.previousSibling.style.width=size_availabl e+'px';
imageref.previousSibling.firstChild.nodeValue="Immagine ridimensionata al " + pc + "% delle sue dimensioni. Clicca qui per vederla nelle dimensioni originali.";
imageref.previousSibling.style.display = 'block';
}
}
}
function catflap_toggle_image_size (imageref)
{
if (imageref.nextSibling)
{
if (imageref.nextSibling.catflap_shrunk_status == 1)
{
imageref.firstChild.nodeValue="Immagine a dimensioni originali. Clicca qui per rimpicciolirla.";
imageref.style.width=imageref.nextSibling.catflap_ original_width+'px';
imageref.nextSibling.style.width=imageref.nextSibl ing.catflap_original_width+'px';
imageref.nextSibling.catflap_shrunk_status=0;
imageref.style.display = 'block';
}
else
{
imageref.firstChild.nodeValue="Immagine ridimensionata al " + imageref.nextSibling.catflap_shrunk_pc + "% delle sue dimensioni. Clicca qui per vederla nelle dimensioni originali.";
imageref.style.width=imageref.nextSibling.catflap_ shrunk_width+'px';
imageref.nextSibling.style.width=imageref.nextSibl ing.catflap_shrunk_width+'px';
imageref.nextSibling.catflap_shrunk_status=1;
imageref.style.display = 'block';
}
}
}


Now I have another problem, if I load a thread with large image under IE, the first time tha script work nice, but if I reload the page it doesn't anymore. For example io con go here:

http://www.sapphireitaly.com/forum/showthread.php?t=13

the image should load resized, try now to hit the reload button (F5) and as you can see the image are not resized any more, and from now on they never been resized any more.

Any suggestion.

P.S.: Sorry of my english :cry:
KeeperPL
03-30-2006, 09:18 PM
Now I have another problem, if I load a thread with large image under IE, the first time tha script work nice, but if I reload the page it doesn't anymore. For example io con go here:

http://www.sapphireitaly.com/forum/showthread.php?t=13

the image should load resized, try now to hit the reload button (F5) and as you can see the image are not resized any more, and from now on they never been resized any more.

I have the same problem :(
robert_2004
04-26-2006, 04:05 AM
adding the <script> to the SHOWTHREAD template didn't work for me. i ended up adding it to the heardinclude template instead.
YUKS
05-28-2006, 10:23 AM
Now it's work for me. Thanks himring.
Nebur
06-12-2006, 12:34 PM
weel thnx for the script, the problem is that it works fine on Firefox but not at IE:

See it : http://www.overpal.com/showthread.php?t=85

Try with firefox and IE.

Using Ie dont work, any idea of whats happening?

There is any other kind of script to autoresize images?
nyunyu
11-17-2007, 11:07 AM
weel thnx for the script, the problem is that it works fine on Firefox but not at IE:

See it : http://www.overpal.com/showthread.php?t=85

Try with firefox and IE.

Using Ie dont work, any idea of whats happening?

There is any other kind of script to autoresize images?

Tried with both firefox and IE..didnt see whats wrong..maybe you use earlier version of IE or you didnt enable the javascrip thingy in its setting..

by the way, anyone can tell me if this hack can be used with 3.5.4?
youradhere4222
11-19-2007, 12:58 AM
This works nicely on 3.6.8, but when you click the button to make it full-size, it does nothing. Great mod, aside from that. [;
nyunyu
11-19-2007, 10:56 AM
This hack is officially being use in my forum. Due to our members who is too lazy to go and upload their images to free image hosting, this hack was extremely popular..

Thanks to the coder for making this wonderful hack.

http://animeproject.nyunyu.info