Increase the size of all images on Reddit with one-click
If you like to hang out on Reddit you have probably been exposed to the site's vast image and photo section. In fact, if you are new to Reddit, the two image groups pics and funny are listed prominently in Reddit's default selection of groups that may be of interest to you.
All photo and image groups have in common that they display a small thumbnail by default which makes it rather difficult to find out what is going on. I guess this is not the case if you have eagle-eyes, but if you are a mere mortal, you may need to view a larger version of the picture to know what is going in.
The only option that you have at this point is to click on the link which takes you to Reddit's favorite image hosting site Imgur, usually. Here you can take a closer look before you close the Imgur tab to go back to Reddit to repeat the process with the next interesting looking thumbnail in line.
While it is possible to open multiple pictures in different tabs at once to reduce the times you need to go back and forth, it is not really that comfortable either.
Embiggen is a bookmarklet that improves your experience on Reddit significantly. It adds larger versions of all pictures listed on the page on that page, so that you can browse them all on the Reddit website and do not have to switch at all, provided that you do not want to access the original sized version or an album.
Bookmarklets are JavaScript code that you can execute in your browser. All you need to do is save the code as a bookmark in your browser, and click on it whenever you want to use its functionality.
Creating the bookmarklet
This is the bookmarklet. Copy it to the clipboard.
Firefox
- Press the Alt-key to bring up the menu bar, and select View > Toolbars > Bookmarks Toolbar from it. This displays the browser's bookmarks toolbar in the interface.
- Right-click an empty location on it and select New Bookmark from the context menu.
- Paste the bookmarklet code in the location field, and add a custom name. All other fields are optional.
- Click Add afterwards to complete the process.
Google Chrome
- Press Ctrl-Shift-B to display the bookmarks bar in Chrome.
- Right-click empty space on it and select Add Page from the context menu.
- Add the JavaScript code that you have copied above as the url, and pick a name.
- Click Save afterwards to complete the process.
Internet Explorer
- Right-click one of the main toolbars of Internet Explorer and select to display the Favorites Bar.
- Click on the small bookmark star on the left of the toolbar.
- Right-click the new bookmark that you have just created and select Properties from the context menu.
- Paste the JavaScript code in the url field.
- Switch to General and rename the bookmark.
Effect
When you are browsing a Reddit picture group click on the bookmarklet to enlarge all thumbnails on the page so that you can browse them all in greater detail right on that page.
Images seem to be listed twice by the extension, not really sure why that is happening. It is not such a big deal on the other hand.
Note that both static images and animated images are enlarged right on the Reddit page you run the bookmarklet on.
Verdict
A bookmarklet has one core advantage over a browser extension: it runs only when you click on it. It is completely passive at all other times and does not use memory or processing power during that time. (via Elliot Kember)
.find(%22a%22).each(function()%7Bvar%20href=$(this).attr(%22href%22);if((!$(this).hasClass(%22drowsapMorphed%22))%20&&%20($(this).next(%22.drowsapMorphed%22).length==0)%20&&%20href%20&&%20(href.indexOf('imgur')%3E=0%20%7C%7C%20href.indexOf('jpeg')%3E=0%20%7C%7C%20href.indexOf('jpg')%3E=0%20%7C%7C%20href.indexOf('png')%3E=0))%7Bvar%20ext%20=(href.indexOf('imgur')%3E=0%20&&%20href.indexOf('jpg')%3C0%20&&%20href.indexOf('png')%3C0)%20?%20'.jpg'%20:'';%20var%20img%20=%20$(%22%3Ca%20class='drowsapMorphed'%20href='%22+href+%22'%20target='blank'%20style='display:block'%3E%3Cimg%20style='display:block;max-width:780px;'%20src='%22+href+%20ext+%22'%20/%3E%3C/a%3E%22);$(this).after(img);%7D%7D);){kind=link}
We need your help
Advertising revenue is falling fast across the Internet, and independently-run sites like Ghacks are hit hardest by it. The advertising model in its current form is coming to an end, and we have to find other ways to continue operating this site.
We are committed to keeping our content free and independent, which means no paywalls, no sponsored posts, no annoying ad formats (video ads) or subscription fees.
If you like our content, and would like to help, please consider making a contribution:
or just get http://redditenhancementsuite.com/ for this feature and much more
Yes, it is a great extension. But it is certainly overkill if you only need that single functionality.
I’ll have to look into this, i have RES but just use
https://addons.mozilla.org/en-US/firefox/addon/thumbnail-zoom-plus/
works on all sites
I normally browse all the pictures on reddit using http://pics.fefoo.com/ its so much more easier.
Nice trick. Its better to use code than using extensions.
I also wanted an easy way to view the images easily, so created http://www.pinddit.com for this purpose :)
+1 for Thumbnail Zoom Plus. By far the most elegant solution, and superb for many other sites as well.
Below is an updated bookmark that handles gifs.
javascript: var hrefArray = []; var extensions = [‘jpeg’, ‘jpg’, ‘png’]; var x= $(“.content”).find(“a”).each(function(){
var href=$(this).attr(“href”);
if (href && hrefArray.indexOf(href) === -1 && href.indexOf(“reddit.com”) === -1) {
var found = false;
var video = false;
for (var i = 0, len = extensions.length; i = 0){
found = true;
hrefArray.push(href);
break;
}
}
if (!found && href.indexOf(“gif”) >= 0) {
found = true;
hrefArray.push(href);
href = href.substring(0, href.length – 5);
video = true;
}
if (!found && href.indexOf(“imgur”) >= 0 && href.indexOf(“domain”) === -1){
hrefArray.push(href);
href += “.jpg”;
found = true;
}
if(found && !$(this).hasClass(“enlargedItem”) && $(this).next(“.enlargedItem”).length === 0) {
var append = null;
if (!video) {
append = $(““);
} else {
append = $(““);
}
$(this).before(append);
$(this).remove();
}
}
});