General description (Epic):
A thumbnail preview JS that will be injected via an addon to every webpage.
As a user I want to be able to see a thumbnail picture in a bigger format, when hovering over a thumbnail in any webpage, so I will be able to see a bigger picture instead of the small thumbnail.
* When hovering over a certain thumbnail in a website, a tooltip with the biggest format picture possible will appear.
* when i am done hovering over the thumbnail, the tooltip will disappear.
* Recognizing thumbnail links: the DOM will be scanned for small pictures (we'll need to decide of the sizes range of what we can define as a thumbnail - will be configurable as minimal height/width and maximal height/width) that are also linked to another picture file.
The structure of the filename/path will also be taken into consideration (i.e.: http://domain/thumbnails/filename or http://domain/th/filename or http://domain/images/[url removed, login to view] etc.)
* The full size image that will be presented in a tooltip needs to be resized to a size that fits the current width/height of the window, while NOT covering the original thumbnail link, to allow hiding the full size image when moving the mouse away from it.
A similar behavior to: [url removed, login to view] (this is done with jQuery, we're looking for a native JS solution)
Also, from our previous correspondence, a detailed description of the methods that will be used to identify thumbnails+full sized image links -
1. When this structure is found:
The tag has a size that is in a range that is defined as a probable thumbnail (i.e.: minimal width/height of 40px and maximal width/height of 200px)
2. Have a list of predefined structure of URLs:
*/thumbnail/*.[jpg/gif/jpeg/png], */th/*.[jpg/gif/jpeg/png], etc.
And again, if the target href leads to a picture file type, and the includes an
I think these two rules/methods will suffice (especially the first method) to identify thumbnail images in a generic way.