Build responsive gallery with JavaScript & jQuery

  • Status Closed
  • Budget N/A
  • Total Bids 12

Project Description

I need the following developed in either JavaScript or CoffeeScript:

- A responsive web gallery using jQuery and Isotope ([url removed, login to view])

- On startup it should do an AJAX GET request to a hard-coded URL to load a JSON file that could look like this:


{ thumb: '[url removed, login to view]',

pics: [ { url: '[url removed, login to view]' }, { url: '[url removed, login to view] } ]


...more objects like the above...


- The JSON basically defines an array of sub-galleries. Each sub-gallery has a thumbnail and an array of photos.

- The page should instantiate an Isotope grid containing all thumbnails (i.e. one per sub-gallery). So the grid links to the sub-galleries.

- When user clicks thumbnail, a full-page DIV opens in front of the grid (hiding the grid). This should be pure JS (no page load). The DIV should contain all photos from the sub-gallery (as elements, not another grid). All photos should be scaled (use anti-aliasing) to screen height with a margin of 20px around each photo. The DIV should be wide enough to contain all photos, so the user can scroll the page to the right to see all of them.

- Overlaid on the bottom-right corner of the last photo in a sub-gallery should be a link "Back" that when clicked closes the sub-gallery and leads back to the Isotope grid.

- jQuery History plugin should be used so that every sub-gallery gets its own anchor in the URL such as page.html#gal1 and is directly accessible through that URL. No page (re)loads please!

- Keep the project limited to one HTML file, a JS file and a CSS file (you can hotlink images from the internet in the JSON to demo the functionality)

Get free quotes for a project like this

Looking to make some money?

  • Set your budget and the timeframe
  • Outline your proposal
  • Get paid for your work

Hire Freelancers who also bid on this project

    • Forbes
    • The New York Times
    • Time
    • Wall Street Journal
    • Times Online