View the Site

Languages

  • HTML, CSS, Javascript, jQuery

Tasks

  • Design and implement entire page
  • Create interactive map with city-specific content
  • Create a dynamic photo gallery with horizontal scrolling
  • Create a dynamic video gallery with horizontal scrolling

The Project

Create a hub to celebrate the One-Year anniversary of Barclays Center in a promotion with Honda. The hub contains an interactive map that allows a user to click each of the stops on the Odyssey and view videos and photos for that location. The hub also contains video and photo galleries.

Something Different

I was presented with the question: "What can we do differently that hasn't been done on barclayscenter before?" I thought about it and thought, "wouldn't it be cool if we could plot out the Odyssey's path and post content specific to each city they stop in?"

To accomplish this I created a giant image map with javascript attached to each map point click.

The Result

Honda was extremely pleased with the concept of the project as well as the execution. Furthermore, since our team was responsible for celebrating the one-year anniversary in a memorable fashion, it was very important for this destination to resonate with our executive management. Needless to say, they were extremely excited about how the project turned out as well as public reaction to it.

Project Features

Interactive Map

The page contains an interactive map where each of the map markers, when clicked, display a description, photos and video from that particular stop on the trip.

I created a fun sliding element to house all of the city-specific content. This way, users can hide or display at their leisure and choose if they want an uninterrupted view of the map.

The photo section of the sliding element also allowed for multiple photos to be viewed as a gallery.

View Example