Develop JavaScript code to inject in browser extension

JS injection project

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 and used by injecting it via browser extension on various websites – it needs to be working well on all sites with images!! find the images, add the iframe etc.

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: [url removed, login to view]

3. Vertical Flip (example: [url removed, login to view] - also for horizintal)

4. Slide up

5. Slide Down

6. Slide from left

7. Slide from right

Example query string:

Src=’[url removed, login to view]

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

Documantation:

Code needs to be VERY WELL documented so our tech guys can understand each step you are doing.

*Size list example:

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

JavaScript

Project ID: #6451186

About the project