Now up to version 5, this latest version of SuperBox brings support for image captions, HTML content, optional links and an entire re-write of the underlying code used for the layout system. All these features combined make SuperBox an even more flexible solution for designing and deploying stunning image galleries. Not to mention, SuperBox is now easier to use.

Example

This is a working example of SuperBox, using the default settings and the demo images supplied in the stack. You can download a fully functioning demo version of SuperBox using the button towards the top of this page. Click the thumbnail images to reveal the full size image and their associated caption content. You can also navigate through the gallery using your left / right keyboard keys.
 
Image 1.
Image 1
Image 2.
Image 2
Image 3.
Image 3
Image 4.
Image 4
Image 5.
Image 5
Image 6.
Image 6
Image 7.
Image 7
Image 8.
Image 8
Image 9.
Image 9
Image 10.
Image 10
Image 11.
Image 11
Image 12.
Image 12
Image 13.
Image 13
Image 14.
Image 14
Image 15.
Image 15
Image 16.
Image 16
Image 17.
Image 17
Image 18.
Image 18
Image 19.
Image 19
Image 20.
Image 20
Image 21.
Image 21
Image 22.
Image 22
Image 23.
Image 23
Image 24.
Image 24
Image 25.
Image 25
Image 26.
Image 26
Image 27.
Image 27
Image 28.
Image 28
Image 29.
Image 29
Image 30.
Image 30
Image 31.
Image 31
Image 32.
Image 32
Image 33.
Image 33
Image 34.
Image 34
Image 35.
Image 35
Image 36.
Image 36
Image 37.
Image 37
Image 38.
Image 38
Image 39.
Image 39
Image 40.
Image 40
Image 41.
Image 41
Image 42.
Image 42
Image 43.
Image 43
Image 44.
Image 44
Image 45.
Image 45
Image 46.
Image 46
Image 47.
Image 47
Image 48.
Image 48
Image 49.
Image 49
Image 50.
Image 50
Image 51.
Image 51
Image 52.
Image 52
Image 53.
Image 53
Image 54.
Image 54
Image 55.
Image 55
Image 56.
Image 56
Image 57.
Image 57
Image 58.
Image 58
Image 59.
Image 59
Image 60.
Image 60
Image 61.
Image 61
Image 62.
Image 62
Image 63.
Image 63
Image 64.
Image 64
Image 65.
Image 65
Image 66.
Image 66
Image 67.
Image 67
Image 68.
Image 68
Image 69.
Image 69
Image 70.
Image 70
Image 71.
Image 71
Image 72.
Image 72
Image 73.
Image 73
Image 74.
Image 74
Image 75.
Image 75
Image 76.
Image 76
Image 77.
Image 77
Image 78.
Image 78
Image 79.
Image 79
Image 80.
Image 80
Image 81.
Image 81
Image 82.
Image 82
Image 83.
Image 83
Image 84.
Image 84
Image 85.
Image 85
Image 86.
Image 86
Image 87.
Image 87
Image 88.
Image 88
Image 89.
Image 89
Image 90.
Image 90
 

Setup

Irregardless of your skill level, SuperBox is a stack anybody with modest RapidWeaver knowledge will have no difficulty in using. Follow these steps to get started:

  1. Install SuperBox following the normal installation procedure for all new stacks.
  2. On a Stacks page type, open your Stacks library and search for 'SuperBox'.
  3. Drag and drop a copy of SuperBox into your webpage.
  4. Click on the blue button to add a new image source. We recommend the demo images, if you are just getting started.
  5. Selecting the main SuperBox in edit mode gives you access to all its style and colour settings.
  6. If you select image sources in edit mode, you can use the interface to reference or add your own images.
  7. Preview the webpage to see the image gallery. Save your changes and export or publish when done.

As normal, mousing over any SuperBox settings will display an informational tooltip about what each setting does. You will find settings to adjust the height of expanded SuperBox panels, plus controls for navigation and caption positioning (if enabled). Spend some time experimenting with the different settings.

Please note; keyboard navigation and anchor navigation does not work reliably in RapidWeaver preview. It is best to preview or export your SuperBox page to a normal web browser window, to test this. Normal web browsers have a full address bar and the keyboard shortcuts you use will not conflict with those that RapidWeaver and Stacks uses.

SuperBox Sources

Four content sources are offered in SuperBox.
  • Demo Images loads 45 sample images and dummy 'lorem ipsum' captions. These images are repeated twice, to give a total of 90 images. This is a good image source to use if you want to quickly experiment with SuperBox, before using your own images.
  • Dragged and Dropped images are images you drag and drop into RapidWeaver. This is the easiest image source to use, however it will cause your RapidWeaver project file to grow in size, as it starts to store all the images.
  • Warehoused Images are images you setup using links. This is a good option to use if your images are stored at another location or you don't want to burden RapidWeaver with too much image data. It also works for images you have added to RapidWeaver as resources.
  • Content / HTML Only gives you the choice of using either a dragged and dropped thumbnail image or a warehoused image. The expanded SuperBox panel contains only written content or HTML (no full size image).
For best results, use square images (images of equal width and height) for the thumbnail images. Although you can use landscape or portrait images for thumbnails, this can give the result of the thumbnail grid looking more disjointed and less aesthetically pleasing. Full size images can be of any shape, and the clever 'flexbox' layout system SuperBox uses will help position your images and written content to gain the best possible fit, in the available space.

Both caption and HTML content is supplied to SuperBox via HTML data- attributes. Please take care to ensure that caption content avoids the use of any double-quote characters, and HTML content avoids the use of single-quote characters, as these could break the syntax.

Light and dark modes

Colour pickers come in two pairs - light and dark. Light is what most people will typically see when browsing the internet. However some computer operating systems like Mac OS Catalina provide the option of a 'dark mode' or 'night mode'. If dark mode is detected, then the dark colour scheme is used. Typically as the name suggests, you would setup a darker background fill and revert the text colour and navigation to white. Dark mode can look stunningly beautiful for big, high impact photo galleries.

Creating thumbnails and full size images

JPG is the best format to use for all images in SuperBox. All images should be saved at 72 DPI and it's recommend you optimise them to reduce file sizes even further. Free software like Resize Master is perfect to use for creating batches of thumbnail images, generated from your full size images. Ideally thumbnails should be square (equal height and width) to prevent the grid becoming disjointed; whereas the full size images can be any shape you like.

Anchoring to SuperBox items

Each item you add to SuperBox can be allocated a unique anchor. To do this, select the SuperBox item in edit mode to reveal its settings. Within the Optional Anchor box, give the item a unique ID. Much like all ID selector names you use in web development, the ID must start with a letter and contain no spaces or special characters (spaces can be safely replaced with hyphens or underscores). Assuming that you gave a SuperBox item a unique ID of cute-puppy then you can link to it by appending the anchor onto the webpage URL like this, with a 'pound' or 'hash' character:

https://example.com/mypage/#cute-puppy

As a real test, clicking this link reopens this same webpage in a new browser tab and opens the 20th item in our SuperBox example.