WordPress.org

Support

Support » Plugins and Hacks » Collapse-O-Matic » [Resolved] Different images in title line instead of text

[Resolved] Different images in title line instead of text

Viewing 11 replies - 1 through 11 (of 11 total)
  • 6 different images that is. Thanks.

    Plugin Author Baden

    @baden03

    Yes, it’s possible. Couple of questions.
    1. have you checked out the documentation?
    2. how confortable are you with css?

    Ok, and a third:
    Can you share a link to the page you are working on?

    Hi Baden.

    1. Yup. Done a bit of tweaking already.
    2. Comfortable enough so far! Fire away…
    3. Can’t I’m afraid – got an “under construction” plugin on that I can’t remove just yet.

    Thanks.

    I’m really looking forward to your solution for this as well. Thanks!

    Plugin Author Baden

    @baden03

    Here is a little step-by-step of what you need to do to get image trigger elements to line up:
    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" 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" 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.
    Here is little woking example for you to check out: http://spacedonkey.de/623/collapse-o-matic-line-of-trigger-images/

    Let us know if you get it working!

    Thanks! That is really close to what I’m looking to do, but I need each trigger image to load the content in the same div below (not one div under each image). Is this possible? I’m trying to load full width slideshows with these icon triggers.

    Thanks!!!

    Also, can the trigger icon hide the other content (since I don’t want overlapping in the target content area)

    Thanks again!

    Plugin Author Baden

    @baden03

    Check out ‘highlander grouping’ in the documentation

    Oh right, that will definitely solve the hiding the open when clicking a new. Thanks! Any thoughts on having it show the target content in the same div?

    Plugin Author Baden

    @baden03

    That’s not really the way this plugin works. The only idea you might try, is to use the roll-your-own method and then group all the target divs together. Then assign the snap-shut class to all triggers.

    This will snap each open element shut when it collapses, and then the new element will expand gracefully. If that makes any sense.

    Best of luck!

    Brilliant – thanks heaps.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘[Resolved] Different images in title line instead of text’ is closed to new replies.
Skip to toolbar