Design Fundamentals for the Web – Session 12

Bootstrap, jQuery & Blueimp Gallery Plugin Example

March 31, 2015

Review

Last week’s agenda

Another Great Web Design Example

A New Whitney

Bootstrap Template

If you haven't already downloaded it, navigate to the class Syllabus repository and copy the bootstrap_layout.html file from the Examples folder.


Installing Blueimp

Navigate to the Blueimp Github repository and let's take a look at the Readme file.


Implementing a Lightbox Image Gallery

Ok, now that we've installed (linked) the Blueimp resource files into our example page, let's continue on and implement a Lightbox Gallery example. Let's have another look at the Blueimp the Readme file.


The Completed Example

Here's the completed example.

You can download the completed example source code here.


Assignment 12

Reading

  • Review your Vision Document, paying particular attention to your User Personas & User Stories

Design

Continue working on your final project.