Different Styles

You would normally set the default style and theme for your entire site, but you can have different looking FooBox modals of different galleries and pages!

All you need to do is add some data attributes to your anchor links:


Sets the modal style to be Metro

Open Metro FooBox

<a data-style="fbx-metro" class="foobox" href="demo-pic.jpg" data-title="Metro Style">Open Metro FooBox</a>


Sets the modal style to be the default Rounded

Open Rounded FooBox

<a data-style="fbx-rounded" class="foobox" href=demo-pic.jpg" data-title="Rounded Style">Open Rounded FooBox</a>


Sets the modal color theme to blue

Open Blue FooBox

<a data-theme="fbx-blue" class="foobox" href="demo-pic.jpg" data-title="Blue Theme">Open Blue FooBox</a>

Other Colors





You can apply a CSS class to the FooBox modal, in order to completely customize the look or colors. Simple add a data-modal-class data attribute:

<a data-modal-class="my-custom-class" class="foobox" href="demo-pic.jpg">open image</a>

Then all you need to do is add some custom CSS to the page or theme. Here is an example:


Here is the CSS I used:

.crazy, .crazy .fbx-caption {
	background-color: #800;
	background-color: rgba(128, 0, 0, 0.7);
.crazy .fbx-inner {
	border-color: #0f0 !important;
.crazy .fbx-prev,
.crazy .fbx-next {
	background-color: #0f0;
.crazy .fbx-loader,
.crazy .fbx-close,
.crazy .fbx-play,
.crazy .fbx-pause,
.crazy .fbx-fullscreen-toggle {
	border-color: #ff0 !important;
	background-color: #ff0;

Leave a Reply