Home News Forum Articles
  Welcome back Join CF
You are here You are here: Home | Forum | Resize images on page with javascript bookmarklet

You are currently viewing our boards as a guest which gives you limited access to view most of the discussions, articles and other free features. By joining our Virgin Media community you will have full access to all discussions, be able to view and post threads, communicate privately with other members (PM), respond to polls, upload your own images/photos, and access many other special features. Registration is fast, simple and absolutely free so please join our community today.


Welcome to Cable Forum
Go Back   Cable Forum > Computers & IT > General IT Discussion
Register FAQ Community Calendar

Resize images on page with javascript bookmarklet
Reply
 
Thread Tools
Old 26-10-2007, 14:37   #1
Alien
Inactive
 
Alien's Avatar
 
Join Date: Jul 2003
Location: UK
Services: VM Phone, V+, VM 10Mb
Posts: 2,655
Alien is cast in bronzeAlien is cast in bronzeAlien is cast in bronzeAlien is cast in bronze
Alien is cast in bronzeAlien is cast in bronzeAlien is cast in bronzeAlien is cast in bronzeAlien is cast in bronzeAlien is cast in bronzeAlien is cast in bronze
Resize images on page with javascript bookmarklet

I don't really have a head for coding, but I need a bit of javascript modified. I was wondering if perhaps someone might know how to change it to get the desired result.

What I have at the moment is a "bookmarklet" that rescales/shrinks images on a page. It's useful for when people post images that are too large on forums, etc. The 1 problem with it is that it appears to shrink all images on the page, not just the ones that are too large.
Heres what I have.
Code:
javascript:(function(){ function zoomImage(image, amt) { if(image.initialHeight == null) { /* avoid accumulating integer-rounding error */ image.initialHeight=image.height; image.initialWidth=image.width; image.scalingFactor=1; } image.scalingFactor*=amt; image.width=image.scalingFactor*image.initialWidth; image.height=image.scalingFactor*image.initialHeight; } var i,L=document.images.length; for (i=0;i<L;++i) zoomImage(document.images[i],.5); if (!L) alert(%22This page contains no images.%22); })();
The .5 in the code seems to be a scaling factor, which I've experimented with, & .75 seems to be better, as it's not often that posted images are twice as wide as they should be to fit on a page without making the page wider than the window.

I'm guessing the simplest way to do it would be some sort of image width check, & only resize images with a width => a set limit [e.g. 800]. If anyone can help it would be appreciated.
Alien is offline   Reply With Quote
Advertisement
Old 26-10-2007, 14:53   #2
Mr_love_monkey
Inactive
 
Mr_love_monkey's Avatar
 
Join Date: Jun 2003
Location: London way
Age: 49
Services: Sarcasm
Posts: 8,376
Mr_love_monkey has a pair of shiny starsMr_love_monkey has a pair of shiny starsMr_love_monkey has a pair of shiny starsMr_love_monkey has a pair of shiny starsMr_love_monkey has a pair of shiny starsMr_love_monkey has a pair of shiny stars
Mr_love_monkey has a pair of shiny starsMr_love_monkey has a pair of shiny starsMr_love_monkey has a pair of shiny starsMr_love_monkey has a pair of shiny starsMr_love_monkey has a pair of shiny stars
Re: Resize images on page with javascript bookmarklet

try this
Code:
javascript:(function(){ function zoomImage(image, amt) { if(image.initialHeight == null) { /* avoid accumulating integer-rounding error */ image.initialHeight=image.height; image.initialWidth=image.width; image.scalingFactor=1; } image.scalingFactor*=amt; image.width=image.scalingFactor*image.initialWidth; image.height=image.scalingFactor*image.initialHeight; } var i,L=document.images.length; for (i=0;i<L;++i) {if (document.images[i].width>800) zoomImage(document.images[i],.5);} if (!L) alert(%22This page contains no images.%22); })();
if you want a different limit just change the 800

---------- Post added at 13:53 ---------- Previous post was at 13:52 ----------

also if you want height taken into account you change just replace the bit with the width with
Code:
(document.images[i].width>800 && document.images[i].height>400)
Mr_love_monkey is offline   Reply With Quote
Old 26-10-2007, 15:28   #3
Alien
Inactive
 
Alien's Avatar
 
Join Date: Jul 2003
Location: UK
Services: VM Phone, V+, VM 10Mb
Posts: 2,655
Alien is cast in bronzeAlien is cast in bronzeAlien is cast in bronzeAlien is cast in bronze
Alien is cast in bronzeAlien is cast in bronzeAlien is cast in bronzeAlien is cast in bronzeAlien is cast in bronzeAlien is cast in bronzeAlien is cast in bronze
Re: Resize images on page with javascript bookmarklet

Quote:
Originally Posted by Mr_love_monkey View Post
try this
Code:
javascript:(function(){ function zoomImage(image, amt) { if(image.initialHeight == null) { /* avoid accumulating integer-rounding error */ image.initialHeight=image.height; image.initialWidth=image.width; image.scalingFactor=1; } image.scalingFactor*=amt; image.width=image.scalingFactor*image.initialWidth; image.height=image.scalingFactor*image.initialHeight; } var i,L=document.images.length; for (i=0;i<L;++i) {if (document.images[i].width>800) zoomImage(document.images[i],.5);} if (!L) alert(%22This page contains no images.%22); })();
if you want a different limit just change the 800
Cheers dude, much appreciated, greeny headed your way. I've changed the limit to 750, & the scaling factor to .75, & bound it to a mouse gesture. Thanks to you adding the limit, if the scaling factor isn't enough to reduce a really big image, I can just use the mouse gesture again without shrinking images that aren't too big. Much appreciated.

Quote:
Originally Posted by Mr_love_monkey View Post
also if you want height taken into account you change just replace the bit with the width with
Code:
(document.images[i].width>800 && document.images[i].height>400)
Height was never an issue, but thanks anyway.
Alien is offline   Reply With Quote
Old 26-10-2007, 15:34   #4
v0id
[CENSORED]
 
v0id's Avatar
 
Join Date: Apr 2005
Location: Wolverhampton
Age: 47
Posts: 4,218
v0id has a bronzed appealv0id has a bronzed appeal
v0id has a bronzed appealv0id has a bronzed appealv0id has a bronzed appealv0id has a bronzed appealv0id has a bronzed appealv0id has a bronzed appealv0id has a bronzed appealv0id has a bronzed appealv0id has a bronzed appealv0id has a bronzed appealv0id has a bronzed appealv0id has a bronzed appealv0id has a bronzed appealv0id has a bronzed appeal
Re: Resize images on page with javascript bookmarklet

http://www.huddletogether.com/projects/lightbox/


http://5thirtyone.com/archives/549
__________________
Help save the world from loosers

v0id is offline   Reply With Quote
Old 26-10-2007, 15:50   #5
Alien
Inactive
 
Alien's Avatar
 
Join Date: Jul 2003
Location: UK
Services: VM Phone, V+, VM 10Mb
Posts: 2,655
Alien is cast in bronzeAlien is cast in bronzeAlien is cast in bronzeAlien is cast in bronze
Alien is cast in bronzeAlien is cast in bronzeAlien is cast in bronzeAlien is cast in bronzeAlien is cast in bronzeAlien is cast in bronzeAlien is cast in bronze
Re: Resize images on page with javascript bookmarklet

The problem with those is they're meant for the webmaster, not the person viewing the page. The bookmarklet which MLM very helpfully modified can be used on any page by the person viewing the page. I agree that it would be ideal if all sites included some code that detected the size of the window & scaled images accordingly, but this bookmarklet is a good substitute for that.
Alien is offline   Reply With Quote
Reply


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 12:33.


Server: osmium.zmnt.uk
Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2025, vBulletin Solutions Inc.
All Posts and Content are © Cable Forum