Adding a title caption to Supersized slider?

Question

I am using this fullscreen background slider from Supersized http://buildinternet.com/project/supersized/. Currently my page displays the caption in the bottom (which is a functionality already built into the plugin). I don't know much jQuery, but essentially what I'm trying to get at is adding a different headline that slides in for each different background.

How do I go about this?

Answer 1

I used the drupal supersized initialisation script http://cgit.drupalcode.org/supersized/tree/js/supersized.js

It initialises a callback - supesrized_slide_callback(). There are callback hooks in supersized such as jQuery Supersized AfterAnimation

My code loads json and adapts to the css used by supersized. Add your own error checking.

jQuery.getJSON("sites/all/themes/mytheme/js/supersized_captions.json", function (data) {
   window.supsersizeddata = data;
});

window.supersized_slide_callback = function () {
  // jquery object method used.
  var details = this.supsersizeddata;

  var active_slide = jQuery('.activeslide');

  // hasOwnProperty
  if (active_slide.hasClass('slide-0')) {
   jQuery('.field-name-body').html(details['slide-0']);
  }
};

The JSON:

{
  "slide-0": ["<h2>Centaurus A</h2>"]
}

Extended as needed for each slide