JS: Image thumbnails previewer

General description (Epic):

A thumbnail preview JS that will be injected via an addon to every webpage.

User Story:

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.

Acceptance Criteria:

* 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.

Technical Notes

* 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.

* The project should be written in native javascript, without loading any external framework/library (unless its lightweight)

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.

Beceriler: HTML, Javascript

Daha fazlasını görün: thumbnails, first lab, define maximal, c linked list library, c library linked list, js framework, javascript image library, need js file, loading gif, epic, jquery native, jquery image loading, jpg file format png file format, size image, jquery image tag, jquery behavior, png library, image library, external path, jquery hovering, dom javascript, hovering jquery, maximal, image loading, type image file

İşveren Hakkında:
( 7 değerlendirme ) Tel Aviv, Israel

Proje NO: #4410358



Hired by the Employer

3 gün içinde 350$ USD
(23 Değerlendirme)