Ye Olde Rocket Forum

Ye Olde Rocket Forum (http://www.oldrocketforum.com/index.php)
-   FreeForAll (http://www.oldrocketforum.com/forumdisplay.php?f=10)
-   -   Adding a gallery viewer for attached images with TamperMonkey (http://www.oldrocketforum.com/showthread.php?t=15723)

neil_w 01-13-2016 04:46 PM

Adding a gallery viewer for attached images with TamperMonkey
 
After being pretty happy with my efforts at re-theming this forum, I decided to follow it up by seeing if I could add a gallery-style viewer for images attached to posts. Some prefer it the way it is, where each image opens in a new tab, but I find it tedious and it often discourages me from viewing all the images.

So I threw together this script to be used with TamperMonkey (I presume it'll work with GreaseMonkey as well, if you're a FireFox user, though perhaps it'll need a tweak or two). These are very useful browser extensions that let you execute arbitrary scripts against selected pages.

So, after installing your chosen extension, follow the instructions to create a new script and paste in the following contents:
Code:
// ==UserScript== // @name YORF forum gallery // @namespace http://tampermonkey.net/ // @version 1.0 // @description Add lightbox gallery behavior to images attached to a forum post // @author Neil Weinstock // @match http://forums.rocketshoppe.com/showthread.php?* // @match http://www.oldrocketforum.com/showthread.php?* // @require https://code.jquery.com/jquery-2.2.0.min.js // @require https://raw.githubusercontent.com/dimsemenov/Magnific-Popup/master/dist/jquery.magnific-popup.min.js // @resource magnific_css https://raw.githubusercontent.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css // @grant GM_addStyle // @grant GM_getResourceText // ==/UserScript== /* jshint -W097 */ 'use strict'; GM_addStyle(GM_getResourceText ("magnific_css")); $(function() { var index = 0; $('legend:contains("Attached Thumbnails")').each(function() { var gallery = 'gallery' + (++index); $(this).parent().find('a').each(function() { var title = $(this).find('img').attr('alt').match('Name: (.*?)\n')[0].replace(/Name: /, ''); $(this).attr('galleryTitle', title).addClass(gallery); }); $('.'+gallery).magnificPopup({ type: 'image', gallery: { enabled:true }, image: { titleSrc: 'galleryTitle' } }); }); });

And finally, save it.

If it's working correctly, you should see a little "1" on the TamperMonkey badge when viewing this forum, and clicking on an attached image should open it in a lightbox, with the ability to navigate back and forth to all the images attached to that post.

This greatly increases my enjoyment of the site.

Rich Holmes 01-14-2016 03:45 PM

Nice!!!

Jerry Irvine 01-14-2016 03:47 PM

So you are a white hat hacker?

I think the hacks are cool and make for a nice feature set for someone less experienced than you to try it out.

neil_w 01-14-2016 03:51 PM

Quote:
Originally Posted by Jerry Irvine
So you are a white hat hacker?


Nah, just temporarily seized by a "fix it" rather than "complain about it" attitude. I'll revert back soon enough. ;)

neil_w 01-15-2016 08:44 AM

It would be easy enough to modify this to have a single gallery for all the images in the thread, rather than one for each post. Actually, that's not quite right: the gallery could show all images on the current *page* of the thread.

If anyone wants that, let me know. Somehow I doubt I'll be getting crushed with requests though. :)


All times are GMT -5. The time now is 04:19 AM.

Powered by: vBulletin Version 3.0.7
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.