• Share this article:

Lightboxes

All ThemeFlood RapidWeaver themes include a lightbox effect. This lightbox effect is achieved using the popular, open source Nivo Lightbox plugin. Nivo lightbox is released under the MIT license, meaning that we are permitted to distribute it with themes and you are allowed to use it for both personal and commercial projects. It really is a superb lightbox effect and a lot of credit has to be given to the original developer of Nivo Lightbox. Of all the lightbox effects tested, this one was found to be the best. If you're using Wordpress for other projects, consider purchasing the Nivo Lightbox plugin for use in your Wordpress-powered website.

All the code required for the lightbox is already built into the theme; so you do not need to buy additional plugins or stacks. This lightbox effect will save you time and money. Everything you need is included within the theme contents; and lightboxes are setup and ready to use straight away. So you do not need to download anything from the Nivo lightbox website either. The lightbox can be used on just about any RapidWeaver page style, including the blog page style. Traditionally a lot of lightbox effects for RapidWeaver can only work on Stacks or Photo Album page types, so the Nivo lightbox provides a lot more flexibility.

The idea of a lightbox is to display content (commonly images or video) at a larger size, in the web browser window. Lightboxes can be triggered when a user clicks on a link or a thumbnail image in your webpage. Lightboxes are very user friendly, because they limit the need to have content open in new tabs or browser windows. The Nivo Lightbox effect we include in our themes is simple to get working, fully responsive and will compliment your webpages very nicely. Lightboxes can either be set to open singular content, or you can chain together a series of lightboxes to create a gallery set.

Creating a lightbox using the RapidWeaver link dialogue window

Getting lightboxes working in ThemeFlood themes is really straightforward to do. In actual fact, this is possibly the easiest lightbox to get working in any RapidWeaver theme! No complicated code is required.

Start by simply highlighting some text or a picture in your webpage. Click on the RapidWeaver 'add link' button, normally located in the toolbar of the page you're currently editing. This will open the link dialogue window, which you've probably seen and used many times before. From the pull-down menu at the top, choose to use either a URL, a resource or select a page. Then in the custom attributes section, give your link a class attribute with a value of lightbox, as pictured below.

Add link

Click on the Set Link button to apply these changes. Now when you preview the page and click the lightbox link, this should open your lightbox and display the linked content. To give the lightbox a title, go back into the same link dialogue window again, and add a new title attribute, with a value of whatever you want the title to be. This is pictured below.

Lightbox title

Now when you preview the page and trigger the lightbox again, you should see your title displayed below the content. To chain together a series of lightboxes with previous / next navigation links, you need to allocate each lightbox to a gallery (set). To do this, open the RapidWeaver link dialogue window again for your link. In the custom attributes section, add a new attribute of data-lightbox-gallery and then enter the name of the image set, as pictured below.

Lightbox gallery set

Another nifty feature of the lightbox we use in ThemeFlood themes is support for high-DPI images, to display on retina devices or screens. To get this working, open the RapidWeaver link dialogue window again for your link. In the custom attributes section, add a new attribute of data-lightbox-hidpi and then enter the URL to the high-resolution image, as pictured below.

Lightbox retina images

And this is what the completed lightbox will look like, when it's previewed in RapidWeaver. A beautiful method to display your content at a larger size, in any RapidWeaver page style:

Lightbox complete

Obviously, if you're wanting content like a YouTube or Vimeo video to open in your lightbox, then instead of linking to a resource (as demonstrated above) you would alternatively use a URL. You can fetch the URL of your video from the YouTube or Vimeo website. It's always best to use full addresses instead of shortened ones. Nivo lightbox will automatically extract the ID of the video, from the URL you provide.

Creating a lightbox using HTML markup

The HTML markup required for manually triggering links inside a lightbox is surprisingly simple, as this example code demonstrates:

<a href="http://example.com/path/to/image.jpg" class="lightbox" title="My Image">

In this example, an image stored online will be loaded into the lightbox. The class attribute and value of 'lightbox' tells the web browser that this link is to be light boxed. And the title attribute provides a convenient method to specify the title or caption of the image.

If you want to group multiple light boxes together and provide backwards and forwards navigation, add a data attribute of data-lightbox-gallery and a value to determine the name of this lightbox group.

<a href="http://example.com/path/to/image.jpg" class="lightbox" title="My Image" data-lightbox-gallery="gallery1">

Loading content via AJAX/iFrame/Inline

This is pretty advanced stuff, but is worth documenting nonetheless for the completeness of this support article. Nivo Lightbox can support the opening of AJAX, iFrames and inline content. You cannot set this up using the RapidWeaver link dialogue window very easily, but you can do it using HTML code. A typical example of this would be displaying a contact form or a box of terms and conditions for a user to read. To load content via AJAX you need to add a data-lightbox-type="ajax" attribute to your link like this:

<a href="demo.html" class="lightbox" title="My Image" data-lightbox-type="ajax">

For iFrames:

<a href="demo.html" class="lightbox" title="My Image" data-lightbox-type="iframe">

And for inline content, like a page divisional container:

<a href="#my-div" class="lightbox" title="My Image" data-lightbox-type="inline">

Customising the lightbox appearance

It's possible to apply some basic customisations to the lightbox effect. These modifications all make use of custom CSS code.

To change the colour of the window shade, use this custom CSS code:

.nivo-lightbox-theme-default.nivo-lightbox-overlay { 
    background: #666666;
    background: rgba(0, 0, 0, 0.6); 
}

Note that the background colour is specified twice, once in hexadecimal format for older web browsers and a second time in RGBa format, for newer web browsers. Adjusting the '0.6' in the RGBa property will also let you customise the opacity of the background fill. So working on the assumption we wanted to change the lightbox background to white and make it less transparent against the page behind, this would be the correct CSS code to use:

.nivo-lightbox-theme-default.nivo-lightbox-overlay { 
    background: #ffffff;
    background: rgba(255, 255, 255, 0.9); 
}

And this would be the result of this CSS code:

Lightbox style

To adjust the size of lightbox title and its colour, use this custom CSS code:

.nivo-lightbox-theme-default .nivo-lightbox-title {
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    background: #000000;
    color: #FFFFFF;
    padding: 7px 15px;
    border-radius: 30px;
}

In that code, you can also customise the font style, font weight, padding and border radius (rounded corners).

Icons used for the lightbox controls are formed using a set of images, ensuring compatibility with both standard displays and retina displays. If you wanted to change the icons used, you would need to edit the ones included in the theme or swap them with your own. These icons are stored in the theme contents. If replacing these with icons of your own, you must maintain the original naming and sizing properties.

Provide Feedback

Please use this form to provide feedback about this particular knowledgebase article. For example; to report broken links, errors or things you think could be worded better. We welcome all constructive feedback. All fields are required.

 

Feedback is submitted anonymously (unless you otherwise provide your name or contact details). We don't promise to reply to every feedback message received; neither is this a good place to request technical support. You can continue to request one-to-one support through the ThemeFlood website. See getting in contact for details.