Kye-U's Image Thumber on Select Sites

[Kye-U]

Description:

Quote:Using the Cool DHTML Tooltip script from DynamicDrive.com, this filter enables you to save up a bit of bandwidth and "surprises". What this filter basically does is:

• convert the image to a harmless link
• this link contains an "onmouseover" function where the image is resized to have a width of 100 pixels and this thumbnail is shown in a tooltip
• click on the link to view the full image
  

Example:


  example.jpg (Size: 83.01 KB / Downloads: 1058)
In the above image, which is an image of Google.ca, with the filter active, the logo is shown in a box when the mouse cursor is placed over the yellow-background-red-bolded-text image filename.

You'll need to create two "Block Lists" named thumbnail and thumbnailexclude.

The "thumbnail" Blocklist:

Quote:This blocklist serves as a "blacklist" where the filter is designed to only be active on any listed sites in the thumbnail blocklist. Any site that is not in this list will not have its image files "thumbed".

The "thumbnailexclude" Blocklist:

Quote:In this blocklist, you can place filenames of images that are on sites in the above blocklist which you don't want to be "thumbed".

The Proxomitron Filter:

Code:

[Patterns]
Name = "Kye-U's Image Thumber on Select Sites"
Active = TRUE
URL = "$LST(thumbnail)"
Limit = 256
Match = "<body\9>$SET(1=<style type="text/css">\r\n\r\n#kyeuthumbnailbox{\r\nposition: absolute;\r\ntext-align:center;\r\nheight: 100px;\r\nborder: 2px solid black;\r\npadding: 2px;\r\nbackground-color: lightyellow;\r\nvisibility: hidden;\r\nz-index: 100;\r\n/*Remove below line to remove shadow. Below line should always appear last within this CSS*/\r\nfilter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);\r\n}\r\n\r\n</style>\r\n<body\9>\r\n<div id="kyeuthumbnailbox"></div>\r\n\r\n<script type="text/javascript">\r\n\r\n/***********************************************\r\n* Cool DHTML tooltip script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)\r\n* This notice MUST stay intact for legal use\r\n* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code\r\n***********************************************/\r\nvar offsetxpoint=-60 //Customize x offset of tooltip\r\nvar offsetypoint=20 //Customize y offset of tooltip\r\nvar ie=document.all\r\nvar ns6=document.getElementById && !document.all\r\nvar enabletip=false\r\nif (ie||ns6)\r\nvar tipobj=document.all? document.all["kyeuthumbnailbox"] : document.getElementById? document.getElementById("kyeuthumbnailbox") : ""\r\n\r\nfunction ietruebody(){\r\nreturn (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body\r\n}\r\n\r\nfunction kyeuthumbnail(thetext, thecolor, thewidth){\r\nif (ns6||ie){\r\nif (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"\r\nif (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor\r\ntipobj.innerHTML=thetext\r\nenabletip=true\r\nreturn false\r\n}\r\n}\r\n\r\nfunction positiontip(e){\r\nif (enabletip){\r\nvar curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;\r\nvar curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;\r\n//Find out how close the mouse is to the corner of the window\r\nvar rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetx"
        "point-20\r\nvar bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20\r\n\r\nvar leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000\r\n\r\n//if the horizontal distance isn't enough to accomodate the width of the context menu\r\nif (rightedge<tipobj.offsetWidth)\r\n//move the horizontal position of the menu to the left by it's width\r\ntipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"\r\nelse if (curX<leftedge)\r\ntipobj.style.left="5px"\r\nelse\r\n//position the horizontal position of the menu where the mouse is positioned\r\ntipobj.style.left=curX+offsetxpoint+"px"\r\n\r\n//same concept with the vertical position\r\nif (bottomedge<tipobj.offsetHeight)\r\ntipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"\r\nelse\r\ntipobj.style.top=curY+offsetypoint+"px"\r\ntipobj.style.visibility="visible"\r\n}\r\n}\r\n\r\nfunction hidekyeuthumbnail(){\r\nif (ns6||ie){\r\nenabletip=false\r\ntipobj.style.visibility="hidden"\r\ntip=obj.style.left="-1000px"\r\ntipobj.style.backgroundColor=''\r\ntipobj.style.width=''\r\n}\r\n}\r\n\r\ndocument.onmousemove=positiontip\r\n\r\n</script>\r\n)(^$TST(match=yes))$SET(match=yes)"
        "|<img\8\ssrc=$AV(((([^/]+/)+)\2\3))\7>$SET(fullpath=\2\3)$SET(1=<a href="\2\3" onMouseover="kyeuthumbnail('<img src=\\'$ESC(\2\3)\\' height=\\'100\\'>')"; onMouseout="hidekyeuthumbnail()" style="background-color: yellow; color: red; font-weight: bold;" title="\2\3">\3</a>)(^$TST(fullpath=$LST(thumbnailexclude)))"
Replace = "\1"

[Magician]

Awesomely nifty and cool little script. Cheers.

the near oblibatory question needs to be asked though, is how do I change it so that the thumbnail list contains a list of sites NOT to block rather then the other way round? ie a whitelist rather then a black list


Again, cheers.

[Kye-U]

To change it into a whitelist rather than a blacklist, simply change the line in the URL Match box to read:

(^$LST(thumbnail))

Enjoy

Edit: There are undoubtedly some sites out there where this does not work (properly). I have been giving this filter a test-run for quite a while now. Let me know of any sites where this filter doesn't work on. Thanks.

[Kye-U]

I've updated the filter.

Made the Bytes Limit 256 instead of 128, to match images with really long filenames/paths, and I also made the <img> match more specific (added \s in front of src=... to avoid matching Yahoo Status Notification images)

[Magician]

Cheers mate

And on an off topic note, congrats on your uni results :-)
(I hope the last year was as much fun for you as Uni can be).

[ProxRocks]

Awesome! Thanks Kye-U...