IE8 Smooths images again!

[Mathias]

Gaaahhhh, Windows updated with the new version of Internet Explorer - IE8 and we're back to smoothing images that are blown up in the browser's window. Why, Bill! Why.

So, images we click here in Pixelation are now bilinear smoothed again. Pointless. The new "Adaptive Zoom" feature is great, but along with it is a their stupid smoothing algorhythm. Haven't found a workaround yet. Have you? Besides another browser obviously.

[Mathias]

Uncovered another "bug" - text windows, such as the one I'm typing in now, totally tweak out once you have enough lines to make a vertical scroll bar appear when just clicking in and moving the cursor with arrow keys, rendering it unusable. Anyone else experiencing this?

Time to test out Chrome finally. Boy, it's a fast browser!

[Atnas]

Chrome, unfortunately, also smooths.

[Mathias]

aarrrgh, I thought it didn't . . . alrighty then

[Atnas]

I'm hoping Google listens to peoples' pleas. Although, it's open source, so all it needs is a programmer who is in touch with the agony of the pixel artists... It's such a good browser, and you can change mostly everything else about it, I don't see why you shouldn't be able to change the filters.

[Mathias]

amen

[crab2selout.png]

Crap, shut down my browser and lost my post. Um, right, what you all need to do is download Opera. You cna turn off interpolation by typing opera:config into the address bar like in firefox.

I'm still looking for an imagezoom extension. There's somethign at thsi site, but it hasn't been updated in a while, and isn't zooming in at 100%,200%,300% levels. I'm gonna try peekign at the code.
http://userjs.org/scripts/browser/enhancements/zoom-image

[Crow]

Crap, shut down my browser and lost my post. Um, right, what you all need to do is download Opera. You cna turn off interpolation by typing opera:config into the address bar like in firefox.

I'm still looking for an imagezoom extension. There's somethign at thsi site, but it hasn't been updated in a while, and isn't zooming in at 100%,200%,300% levels. I'm gonna try peekign at the code.
http://userjs.org/scripts/browser/enhancements/zoom-image

The script itself works pretty well. I can try fiddling with it to get more accurate zoom levels if you wish.

Edit: Well, the script also seems to fuck with images in general pretty much. New images dont load anymore. I'll see if I can fix that.

Editē: Here goes the fixed script. Can't go any smaller than 1x, increased the zoom step by 1 each time you click, meaning it goes from 1x to 2x to 3x and so on:

Code: [Select]

// ==UserScript==
// @name Zoom Image
// @author Vasil Dinkov
// @namespace http://www.smartmenus.org/
// @version 1.0.3
// @description  Allows zooming of individual images using a toolbar.
// @ujs:category browser: enhancements
// @ujs:published 2005-11-04 11:37
// @ujs:modified 2005-11-04 11:37
// @ujs:documentation http://userjs.org/scripts/browser/enhancements/zoom-image
// @ujs:download http://userjs.org/scripts/download/browser/enhancements/zoom-image.user.js
// @ujs:download.gm http://userjs.org/scripts/download/browser/enhancements/zoom-image.user.js
// ==/UserScript==


/*
This script is granted to the Public Domain.
*/

(function () {

// === User Configuration ===
var menuShowTimeOut    = 0.5; // seconds
var minimalImageWidth  = 32;  // minimal width of the images the menu is activated for
var minimalImageHeight = 32;  // minimal height of the images the menu is activated for


// === Code ===
var t = 0;
var menuBuilt = 0;
var menu, image, pixelLeft, pixelTop, menuBuilt;

function handler(o) {
if (menuBuilt && menu.style.visibility == "visible") {
return;
}
 
image = o;
if (!image.original_width) {
image.original_width  = o.clientWidth;
image.original_height = o.clientHeight;
    image.zoomlevel       = 1;
}
 
pixelLeft     = o.offsetLeft;
pixelTop      = o.offsetTop;
var oParent   = o.offsetParent;
while (oParent) {
pixelLeft += oParent.offsetLeft;
pixelTop  += oParent.offsetTop;
oParent    = oParent.offsetParent;
}
 
// bugs in Opera 8.0
if (window.opera && window.opera.version() == "8.0" && o.style.display != "block") {
pixelLeft += 3;
pixelTop  += 3;
}
 
if (pixelLeft < window.pageXOffset)
pixelLeft = window.pageXOffset;
   
if (pixelTop < window.pageYOffset)
pixelTop = window.pageYOffset;
   
t = setTimeout(showMenu, menuShowTimeOut * 1000);
}

function showMenu() {
if (!menuBuilt)
buildMenu();
 
if (!menuBuilt)
return;
 
menu.style.top        = pixelTop  + "px";
menu.style.left       = pixelLeft + "px";
menu.style.visibility = "visible";
}

function hideMenu(e) {
if (t) {
clearTimeout(t);
t = 0;
}
 
if (!menuBuilt)
return;
 
var relatedTarget = e ? e.relatedTarget : 0;
if (relatedTarget && (menu == relatedTarget || menu == relatedTarget.parentNode))
return;
 
menu.style.visibility = "hidden";
}

function outOfMenu(e) {
var relatedTarget = e.relatedTarget;
if (relatedTarget && relatedTarget != image)
hideMenu(e);
}

function buildMenu() {
var buttonsHolder, zoom, plus, minus, close;
if (window.opera && document.body.all.length == 5)
return;
 
menu = document.createElement("div");
menu.setAttribute("style",
"position:        absolute;" +
"background:      #F5EBBC;" +
"border:          1px solid;" +
"border-color:    #ffffdd #857A4A #857A4A #ffffdd;" +
"box-sizing:      content-box;" +
"-moz-box-sizing: content-box;" +
"width:           84px;" +
"height:          17px;" +
"padding:         0;" +
"margin:          0;" +
"z-index:         10000000;"
);

buttonsHolder = document.createElement("div");
buttonsHolder.setAttribute("style",
"position:        absolute;" +
"top:             1px;" +
"left:            33px;" +
"border:          1px solid;" +
"border-color:    #C1B683 #ffffdd #ffffdd #C1B683;" +
"box-sizing:      content-box;" +
"-moz-box-sizing: content-box;" +
"width:           30px;" +
"height:          13px;" +
"padding:         0;" +
"margin:          0;"
);

zoom     = document.createElement("img");
zoom.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAHCAMAAADK6xa6AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAGUExURU1Mdv///8VIzGcAAAACdFJOU/8A5bcwSgAAADFJREFUeNpiYAABRiyAAU5gkwFjBjgJIkAISRJBguUR5qHLMDDilGGAGw6zB4IAAgwALq0AeHVzkmAAAAAASUVORK5CYII=";
zoom.setAttribute("style",
"position: absolute;" +
"top:      5px;" +
"left:     4px;" +
"border:   none;" +
"width:    25px;" +
"height:   7px;" +
"padding:  0;" +
"margin:   0;"
);

plus       = document.createElement("img");
plus.title = "Zoom In";
plus.src   = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAJCAMAAADTuiYfAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAGUExURU1Mdv///8VIzGcAAAACdFJOU/8A5bcwSgAAABdJREFUeNpiYEQABuJIBgggWj0cAAQYABKQAFc7IMbiAAAAAElFTkSuQmCC";
plus.setAttribute("style",
"position: absolute;" +
"top:      2px;" +
"left:     34px;" +
"border:   1px solid;" +
"width:    11px;" +
"height:   9px;" +
"padding:  1px;" +
"margin:   0;"
);
 
plus.style.borderColor = "#ffffdd #C1B683 #C1B683 #ffffdd"; // must be set this way because of a Opera bug

minus       = document.createElement("img");
minus.title = "Zoom Out";
minus.src   = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAJCAMAAADTuiYfAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAGUExURU1Mdv///8VIzGcAAAACdFJOU/8A5bcwSgAAABdJREFUeNpiYEQABuLYDBBAtHo4AAgwABPUAF3wOWutAAAAAElFTkSuQmCC";
minus.setAttribute("style",
"position: absolute;" +
"top:      2px;" +
"left:     49px;" +
"border:   1px solid;" +
"width:    11px;" +
"height:   9px;" +
"padding:  1px;" +
"margin:   0;"
);
 
minus.style.borderColor = "#ffffdd #C1B683 #C1B683 #ffffdd"; // must be set this way because of a Opera bug

close       = document.createElement("img");
close.title = "Original Size of the Image";
close.src   = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAMAAADXT/YiAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAGUExURU1Mdv///8VIzGcAAAACdFJOU/8A5bcwSgAAAB9JREFUeNpiYIQBBmQWAzLFAJOFEwyoClD1QgFAgAEADQIASckhCLMAAAAASUVORK5CYII=";
close.setAttribute("style",
"position: absolute;" +
"top:      2px;" +
"left:     68px;" +
"border:   1px solid;" +
"width:    9px;" +
"height:   9px;" +
"padding:  1px;" +
"margin:   0;"
);
 
close.style.borderColor = "#ffffdd #C1B683 #C1B683 #ffffdd"; // must be set this way because of a Opera bug

plus.addEventListener("mouseover",function(){this.style.borderColor="#4d4c76"},false);
plus.addEventListener("mousedown",function(){this.style.borderColor="#000";this.style.background="#eee4a5"},false);
plus.addEventListener("mouseup",function(){this.style.borderColor="#4d4c76";this.style.background="transparent"},false);
plus.addEventListener("mouseout",function(){this.style.borderColor="#ffffdd #C1B683 #C1B683 #ffffdd";this.style.background="transparent"},false);
plus.addEventListener("click", function() {
                                   var width, height;
                                   width  = image.original_width;
                                   height = image.original_height;
                                   
                                   image.zoomlevel   += 1;
                                   image.style.width  = width  * image.zoomlevel + "px";
                                   image.style.height = height * image.zoomlevel + "px";
                                   
                                   hideMenu();
                                 }, false);

minus.addEventListener("mouseover",function(){this.style.borderColor="#4d4c76"},false);
minus.addEventListener("mousedown",function(){this.style.borderColor="#000";this.style.background="#eee4a5"},false);
minus.addEventListener("mouseup",function(){this.style.borderColor="#4d4c76";this.style.background="transparent"},false);
minus.addEventListener("mouseout",function(){this.style.borderColor="#ffffdd #C1B683 #C1B683 #ffffdd";this.style.background="transparent"},false);
minus.addEventListener("click", function() {
                                   var width, height;
                                   width  = image.original_width;
                                   height = image.original_height;
                                   
                                   image.zoomlevel    = (image.zoomlevel - 1 > 0) ? image.zoomlevel - 1 : 1;
                                   image.style.width  = width  * image.zoomlevel + "px";
                                   image.style.height = height * image.zoomlevel + "px";
                                   
                                   hideMenu();
                                 }, false);

close.addEventListener("mouseover",function(){this.style.borderColor="#4d4c76"},false);
close.addEventListener("mousedown",function(){this.style.borderColor="#000";this.style.background="#eee4a5"},false);
close.addEventListener("mouseup",function(){this.style.borderColor="#4d4c76";this.style.background="transparent"},false);
close.addEventListener("mouseout",function(){this.style.borderColor="#ffffdd #C1B683 #C1B683 #ffffdd";this.style.background="transparent"},false);
close.addEventListener("click", function() {
                                   var width, height;
                                   width  = image.original_width;
                                   height = image.original_height;
                                   
                                   image.style.width  = width  + "px";
                                   image.style.height = height + "px";
                                   
                                   hideMenu();
                                 }, false);

menu.addEventListener("mouseout",outOfMenu,false);

menu.appendChild(buttonsHolder);
menu.appendChild(zoom);
menu.appendChild(plus);
menu.appendChild(minus);
menu.appendChild(close);
document.body.appendChild(menu);
 
menuBuilt = 1;
}

for (var i = 0; i < document.images.length; i++) {
var img = document.images[i];
if (img.clientWidth >= minimalImageWidth && img.clientHeight >= minimalImageHeight) {
img.addEventListener("mouseover", function() { handler(this) }, false);
img.addEventListener("mouseout" , hideMenu, false);
}
}

})();
See the site linked by crab2selout for information on how to install/use this.

[crab2selout.png]

Well done, Crispy. Works nicely from what I've seen, and it's definitely nice to have the option of zooming on individual images instead of just the entire page.

[Peach]

thanks crow for posting that js code, I was going to find or write something similar for my online portfolio.

a pity both chrome and ie8 are using that resampling, I'm wondering what the devels had in mind. Is it that useful?

[Gil]

Don't forget Firefox does it too. The only browser that doesn't interpolate now is Opera, but I really don't like it, so I'm screwed.

Still using Firefox 2, but I'm totally wanting the new features FF3 has.

[Colonel Mustard]

Don't forget Firefox does it too. The only browser that doesn't interpolate now is Opera, but I really don't like it, so I'm screwed.

Still using Firefox 2, but I'm totally wanting the new features FF3 has.

There's a property fix for FF though. Only problem is it's only in later builds because it hasn't made it into a stable/final one yet. I posted on how to get crispy images in the FF bug thread here on pixelation if you don't mind using trunk builds.

[miau]

Hey guys. I've been mostly a lurker here (since back in the days of the original pixelation), so you may not know me

K-Meleon is a lightweight browser for Windows that might be worth checking out. It uses the same rendering engine as Firefox, but with less features. Looks like there's no image blurring or whatsoever

Sorry if that's old news to you already.

[Gil]

I prefer Firefox 2 over K-Meleon, but yeah, good alternatives exist