如何使用Raphael.js创建幻灯片播放器以将幻灯片加载到单独的html div中？

Question

我想用Raphael.js制作幻灯片播放器。我希望它是一个插件，以便将来可以再次使用它。

这是一个直接来自拉斐尔创作者的例子，但它不符合我的需要：

http://raphaeljs.com/jsconfeu/在此示例中，Dimitry将幻灯片存储在数组中并按顺序触发它们。似乎运作良好。

然而，我正在寻找一种方法将幻灯片加载到不同的div（在不同的纸张元素上）以与我的jquery splitview模型一起使用。

主要观点： 1.用户可以从iPad的左侧导航栏面板中选择幻灯片。 2.每个幻灯片可以单独加载到右侧的幻灯片查看器面板中。

到目前为止，这是我的HTML代码：

<!-- Demo slide 1 -->
<div data-role="page" id="demo1_page1">

  <div data-role="header" data-backbtn="false">
    <h1>Mobility Bootcamp</h1>
  </div><!-- /header -->

  <div data-role="content"> 
    <div class="container"></div> //<----Here is the container div
    <a href="#demo1_page2">Next slide</a>
  </div><!-- /content -->

  <div data-role="footer" data-position="fixed" data-id="ew-footer" 
      class="ui-splitview-hidden">
    <div data-role="navbar">
      <ul>
        <li>
          <a href="#main" class="ui-btn-active" data-transition="slideup">Main</a>
        </li>
        <li><a href="#demo" data-transition="slideup">Demos</a></li>
      </ul>
    </div><!-- /navbar -->
  </div><!-- /footer -->
</div><!-- /page -->

<!-- Demo slide 2 -->
<div data-role="page" id="demo1_page2">
  <div data-role="header" data-backbtn="false">
    <h1>Classroom</h1>
  </div><!-- /header -->

  <div data-role="content">  
    <div class="container"></div>//<--------Here is the container div
    <a href="#demo1_page1">Previous slide</a>
    <a href="#demo1_page3">Next slide</a>
  </div><!-- /content -->

和Javascript：

// Here is the function that contains everything needed to 
//create a new slide and fill it with Raphael info.
var createContainer = function(selectedSlide) {
//Clear existing slide
$('#[id*="slide"]').remove();

// Create a new div with parameters.
$('<div/>', {
    id: 'slide' + selectedSlide,
    class: 'slide',
    text: 'container'+selectedSlide,
}).appendTo('.container'); // append it to container div

var container = "slide"+selectedSlide;

alert('just created container: '+ container);
// load the slide
    slides[selectedSlide](container);
};

var slides = [
0, //offset array for simplicity

// slide 1
function(container){
    console.log('slide 1 created!');
    var paper = new Raphael(container, 730, 600);
     var background = paper.rect(0, 0, 730, 600).attr({opacity: 1});
    background.attr({'gradient':'90-#444-#fff'});
}];
// is fired whenever a page is loaded.
$(window).bind('hashchange', function(){

// set the hashString to the current hash in the browser bar.
var hashString = window.location.hash;
hashString = hashString.split("demo1_page");

// set the selected slide to the hashString
var selectedSlide = hashString[1];

//  alert("currentSlide = "+container);

//Create the container for Raphael
    createContainer(selectedSlide);
});

Raphael.js是否有任何现有的幻灯片播放器示例会将幻灯片加载到单独的div中？