Slideshow with headline and caption outside the slideshow

Question

I am working with http://responsive-slides.viljamis.com/ and need to have a headline and paragraph display and rotate outside the slideshow. Something similar to this:

http://www.rodale.com/smoothie-ingredients?

I am not much of a JS guy and tried a few options to no prevail. My current code is:

  <script>
$(function () {

  // Slideshow
  $("#slider").responsiveSlides({
    auto: false,
    pager: false,
    nav: true,
    speed: 500,
    maxwidth: 728,
    namespace: "large-btns",
    before: function(){
        }, // Function: Before callback
    after: function(){
        $(".current").html($(".rslides").find("li#" + $("." + this.namespace +     "1_on").attr("id")).index() + 1);
    } // Function: After callback
  });
$(".total").html($(".rslides li").index() + 1);
});

I tried appending a DIV for the slide H3 and P to display in but I can't get it. Any help would be greatly appreciated.

Answer 1

Ideally you would edit the library to pass back the current index to the after function. nonetheless if you want a quick fix / hack:

you can do something like this:

see jsfiddle here:

http://jsfiddle.net/L5T6Y/1/

with a sample html like this:

<div id="slide_content_body">
    <div id="slide_content_0" class="slide_content">
        <h2>Superfood Smoothies! 1</h2>
    </div>
    <div id="slide_content_1" class="slide_content" style="display: none;">
        <h2>Superfood Smoothies! 2 </h2>
    </div>
    <div id="slide_content_2" class="slide_content" style="display: none;">
        <h2>Superfood Smoothies! 3</h2>
    </div>
</div>

<div class="rslides_container">
    <ul class="rslides" id="slider1">
        <li>
            <img src="http://viljamis.com/responsive-slides/1.jpg" alt="" />
        </li>
        <li>
            <img src="http://viljamis.com/responsive-slides/2.jpg" alt="" />
        </li>
        <li>
            <img src="http://viljamis.com/responsive-slides/3.jpg" alt="" />
        </li>
    </ul>
</div>

js:

$(function () {

    // Slideshow 1
    var boo = $("#slider1").responsiveSlides({
        auto: false,
        pager: true,
        nav: true,
        speed: 500,
        maxwidth: 800,
        before: function () {
        }, // Function: Before callback
        after: function () {
            $( '.slide_content' ).hide();
            $( '#slide_content_' + $('.rslides1_on').index() ).show();
        } // Function: After callback
    });
});

RE if you want to have the content in the li you can do it like this:

check out this fiddle: http://jsfiddle.net/dnAC2/2/

change the js function to do something like this:

 $('#slide_content_panel').html( $('.rslides1_on .content').html() );

as for the html it would look something like this:

<div id="slide_content_panel">

</div>

<div class="rslides_container">
    <ul class="rslides" id="slider1">
        <li>
            <img src="http://viljamis.com/responsive-slides/1.jpg" alt="" />
             <div class="content" style="display: none;">
                <h2>Superfood Smoothies! 1</h2>
            </div>
        </li>
        <li>
            <img src="http://viljamis.com/responsive-slides/2.jpg" alt="" />
            <div class="content" style="display: none;">
                <h2>Superfood Smoothies! 2</h2>
            </div>
        </li>
        <li>
            <img src="http://viljamis.com/responsive-slides/3.jpg" alt="" />
            <div class="content" style="display: none;">
                <h2>Superfood Smoothies! 3</h2>
            </div>
        </li>
    </ul>
</div>