jFlow - Multiple instances on one page: Is it possible?

jFlow - Multiple instances on one page: Is it possible?

Hello, I'm trying to get jFlow to initiate on multiple sliders on one page.  It's proving to be an absolute bitch :[

This is my script at the top of the page:

  1. <script>
     $(function() { 
         $("#controller").jFlow({ 
             slides: "#slides", 
             width: "640px", 
             height: "360px", 
             duration: 600 
         }); 
     });
    </script>

    <script>
     $(function() { 
         $("#controller2").jFlow({ 
             slides: "#slides2", 
             width: "640px", 
             height: "360px", 
             duration: 600 
         }); 
     });
    </script>























Here's my code for the first instance (which works just fine) so far:

  1. <div id="wrap" style="position:absolute; left:80px; top:967px; width:640px; height:360px;">
        <div id="slides">
            <div class="imgteaser">
                <a href="#">
                <img src="images/placeholder.png" border="0">
                        <span class="desc"><span class="work_title_black">Work Title</span></br>
                        <span class="work_info_black">Blandit turpis patria euismod</span>
                </a>
            </div>
            <div class="imgteaser">
                <a href="#">
                <img src="images/placeholder2.png" border="0">
                        <span class="desc"><span class="work_title_black">Work Title</span></br>
                        <span class="work_info_black">Blandit turpis </span>
                </a>
            </div>
            <div class="imgteaser">
                <a href="#">
                <img src="images/placeholder.png" border="0">
                        <span class="desc"><span class="work_title_black">Work Title</span></br>
                        <span class="work_info_black">Blandit turpis patria euismod at iaceo </span>
                </a>
            </div>
        </div>
    </div>

    <div id="controller">
           <span class="jFlowControl"></span>
           <span class="jFlowControl"></span>
           <span class="jFlowControl"></span>
    </div>


    <div id="prevNext" style="position:absolute; left:720px; top:1120px; width:56px; height:66px; z-index:20px;">
    <span><img src="images/next_black.png" width="56" height="66" alt="NEXT" class="jFlowNext"></span>
    </div>

    <div id="prevNext" style="position:absolute; left:24px; top:1120px; width:56px; height:65px; z-index:20px;">
    <span><img src="images/prev_black.png" width="56" height="65" alt="PREVIOUS" class="jFlowPrev"><span>
    </div>






































Below is the code for the 2nd instance:
  1. <div class="wrap" style="position:absolute; left:80px; top:1487px; width:640px; height:360px;">
        <div id="slides2">
            <div class="imgteaser">
                <a href="#">
                <img src="images/placeholder.png" border="0">
                        <span class="desc"><span class="work_title_white">Work Title</span></br>
                        <span class="work_info_white">Blandit turpis </span>
                </a>
            </div>
            <div class="imgteaser">
                <a href="#">
                <img src="images/placeholder2.png" border="0">
                        <span class="desc"><span class="work_title_white">Work Title</span></br>
                        <span class="work_info_white">Blandit turpis</span>
                </a>
            </div>
            <div class="imgteaser">
                <a href="#">
                <img src="images/placeholder.png" border="0">
                        <span class="desc"><span class="work_title_white">Work Title</span></br>
                        <span class="work_info_white">Blandit turpis patria </span>
                </a>
            </div>
        </div>
    </div>

    <div id="controller2">
           <span class="jFlowControl"></span>
           <span class="jFlowControl"></span>
           <span class="jFlowControl"></span>
    </div>

    <div id="prevNext" style="position:absolute; left:24px; top:1638px; width:56px; height:68px;">
    <span><img src="images/prev_white.png" width="56" height="68" alt="" class="jFlowNext"></span>
    </div>
    <div id="prevNext" style="position:absolute; left:722px; top:1638px; width:57px; height:68px;">
    <span ><img src="images/next_white.png" width="57" height="68" alt="" ></span>
    </div>




































After some intense googling the only way I can find of making it work is by copying the creators code - whose site has been hacked apparently.

I'm a designer and code is already quite a mind-fuck if I'm honest, if anyone can lend a hand it'd be more than appreciated.

Cheers