Manually Specify Different FooBox Styles

See Demo Here

Code Example

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

Walkthrough

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!

To do this, you can add the optional "data-style" and/or "data-theme" attributes to the anchor tag of the image you are loading.

data-style="fbx-metro"

Sets the modal style to be Metro

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

data-style="fbx-rounded"

Sets the modal style to be the default Rounded

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

data-theme="fbx-blue"

Sets the modal color theme to blue

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

Combine Theme and Style

<a class="foobox" href="demo-pic.jpg" data-theme="fbx-blue" data-style="fbx-metro" data-title="Metro Style, but Blue Theme">
    Open Metro Blue FooBox
</a>

Other Colors

data-theme=fbx-dark

data-theme=fbx-green

data-theme=fbx-pink

Apply Your Own Custom Styles

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

Then all you need to do is add your custom CSS to the "Custom CSS" field in your FooBox settings in the "JS & CSS" tab. 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;
}
.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;
}

From there you can of course also still apply the "data-style" attribute and get a "Crazy Metro" box as well.