The Pacific by Grosvenor is a WordPress website with a custom theme featuring a brand new residential building constructed in Downtown Vancouver. Burst Creative came together with Grosvenor and Rennie Marketing Systems, in a collaborative effort to create a clean, crisp, and forward thinking website to represent The Pacific by Grosvenor. This website retains the latest in design, web, and mobile technology.

Tags

  • WordPress
Custom Visual Composer Plugins
Image Panorama View
Floorplans Slider
Floorplans Grid
Custom Popup Plugin

Custom Visual Composer Plugins

The main WordPress plugin used is WPBakery Page Builder and I built multiple custom elements using the vc_map function. The website is fully responsive with fading transitions as you scroll down.

Image Panorama View

The Plans and Views page features two draggable panorama images; one for morning view and one for evening view. This was created using the jQuery UI Draggable interaction.

We had to develop an algorithm to make sure that the image would always be on the screen. In web programming, everything is calculated from the top and from the left. In order to calculate the right side, we had to compare the current position and screen width with the image width.

Floorplans Slider

The floorplans popup was another custom element built into WPBakery Page Builder. Using the same query as the grid, a new page was created that contained just the in-depth floorplan information.

All the floorplans were then put into a slider. I programmed the ability to pass a parameter into the URL which would go to a specific slide.

Back on the grid, I added a custom click event to the thumbnails, which would open the slider page inside an iframe in a popup. The parameter passed into the URL made sure it always arrived at the correct position.

Floorplans Grid

I created a new post type in WordPress with custom fields for the thumbnail, pdf download, and other text fields.

A custom element was programmed into WPBakery Page Builder to list out all the floorplans. The element contains a custom WordPress query to retrieve all the floorplan posts. jQuery's Isotope plugin was used to display all the floorplans in a masonry grid with the filters.

Custom Popup Plugin

The gallery page contains both images and videos. Users can filter by categories using buttons at the top. Clicking on any thumbnail opens up the video or hi-res image in a popup window.

Other Web Development Projects

Pokedex
Role Play Gamebooks
Landyachtz
Asia Standard Americas
Bare Bones Slider
The Pacific by Grosvenor
White Spot Restaurants
Galpop Image Gallery
10net Managed Solutions
Calm Air International
Manning Elliott
Yum Skincare
Lava Lamp