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.

You will need to edit the page or post HTML content in order to change the HTML as mentioned in this article. If you are not able to edit the HTML, because the content is generated by your theme or another plugin, then contact the plugin or theme developer to find out if there is a way to change their HTML using WordPress filters.

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.