This demo of job profiles, using images from Generated.Photos, makes use of some of the FooGallery PRO features, along with some Custom CSS.

This following settings were used to create this demo:

  1. The default responsive image gallery template was used
  2. The FooGallery PRO Lightbox was selected
  3. Under Lightbox -> Thumbnails, the Thumbnail Strip setting was set to Hidden
  4. Under Lightbox -> Captions, the Caption Source was set to Custom, and the Custom Caption Template was:
    <h3>{{title}}</h3>
    <p>{{description}}</p>
    <p><a href="{{custom_url}}">View Profile</a>
  5. Under Captions, the Title was set to Attachment Title
  6. Filtering was set to Simple

Then for each attachment, the following was set for each profile:

  1. Title was set to the person’s name
  2. Description was set to the person’s expertise as a comma-separated list
  3. Media tags was set to the different expertise
  4. Custom URL was set to the persons’ profile page (in this case a dummy URL of #profile)

Some custom CSS was used to get around some issues with the theme styling, and also how I wanted the lightbox to look:

.fg-media-caption {
    text-align: center;
}

.fg-media-caption a {
     color : #0073aa;
}

.fg-panel.fg-light {
    background-color: rgb(200, 200, 200, 0.8) !important;
}

Want to see more demos? Click here.