Friday, November 14, 2008

Updated 'Flickr All Sizes Menu' Greasemonkey script

The Flickr All Sizes Menu Greasemonkey script adds a dropdown menu to select which size to view when you hover over the 'All Sizes' button in Flickr. Only trouble is, it's no longer being maintained by the author and consequently doesn't work properly any more. However, the alternative (Flickr AllSizes+) is too complicated for what I wanted, so I decided to edit the original script. Turns out it was only the styles that were a bit broken, so here is a working version of the script. To use it, just install the original script from userscripts.org, then edit it (click 'Manage user scripts' in the Greasemonkey menu, select 'Flickr All Sizes Menu' and click 'Edit') and replace the contents of the .js file with the code below:

(function() {
var test = document.getElementById('button_bar');
if(!test) return;

//get image id
var divs, imgId;
divs = document.getElementsByTagName('div');
for(i = 0; i < imgid =" divs[i].id.match(/\d+/);" imgurl =" new" id="'" size="o'," id="'" size="m'," id="'" size="s'," id="'" size="t'," id="'" size="sq'" imgsizes =" document.getElementById('photo_gne_button_zoom');" newspan =" document.createElement('span');" sizemenu =" document.createElement('div');" innerhtml =" (">' +
'<li><a href="http://www.blogger.com/%27%20+%20imgURL%5B0%5D%20+%20%27">Original</a></li>' +
'<li><a href="http://www.blogger.com/%27%20+%20imgURL%5B1%5D%20+%20%27">Medium</a></li>' +
'<li><a href="http://www.blogger.com/%27%20+%20imgURL%5B2%5D%20+%20%27">Small</a></li>' +
'<li><a href="http://www.blogger.com/%27%20+%20imgURL%5B3%5D%20+%20%27">Thumbnail</a></li>' +
'<li><a href="http://www.blogger.com/%27%20+%20imgURL%5B4%5D%20+%20%27">Square</a></li>' +
'</ul>'
);
newSpan.appendChild(sizeMenu);

//add stylesheet for the menu
var head, style;
head = document.getElementsByTagName('head')[0];
style = document.createElement('style');
style.setAttribute('type', 'text/css');
style.innerHTML = (
'#allSizes {' +
' display: none;' +
' background-color: #F3F3F3;' +
' border: 1px solid #E3E3E3;' +
' position: absolute;' +
' margin-left: -49px;' +
' margin-top: 24px;' +
' padding-left: 0;' +
'}' +

'#button_bar > span:hover > #allSizes {' +
' display: inline;' +
'}' +

'#allSizes ul {' +
' list-style: none;' +
' margin: 0;' +
' padding: 0.3em 1em 0.5em 0.8em;' +
'}' +

'#allSizes ul li {' +
' border: none;' +
' margin: 0;' +
' padding: 0;' +
'}' +

'#allSizes a {' +
' background: none;' +
' border: none;'+
' display: inline;' +
' font-size: 90%;' +
' padding: none;' +
'}' +


'#allSizes a:hover {' +
' color: #0063DC;' +
' text-decoration: underline;' +
'}'

);
head.appendChild(style);

})();

No comments: