在Cycle2中使用jQuery切换基于幻灯片的标题

Question

Hopefully a simple fix here at the end of a long week.

I'm using Cycle2 for an image slider. C2 allows for transitioning captions based on the given slide, but it doesn't seem to allow for transitioning additional elements. In this case, I need a title in addition to the caption, but I don't want to use the built-in overlay feature (see fiddle for example of what I mean -- essentially, the title in the red bar needs to change based on the image).

Here's the fiddle: http://jsfiddle.net/jeremytripp/j58Ky/

Any thoughts or suggestions?

Here's some HTML so SO will let me post:

<div id="figuretitle" class="fluid"> <b>&nbsp;Combination Circuit</b> 
</div>
<div>
    <!-- prev/next links -->
    <div>
        <table style="width:100%;">
            <tr>
                <td style="width:50%;"> <a href=# id="prev">Prev</a>

                </td>
                <td align="right" style="width:50%;"> <a href=# id="next">Next</a>

                </td>
            </tr>
        </table>
    </div>
    <!-- slideshow -->
    <div class="cycle-slideshow" data-cycle-fx=scrollHorz data-cycle-timeout=0 data-cycle-prev="#prev" data-cycle-next="#next" data-cycle-swipe=true data-cycle-caption="#adv-custom-caption" data-cycle-caption-template="{{cycleTitle}}">
        <img src="http://jquery.malsup.com/cycle2/images/p1.jpg" data-cycle-title="<b>Figure 6-2</b> A combination circuit with a parallel component and series component.">
        <img src="http://jquery.malsup.com/cycle2/images/p2.jpg" data-cycle-title="<b>Figure 6-3</b> The <i>R</i><sub>1</sub> resistor is in series with an equivalent resistor for <i>R</i><sub>2</sub> and <i>R</i><sub>3</sub>.">
        <img src="http://jquery.malsup.com/cycle2/images/p3.jpg" data-cycle-title="<b>Figure 6-4</b> A circuit can be reduced to a single equivalent resistor.">
    </div>
</div>
<!-- empty element for caption -->
<div id="adv-custom-caption" class="fluid"></div>

Answer 1

JS added to change text in red bar per image selection

            el.html(opts.API.tmpl(template, slideOpts, opts, currSlide));
            $("#figuretitle").html(opts.API.tmpl(template, slideOpts, opts, currSlide));
            el.show();

Demo: http://jsfiddle.net/4Wxcg/

Answer 2

Thanks to JHuangweb for getting me on the right track. For future answer-seekers, here's the full solution.

http://jsfiddle.net/jeremytripp/j58Ky/1/

Basically you have to write in an additional caption selector into the Cycle2 JS and leave the template option blank. It's in the section commented as "caption plugin" -- a little more than halfway through the plugin JS. Your new selectors will look like this:

figureswitch: '> .cycle-switch',
figureswitchTemplate: '{{}}',

Then add the JS as JHuangweb suggested:

var el = opts.API.getComponent(name);
            if (el.length && template) {
                el.html(opts.API.tmpl(template, slideOpts, opts, currSlide));
                $("#figureswitch").html(opts.API.tmpl(template, slideOpts, opts, currSlide));
                el.show();
            } else {
                el.hide();

Then add these two options in the plugin HTML:

data-cycle-figureswitch="#figureswitch" 
data-cycle-figureswitch-template="{{cycleSwitch}}" 

Call your newly-recognizable ID where you want it:

<div id="figureswitch"></div>

and whip up a bit of CSS for it to follow and voila:

#figureswitch {
    height:3%;
    padding-top:1%;
    background-color:#C00;
    color:#FFFFFF;
    font-size: 0.9em;
    font-family: Verdana;
}