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!