Re-posting this project due to a poor title in a previous project posting.
This is a reasonably simple project for creating a javascript based image grid - similar to a thumbnail list. This is a simple project but we provide a lot of direction here as to be clear on what we need. Additional files or clarifications will be given after awarding the project - but no features added.
Please note the following before proceeding:
1) This is a top priority project that needs immediate attention, please do not bid if you cannot start working within the next few hours. We will select a winner in 4 hours or less from the posting of this project.
2) We are in the top 500 freelancer employers (out of over 5,000,000) - we have a perfect 5 star reputation, we are fair and pay on time! Bid with confidence. If you do well, most work will follow.
3) Do not copy and paste a general response, only responses that have the word "grid" as the FIRST word in their bid will be considered to ensure you read and understood the requirements.
4) This project must be completed in the next 48 hours, please do not bid if you are unable to commit to that timeline. Realistically, this should take a well versed JS person 8 hours or less.
--------------------------------------------------------------------------------------------------
JavaScript / jQuery gallery
The main purpose of this gallery is to view a thumbnail grid of images passed in via JavaScript.
The grid should be built using jQuery and be accessible in IE 9+, Chrome, Firefox. jQuery should make this easily compatible for that set. Twitter bootstrap is another nice framework you may use if you find it helpful.
You may additionally use any free / open source libraries as long as the library itself stays intact – in other words, do not use a 3rd party library and then change the library itself, only the implementation code outside that library.
All source should be delivered in readable, easily changeable format, (not mini-ized or obfuscated).
Functionality:
The image grid will be displayed inside a div.
The grid or images should resize when the containing div resizes for any reason.
Grid should display all images taking up as much width as is available and then starting on the next row.
When the grid is resized, they should use the effect seen here: [login to view URL]
The standard box size for an image should be configurable (for example 75x75px) through a javascript call and a starting value in a variable.
Each image in the grid should show the image thumbnail and below it a checkbox with a text label to the right of the checkbox. Any text that does not fit in the width allotted should simply be cut off:
A function should allow for adding items into the grid by passing an object containing the source, label, selected values. An additional anonymous object (named data) may be passed in that you will not need to use in any way.
Ability to select items in the grid by clicking on them – this checks the box in the bottom left of the image item. Ability to call a function to return the images that have been selected as well as call an onSelect method that can be listened for.
The container holding the grid should scroll in order to show all items. Using the mouse scroll wheel when over the grid should scroll the grid up and down.
When the user reaches near the bottom (only 3-4 grid rows left), it will call a function. This function can then add new items to the grid – this facilitates the “endless scroll” feature, similar to the facebook timeline. The AJAX calls to get more items for the grid is NOT part of this project, you simply need to call the function which may add items.
Dragging and dropping is NOT required or wanted, please do not include this functionality.