Javascript development to enhance the photo browser component of the JellyFields photo discovery and navigation application.
The existing application can be viewed by going to www.JellyFields.com and logging in using the following account credentials:
– user name: jellyfieldsguest (at yahoo dot com )
– password: guest.JF

To see the browser view, click on "THE WORLD". Photo thumbnails are loaded as you scroll down. Clicking on a photo will zoom
into that photo and display photos that the community surrounding that photo found to be the most appealing. You will be enhancing the thumbnail and zoom views. You should use chrome or firefox to inspect the element DOM and the javascript used to render the page. Of interest is the thumbnail rendering loop within the "display" function of the ResourceDetailspresenter class and the zoom image renderer at the top of that function. It renders the images based on the JSON object returned by the "JF.people.getContent" web service call (see the fetchUserContent function). You will not need to modify the web service call. These enhancements shall be verified against the following browser: Chrome, Safari, IE and FireFox.

PROJECT REQUIREMENTS:
The photo browser will be enhanced in the following ways:
1) Thumbnail view enhancements:
1.1) Thumbnail photos are currently laid out using a free flow format, without fixed img dimensions. The problem is that images tend to jump around as photos are loaded, especially on slow connections. This is because no image size is specified in the markup.
To correct this we have modified the "JF.people.getContent" api call used to retrieve the image information to additionally return the size and width of each photo, as well as the maximum column width. These dimensions will be used to specify the img elements height and width within the generated markup and to determine the number of columns to display.
1.2) A fixed number of columns will be displayed based on the browsers window width and the maximum column width mentioned above. The minimum number of columns shall be 3, but configurable with a variable.
1.3) If the browser width will accommodate more columns then an additional column will be added. The number of columns is the view width divided by the maximum column width returned by the API call. This calculation will be made after a window resize has completed.
1.4) Any additional CSS necessary for correct rendering shall also the required for successful project completion.
1.5) The method employed shall not use html tables. It should mimic Flickrs thumbnail browser in behavior: http://www.flickr.com/photos/feathered/favorites/page2/?view=md

It shall be verified that the above enhancements are applied correctly to all thumbnail views.

2) Fixed Sized Zoom Image:
When one clicks an image, it is zoomed and centered, followed by the thumbnails of additional recommendations. Again, no dimension is currently specified in the mark-up and this results in jumping around.
2.1) Rendering the zoom image is handled within the first section of the ResourceDetailspresenter: display method, before the thumbnail rendering loop. The img height and width will be specified according to the dimensions contained within the root jsonObject. These JSON attributes will be available prior to the development of these features.
2.2) The zoom image shall be centered immediately after the user clicks on the thumbnail and the JSON response is received, so that the user can see the rendering of the photos jpg and know that activity is taking place.
2.3) Centering needs to work on the following browser (Chrome, Safari, IE and FireFox). Note that centering is currently not working properly on IE.

We shall provide source files, so that a working subset of the site can be installed on your local machine. This package with your modifications shall be returned for verification. You will need mysql, apache and php installed on your box.

Tags: ajax javascript, ajax javascript calls pki, ajax javascript google translate content html tags, ajax javascript smarty, ajax javascript sql, ajax javascript xml array, browser, columns, cross browser ajax javascript autocomplete, direct webcam photo put browser asp net javascript, image, multiple photo uploader ajax javascript, photo, photos, thumbnail, uml profilers core ntiers j2ee jsp servlets ajax javascript soap wsdl junit, width