Write javascript to find images on page and add layer on top - oDesk

General

Develop a javascript that will search through all images in current url and add a layer iframe on top of the images according to parameters (size, max images to add iframe etc). When the user rolls over his mouse over the image, it needs to show the iframe according an effect (passed in the query string) – the iframe needs to be centered within the image and depending on the effect with sufficient padding/margin.



Script will be tested by injecting it via browser extension on various websites – it needs to be working well on all sites with images!!



The script takes parameters via the src address query string:

Params:

- Size* – the size of the layered iframe (widthXheight) – if no size Is passed then a default list of width and heights are checked to see if they can find a match*

- pId – number to be passed to the iframe

- subid - number to be passed to the iframe

- Source – string passed to the iframe (optional)

- maxi – max number of images to find – default 1.

- Effect – type passed in query string. 6 possible effects (it should be flexible so more effects can be added in the future):

1. Fade in (default),

2. Horizontal Flip (example: http://ift.tt/X1qT8U

3. Vertical Flip (example: http://ift.tt/QlFfNX - also for horizintal)

4. Slide up

5. Slide Down

6. Slide from left

7. Slide from right



Example query string:

Src=’http://ift.tt/1sQ0XtH



These params need to be passed also to the iframe src url.



The script needs a to check current url - and not execute if run from certain domain (exclude list). If you read through this document, write back ‘js rocks’ when applying for this job.



The script cannot use any libraries such as jquery etc. – it needs to be as small as possible in terms of file size.



The script has to load FAST!



Compatibility:

IE7 +

Chrome

FireFox





*Size list example:

sizeList = [{'w': 300, 'h': 250}, {'w': 468, 'h': 60}…];



Posted On: September 14, 2014 12:13 UTC

ID: 204529274

Category: Web Development > Web Programming

Skills: Array

Country: Israel

click to apply



from Online Job Search