TFW2005 lightbox - The first third-party add-on for TFW2005.com!

Discussion in 'General Discussion' started by optimusfan, Jan 17, 2012.

  1. optimusfan

    optimusfan Kill your heroes Administrator

    Joined:
    Jul 23, 2002
    Posts:
    12,345
    News Credits:
    15
    Trophy Points:
    412
    Likes:
    +322
    Ebay:
    Facebook:
    Twitter:
    There's been talk in the TFW members lounge for a while now that the current image viewing functionality at TFW is inadequate. As I am unable to directly modify the TFW code, I wrote a browser add-on to improve it a last summer. However, it was very limited and just not very good overall. Spurred on by additional requests (most notably by Superquad7) a few months back, I set out to improve upon my initial attempt. The functionality is now at a point where I feel it can be used by folks beyond the walls of the members lounge.

    I've written the FAQ below to help explain what a "lightbox" is, what this particular one can do, and included instructions for installing and uninstalling it. I've also attached a few images to this thread as they'll probably do a better job explaining what a lightbox is than my description below. In short, it should improve your image viewing experience on TFW2005.

    Lastly, please post comments, concerns, criticisms, questions, etc. here!

    [​IMG]
    Sample image of the Junkheap gallery using the lightbox.


    FAQ
    Question: What the heck is a "lightbox"?
    Answer: A lightbox is "a JavaScript application used to display large images using modal dialogs. On a Lightbox-enabled page, a user can click an image to have it magnified in a Lightbox window, which resizes itself according to the size of the image using a gliding animation." Lightbox (JavaScript) - Wikipedia, the free encyclopedia

    Question: What can it do and why would I want it?
    Answer: The lightbox is designed to make image navigation simpler and easier. It reduces or eliminates the need to jump from page to page to see all the images in a thread, news story, etc. by creating a sort of slideshow of all related images.

    Question: What content does this apply to?
    Answer: The lightbox will be applied to all thread attachments, TFW galleries, inline images (images included in the body of a post), and news stories. You can enable/disable the lightbox for any of those four categories via the "Thread Display Options" in the "Edit Options" section of the TFW user control panel.

    Question: How do I navigate the slideshow?
    Answer: You have a number of choices for navigation. You may use the "preview bar" at the bottom of the lightbox to jump to a specific image, navigate using your arrow keys or mouse wheel, or use the next (">") and previous ("<") icons.

    Question: The preview bar is too big/small. Can I change the size of the images on the "preview bar"?
    Answer: Yes, the size is configurable in the "Thread Display Options" in the "Edit Options" section of the TFW user control panel.

    Question: What the heck is that magnifying glass icon in the upper left corner of the lightbox?
    Answer: Selecting the magnifying glass icon enables "zoom" mode, which allows you to zoom in on a particular portion of the current image. It can be dismissed by selecting another image, selecting the magnifying glass icon again, or simply by clicking anywhere in the lightbox. This functionality is especially useful when trying to read small text in our comics section. Additionally, you may zoom in and out using your mouse wheel when magnification is enabled.

    Question: OK, so what about the "+" icon?
    Answer: The "+" icon displays some of the options available to you for the current image. You're able to view the full-size image in a new tab, set the magnifier to auto-zoom whenever you open a new image (again, good for comic reading), and set the magnifier to one of three pre-determined sizes.

    Question: OMG UR teh bestest!!! I need this like right now!!! How do I get it?
    Answer: First, you need to be running Firefox or Chrome. After you have that squared away, follow the appropriate instructions below:

    Install in Firefox:
    1) Install the Greasemonkey extension for Firefox here.
    2) Restart your browser.
    3) Go here for the lightbox and select "install".

    Install in Chrome:
    1) Go here for the lightbox and select "install".

    Question: The use of your third-party add-on for TFW has ruined my life and cheapened my hobby. How do I uninstall it?
    Answer: Again, this will be browser dependent:

    Uninstall in Firefox:
    1) Select the "Add-ons" file menu option.
    2) Select "Extensions", then select "Remove" next to "Greasemonkey".

    Uninstall in Chrome:
    1) Select the "Options" file menu option.
    2) Select "Extensions", then select "Remove" next ot "TFW2005 lightbox".

    Question: HELP!!! Something doesn't work! What do I do?
    Answer: Please reply to the thread and I will work to solve the problem.


    Images:

    Collections:
    [​IMG]

    Comics:
    [​IMG]

    [​IMG]

    Controls:
    [​IMG]


    A few example threads to try out after installing the lightbox:
    Hegemon Third Party Megatron Color Prototype Images - Transformers News - TFW2005
    http://www.tfw2005.com/boards/transformers-collection-showcase/124024-most-my-collection.html
    Generations Junkheap - Generations Autobots - TFW2005.COM
    Limelight: Dreadwind - Completed Comics - TFW2005.COM
     
  2. Secretcode

    Secretcode Keeper of Encarta Veteran

    Joined:
    Jan 13, 2009
    Posts:
    6,121
    News Credits:
    50
    Trophy Points:
    217
    Location:
    Kentucky
    Likes:
    +53
    YouTube:
    I've been using this for a while now, works great. :D 
     
  3. Spiff-O-Matic

    Spiff-O-Matic I can haz catch-phrase?

    Joined:
    May 29, 2010
    Posts:
    3,153
    News Credits:
    4
    Trophy Points:
    242
    Location:
    All up in this shiz
    Likes:
    +182
    Facebook:
    Twitter:
    Google+:
    Holy shite, this is awesome! Thanks Ian, I've been wanting this for a while now!
     
  4. John_Force

    John_Force 16xNHRA Funny Car Champ TFW2005 Supporter

    Joined:
    Jun 26, 2009
    Posts:
    2,375
    News Credits:
    1
    Trophy Points:
    196
    Likes:
    +1
    I've heard about this in the Lounge, but never had time to install it. I just did, and have a few minor questions.
    Is there plans for a updated version where, If I click on a single picture of any thread, all the pictures contained within that same thread are displayed, i.e all the pictures currently uploaded on the Hercules Megathread? Just a thought.
     
  5. Kuma Style

    Kuma Style Toy Photography TFW2005 Supporter

    Joined:
    Dec 6, 2010
    Posts:
    24,523
    News Credits:
    13
    Trophy Points:
    387
    Likes:
    +3,137
    Ebay:
    Facebook:
    Twitter:
    Instagram:
    Flickr:
    YouTube:
    Pinterest:
    I've also been using it for a bit now, and it's a must-have. Good job!
     
  6. firehawc_69

    firehawc_69 cloppers = ignore list

    Joined:
    Aug 12, 2008
    Posts:
    10,629
    News Credits:
    9
    Trophy Points:
    217
    Likes:
    +16
    Cool! Just installed!
     
  7. Chaos Muffin

    Chaos Muffin Misadventure Veteran

    Joined:
    Mar 26, 2004
    Posts:
    28,829
    Trophy Points:
    337
    Likes:
    +73
    Good stuff.
     
  8. VaderPrime1

    VaderPrime1 Prepare for termination!

    Joined:
    Jul 6, 2008
    Posts:
    5,195
    News Credits:
    20
    Trophy Points:
    196
    Location:
    Atlanta
    Likes:
    +21
    Instagram:
    Flickr:
    YouTube:
    ZOMG! :rock 

    Amazing!
     
  9. Seawing

    Seawing Lurker of the depths Moderator

    Joined:
    Dec 7, 2004
    Posts:
    4,157
    News Credits:
    1
    Trophy Points:
    212
    Likes:
    +39
    Just installed this on both Chrome and Firefox on my Mac and they work great. Any plans for this to work on Safari since that is my main browser?
     
  10. KnightSaberAmi

    KnightSaberAmi Nyan Nyan

    Joined:
    Dec 25, 2004
    Posts:
    2,894
    Trophy Points:
    201
    Likes:
    +0
    This is friggin awesome, thanks!
     
  11. optimusfan

    optimusfan Kill your heroes Administrator

    Joined:
    Jul 23, 2002
    Posts:
    12,345
    News Credits:
    15
    Trophy Points:
    412
    Likes:
    +322
    Ebay:
    Facebook:
    Twitter:
    Thanks to all for the feedback. For those who have been using this since I posted it in the lounge it is worth noting that I released a new version yesterday. Only a few minor tweaks, but worth grabbing.

    That's definitely an interesting suggestion. First, it would be easy to allow the user to select whether or not they wanted the lightbox to find all images on a single page. The implementation did that as a bug/feature early on, but it made more sense for it to pull images from a single post by default. If that's interesting to you (or if others are interested) let me know and I'll consider it.

    Now, pulling all images from a thread is another matter entirely. Yes, it can be done, that doesn't mean it should be done. FYI, the lightbox gets all of its content for posts from the posts on the current screen. Basically I wait until all the images are loaded for a page, then do some magic to find those that are related and create one or more lightboxes.

    I could also do some magic to start going through page after page of a thread grabbing all the images, but it's not wise for a couple of reasons. First, it would be the equivalent of you sitting and manually clicking through each page, waiting for it to load, and then looking at the images displayed there. If a single page takes a second to load, a thread that has even 10 pages is going to have noticeable lag. More importantly, it would cause unnecessary strain on TFW as one user hitting the server 10 times to display all the images in a lightbox is the equivalent of 10 users hitting one page at a time -- e.g. it could get out of hand pretty quickly.

    However, it could theoretically be done if the TFW folks did some of the work on the back end.

    I do not have a Mac or Safari (other than on my iPod), so I can't test it on my end. However, Safari for the Mac does appear to be able to run some/most user scripts like this one through a program called SIMBL and Greasekit. See here: How to run Greasemonkey scripts in Safari – Simple Help

    If you decide to try it please let me know if it works properly. If so I'll gladly add a section for installing it to the FAQ.
     
  12. Chaos Muffin

    Chaos Muffin Misadventure Veteran

    Joined:
    Mar 26, 2004
    Posts:
    28,829
    Trophy Points:
    337
    Likes:
    +73
    You're a good dude Optimusfan
     
  13. XJunky

    XJunky Howdy Ho Veteran TFW2005 Supporter

    Joined:
    Jan 18, 2006
    Posts:
    3,637
    Trophy Points:
    241
    Likes:
    +0
    Just grabbed it and tried it out, fantastic job!
     
  14. mrgalvaprime

    mrgalvaprime #BanTJ

    Joined:
    Jun 1, 2011
    Posts:
    2,840
    News Credits:
    4
    Trophy Points:
    167
    Likes:
    +6
    Im not going to care as i always chose to open attachments in a new tab anyway
     
  15. optimusfan

    optimusfan Kill your heroes Administrator

    Joined:
    Jul 23, 2002
    Posts:
    12,345
    News Credits:
    15
    Trophy Points:
    412
    Likes:
    +322
    Ebay:
    Facebook:
    Twitter:
    Version 6.3 is released. TFW implemented a new lightbox within the past few days that is definitely an improvement on no lightbox, but is still less sophisticated than this one. All 6.3 does is remove that lightbox (otherwise you'll see two lightboxes, one on top of the other).

    The install link is the same as before: TFW2005 lightbox for Greasemonkey
     
  16. payton34

    payton34 Well-Known Member

    Joined:
    Sep 15, 2007
    Posts:
    4,049
    News Credits:
    13
    Trophy Points:
    151
    Likes:
    +14
    Just tried this out, and it works great! Highly recommended.
     
  17. Matty

    Matty @StayingInTheBox Moderator News Staff

    Joined:
    Jun 2, 2009
    Posts:
    14,774
    News Credits:
    29
    Trophy Points:
    277
    Likes:
    +254
    Twitter:
    Instagram:
    I just now installed the add on and I really like this feature. Thanks optimusfan!
     
  18. optimusfan

    optimusfan Kill your heroes Administrator

    Joined:
    Jul 23, 2002
    Posts:
    12,345
    News Credits:
    15
    Trophy Points:
    412
    Likes:
    +322
    Ebay:
    Facebook:
    Twitter:
    Thanks guys. :thumb  Haven't updated it in a while, but certainly continue to use it myself!
     
  19. VaderPrime1

    VaderPrime1 Prepare for termination!

    Joined:
    Jul 6, 2008
    Posts:
    5,195
    News Credits:
    20
    Trophy Points:
    196
    Location:
    Atlanta
    Likes:
    +21
    Instagram:
    Flickr:
    YouTube:
    aaaawwwwwww yeeeeeeaaaaahhhhh!
     
  20. TheDemonDzko

    TheDemonDzko °-{[●□●]}-° {Beep. Boop.)

    Joined:
    Oct 9, 2008
    Posts:
    2,696
    Trophy Points:
    167
    Likes:
    +5
    Normally I have a very skeptical outlook on Add-ons. However, this is actually really awesome, and something that should be in TFW's coding regardless. However, I appreciate this little device. =D
     

Share This Page