Lightbox

This feature consists of an image wrapped in a link and a lightbox pop-up container. The lightbox pop-up also has two containers: one for the image and another for the caption. The caption contains a heading and a rich text area. The pop-up will generate a "close" button and forward/next controls.

For a complete list of best practices, visit the main portlet page: Features

HTML Structure


<div class="featureWrapper lightbox">
	<div class="feature">
		<a class="gallery" href="#gallery-1">
			<img src="theme/features/feature1.jpg" alt="" />
		</a>
		<div class="lightbox-popup" id="gallery-1">
			<div class="image">
				<img src="theme/features/feature1.jpg" alt="" />
			</div>
			<div class="caption">
				<h2>Feature Title</h2> 
            	                <!-- Rich text. This is the ONLY area where text elements may be added/edited. --> 
      			        <p>Feature content</p>
				<!-- End rich text -->
			</div>
		</div>
	</div>
	<!-- End feature -->
	<!-- Copy/paste div.feature and contents for more features of the same type -->
</div>
<!-- End featureWrapper -->

<!-- The following are part of the render template therefore cannot be altered. Include these files in the <head> OR at the bottom just before </body>) -->

<link href="//cdn.rawgit.com/noelboss/featherlight/1.7.5/release/featherlight.min.css" type="text/css" rel="stylesheet" />
<link href="//cdn.rawgit.com/noelboss/featherlight/1.7.5/release/featherlight.gallery.min.css" type="text/css" rel="stylesheet" />
<script src="//cdn.rawgit.com/noelboss/featherlight/1.7.4/release/featherlight.min.js" type="text/javascript" charset="utf-8">//</script>
<script src="//cdn.rawgit.com/noelboss/featherlight/1.7.4/release/featherlight.gallery.min.js" type="text/javascript" charset="utf-8">//</script>

<script>
		$('a.gallery').featherlightGallery({
			previousIcon: 'Previous',
			nextIcon: 'Next',
			galleryFadeIn: 200,
			galleryFadeOut: 300
		});
</script>

Lightbox

HTML Structure

Default Styling

Lightbox Custom Styling Example 1

Lightbox Custom Styling Example 2