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 2

Image 3

Image 4

Image 5

Image 6

Image 7

Image 8

Image 9

Image 10

Image 11

Image 12

Image 13

Image 14

Image 15

Image 16

Image 17

Image 18

Image 19

Image 20

Image 21

Image 22

Image 23

Image 24

Image 25

Image 26

Image 27

Image 28

Image 29

Image 30

Image 31

Image 32

Image 33

Image 34

Image 35

Image 36

Image 37

Image 38

Image 39

Image 40

Image 41

Image 42

Image 43

Image 44

Image 45

Image 46

Image 47

Image 48

Image 49

Image 50

Image 51

Image 52

Image 53

Image 54

Image 55

Image 56

Image 57

Image 58

Image 59

Image 60

Image 61

Image 62

Image 63

Image 64

Image 65

Image 66

Image 67

Image 68

Image 69

Image 70

Image 71

Image 72

Image 73

Image 74

Image 75

Image 76

Image 77

Image 78

Image 79

Image 80

Image 81

Image 82

Image 83

Image 84

Image 85

Image 86

Image 87

Image 88

Image 89

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:- Install SuperBox following the normal installation procedure for all new stacks.
- On a Stacks page type, open your Stacks library and search for 'SuperBox'.
- Drag and drop a copy of SuperBox into your webpage.
- Click on the blue button to add a new image source. We recommend the demo images, if you are just getting started.
- Selecting the main SuperBox in edit mode gives you access to all its style and colour settings.
- If you select image sources in edit mode, you can use the interface to reference or add your own images.
- 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).
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 ofcute-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.