title: jQuery cycle access data in array and append to div
body: <p>I worked up a slightly tricked-out jQuery cycle on my site and I need to load the <code>data</code> from the specific slide into a different div which sits on top of the actual slider, so each time I hit next/prev it will load the correct data - my question is in the callbacks how to I set the index so it corresponds to the correct data in my array? I suppose the real question would be about accessing data in an array, not cycle.</p>
  
  <pre><code>    var array = [ 
          {
              url: 'slide01.jpg',
              data : 'Eat, &lt;br /&gt; Drink, &lt;br /&gt; Escape!'
          },    
          {
              url: 'slide02.jpg',
              data : 'Eat, &lt;br /&gt; Drink, &lt;br /&gt; Escape!2'
          },  
          {
              url: 'slide03.jpg',
              data : 'Eat, &lt;br /&gt; Drink, &lt;br /&gt; Escape!3'
          },  
          {
              url: 'slide04.jpg',
              data : 'Eat, &lt;br /&gt; Drink, &lt;br /&gt; Escape!4'
          },  
          {
              url: 'slide05.jpg',
              data : 'Eat, &lt;br /&gt; Drink, &lt;br /&gt; Escape!5'
          }                        
      ];
  
      var path = 'img/';
  
          $.each(array, function(i) {
              $('#slider').append('&lt;li data-id="' + i + '"&gt;&lt;img src=' + path + array[i].url + '&gt;&lt;/li&gt;');
          });
  
          $('#slider').cycle({
          fx: "scrollHorz",
          next: "#next",
          prev: "#prev",
          speed: 1000,
          timeout: 5000,
          before: onBefore(),
          after: onAfter(),
          cssBefore: {
              opacity: 0
          },
          animIn: {
              opacity: 1
          },
          animOut: {
              opacity: 0
          },
          cssAfter: {
              opacity: 1
          },
          delay: 3000
          });
          function onBefore() { 
          $('#content').html("Scrolling image:&lt;br&gt;" + this.src); 
          } 
          function onAfter() { 
          $('#content').empty().append('&lt;h1&gt;' + array[i].data + '&lt;/h1&gt;'); 
          }       
  </code></pre>