Multiple captions

[dlzi]

Is it possible to have independent and multiple animate captions like http://iprodev.com/iview/?

[Mottie]

Hi danielzilli!

Of course! Here is a demo

But there are two minor issues:

• There isn't a delay you can set (yet) before animating elements, so I just made one a little longer.
• The FX extension expects the top and left position of the element to be zero, so I had to wrap the captions in another div that was positioned.

One of these days when I have more time, I'll rewrite the FX extension to enable you to do a lot more.

CSS

.captions {
    position: relative;
}
.caption1 div, .caption2 div {
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 10px;
    border-radius: 5px;
}
.caption1 i, .caption2 i {
    color: #0080ff;
}
.caption1 {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 20px;
}
.caption2 {
    position: absolute;
    bottom: 10px;
    left: 30px;
}

HTML

<ul>
    <li class="captions">
        <img src="http://placekitten.com/400/300" alt="" />
        <div class="caption1"><div>Cat:</div></div>
        <div class="caption2"><div>Old English <i>catte</i>, from Latin <i>cattus</i>;<br/>
            related to Old Norse <i>köttr</i>, Old High German <i>kazza</i>,<br/>
            Old French <i>chat</i>, Russian <i>kot</i></div>
        </div>
    </li>
    ...
</ul>

Script

$('#slider')
    .anythingSlider()
    .anythingSliderFx({
        '.caption1 div' : [ 'top', '100px', '500', 'easeInOutCirc' ],
        '.caption2 div' : [ 'right', '800px', '2000', 'easeOutElastic' ]
    });

[dlzi]

Hi Mottie,

Thanks for your answer! Nice example.

Cheers