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:
This is the content of the first image
This is the content of the second image
This is the content of the third image
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>
This is the content of the first image
This is the content of the second image
This is the content of the third image
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>
Target content for first trigger
Target content for second trigger
