Bentobox: Using Outside WordPress

Bentobox can be used to create responsive galleries on any website, whether running WordPress or not. This is relatively simple though naturally requires a bit more technical knowledge than the simple WordPress shortcode.

Step 1

You need to include 3 files in your site:

  1. jQuery
  2. bento.js
  3. bento.css

This is how that might look inside your site’s head:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="bento.js"></script>
<link rel='stylesheet' href='bento.css' type='text/css' media='all' />

The latter two files can be found in the plugin’s main folder.

Step 2

Create a container element in the site’s body with the source images for your Bentobox. The element can and almost certainly should be hidden. The contents can include links (to images or other pages) surrounding the images. Links to images will be loaded in Bentobox’s lightbox by default.

<div style="display: none" id="myBentoSource">
 <img src="image1.jpg">
 <img src="image2.jpg">
 <img src="image3.jpg">
 <a href="http://example.com"><img src="image4.jpg"></a>
 <a href="image5-big.jpg"><img src="image5.jpg"></a>
</div>

Step 3

After the page has loaded, run the function bentobox() on the element.

$(window).load( function() {
 $('#myBentoSource').bentobox();
});

That’s it. A Bentobox with default parameters will be generated directly after the source element.

Parameters

To customise the output, use the following parameters:

 $('#myBentoSource').bentobox(gap, fullheight, fullwidth, class, style);
name type default description
gap number 0 The size of the gap between and around images, in pixels.
fullheight boolean true Whether to stretch the gallery to the height of the browser window. If this is false then a CSS height must be specified using class or style.
fullwidth boolean false Whether to stretch the gallery to the full width of the browser window, rather than the width of the container. Do not use if your site has a sidebar!
class string empty A class or classes to apply to the gallery.
style string empty Some CSS to apply to the gallery.

An example of all of the above:

 $('#myBentoSource').bentobox(4, true, true, 'foo bar', 'background: #ff9');

Lightbox

You can use the same lightbox effect used by Bentobox elsewhere in your site by adding the following Javascript, or something like it:

$(window).load( function() {
 $('a[href$=\'.jpg\'], a[href$=\'.jpeg\'], a[href$=\'.png\']').bentolightbox('article');
});

The article selector within the bentolightbox() function is the scope of the lightbox, meaning the element within which it cycles through images. If this is omitted, it defaults to body, thus cycling through all the images on the page.