Step One
Create each expand element using the title element as the image tag. Assign it a trigclass=”noarrow” and give it an alt attribute that makes sense:
[expand title="<img src='http://example.com/image.jpg' />" trigclass="noarrow" tag="div" alt="turtles one"]This is the content of the first image[/expand]
Step Two
Wrap each expand element in a div with a unique class. We used ‘birdwire‘ because it makes all the images nice and need in a row like… birds on a wire! Hmmm, maybe we should have used ducksrow. Anyway, each element will now look like so:
<div class="birdwire">[expand title="<img src='http://example.com/image.jpg' />" trigclass="noarrow" tag="div" alt="turtles one"]This is the content of the first image[/expand]</div>
Final Step
Add the following to your theme’s style.css:
.birdwire {
display: inline;
float: left;
margin-right: 1.625em;
width: 160px;
}
And Blam-O! The images line up and float left like so:
After you will want to add <div style="clear: both"> </div> to force new content to show up below, fresh in it’s own line.
Highlander Grouping
Now, say you want to add highlander grouping. The code now would look like:
<div class="birdwire">[expand title="<img src='http://example.com/image.jpg' />" trigclass="noarrow" tag="div" alt="turtles one" rel="ninja-highlander"]This is the content of the first image[/expand]</div>
Grid of Images
In the above examples, the targets are displayed directly below the related triggers. The following example shows how to place a line of image triggers that will display the targets below all images using the roll-your-own method:
The Triggers
<div class="birdwire">
<img id="nj1" src="https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles-150x150.jpg" class="collapseomatic noarrow" rel="ninjtee-highlander"/>
</div>
<div class="birdwire">
<img id="nj2" src="https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles-150x150.jpg" class="collapseomatic noarrow" rel="ninjtee-highlander"/>
</div>
The Targets
<div style="clear: both;"> </div>
<div id="target-nj1" class="collapseomatic_content">Target content for first trigger</div>
<div id="target-nj2" class="collapseomatic_content">Target content for second trigger</div>