Toggle Menu

User-Inserted Thumbnails with Captions

Magic Box comes with a secondary interface that allows you launch a gallery from a link that already exists on your page. This can be extremely useful if you want to categorize your galleries. On this page, we've created three MBX galleries: Rock, Paper, and Scissors. The galleries were created with the Thumbnail option in the main MBX interface turned off. Then we designed a three-column row, and in each column we inserted a custom thumbnail, representing each gallery, along with a caption. We then selected each thumbnail and used the MBX Trigger UI to set each thumbnail to launch its relevant gallery. At the bottom of this page, you will find a mini-tutorial, describing the steps.

Choose a Gallery...

Paper: 3 Images

Rock: 4 Images

Scissors: 3 Images

How we did it...

The first task is to create your galleries. In this demo, there are three. We inserted the galleries in Code View so we could control where the markup goes.

Create the galleries

Switch to Code View and locate your closing body tag:

</body>

Make a new line just above the closing body tag and place your cursor on that new line. With your cursor on the new blank line, open the MBX interface using the main MBX icon on your Insert Bar/Panel:

Deselect the Thumbnails option.

Select your full-size images (or import them); and then set your desired options.

Click OK to create your gallery markup, which will look something like this:

<div id="p7MBX_1" class="p7MBX-01 p7MBX p7MBXnoscript transparency rounded matting dark overlay-caption-bottom">
<ul id="p7MBXlist_1" class="p7mbx-list">
<li><a href="pics-02/paper-02.jpg" class="mbx-image" title="" data-mbx-mode="fit">paper-02</a></li>
<li><a href="pics-02/paper-01.jpg" class="mbx-image" title="" data-mbx-mode="fit">paper-01</a></li>
<li><a href="pics-02/paper-03.jpg" class="mbx-image" title="" data-mbx-mode="fit">paper-03</a></li>
</ul>
<script type="text/javascript">
P7_MBXop('p7MBX_1',4,600,1,0,8,0,0,1,0,100,4,2,1,1,0,1,1);
</script>
</div>

Place your cursor to the right of the closing </div> tag and create a new blank line below it.

Place your cursor on the new line and open the main MBX interface again.

Set up your second gallery.

Repeat to set up your third gallery.

When you are done, you will have three MBX galleries in your code. Don't worry, because you will never need to go near this code again.

Set up your thumbnails

For this demo, we created a 3-column structure. If your CSS skills are not sufficiently advanced enough to do this quickly, on your own, you can use any one of several available PVII tools, such as: Quick Columns or the row/column creator tools that come with our Vanilla, Synergy, and Allegro page building systems. These tools will allow you to create rows with 2-5 columns.

Use the Insert > Image menu item in Dreamweaver to insert your own thumbnail into each column.

After inserting an image, place your cursor to the right of the image and press Enter to create a new paragraph. Add a caption below each image based on the names and nature of your three galleries.

Turn your thumbnails into MBX triggers

Select the first thumbnail and open the MBX Trigger interface using the MBX Trigger icon on your Insert Bar/Panel:

If you set up your galleries in order, then you will set the System ID to p7MBX_1.

The Trigger Text will be preset to the thumbnail image that was selected when you opened the interface. Do not change this.

Trigger Slide Number should be set to 1.

Click OK to assign the behavior to your thumbnail.

Repeat for your additional thumbnails.

That's it!