I have a playlist controlling media (audio or video, depending on the page) in an single instance of flowplayer. Aside from the title anchors for each media file, I have another block of divs with description texts for each media resource.
When I click on any item in the playlist, I want to both (1) launch that file in flowplayer, and (2) scroll to the description div for that file in my scrollable parent div.
As I have it at the moment, as soon as I tell scrollable to use the playlist as its navigator, it overrides the media file links, thus preventing flowplayer from successfully launching the file.
Here is my js for scrollable:
<script type="text/javascript">
$(function() {
$("div.scrollable").scrollable({vertical:true, size: 1, navi:'div.clips'});
});
</script>
and for flowplayer:
<script type="text/javascript">
$(function() {
$f("player", "assets/flash/flowplayer.swf", {
}).playlist("div.clips", {loop:true});
});
</script>
and here is my HTML:
<div id="textBlock2">
<div class="clips right">
<a href="[*mediaPlayer1*]" title="[*mediaPlayer1Title*]"><span class="trackNo">1. </span>[*mediaPlayer1Title*]</a>
<a href="[*mediaPlayer2*]" title="[*mediaPlayer2Title*]"><span class="trackNo">2. </span>[*mediaPlayer2Title*]</a>
<a href="[*mediaPlayer3*]" title="[*mediaPlayer3Title*]"><span class="trackNo">3. </span>[*mediaPlayer3Title*]</a>
<a href="[*mediaPlayer4*]" title="[*mediaPlayer4Title*]"><span class="trackNo">4. </span>[*mediaPlayer4Title*]</a>
<a href="[*mediaPlayer5*]" title="[*mediaPlayer5Title*]"><span class="trackNo">5. </span>[*mediaPlayer5Title*]</a>
<a href="[*mediaPlayer6*]" title="[*mediaPlayer6Title*]"><span class="trackNo">6. </span>[*mediaPlayer6Title*]</a>
<a href="[*mediaPlayer7*]" title="[*mediaPlayer7Title*]"><span class="trackNo">7. </span>[*mediaPlayer7Title*]</a>
<a href="[*mediaPlayer8*]" title="[*mediaPlayer8Title*]"><span class="trackNo">8. </span>[*mediaPlayer8Title*]</a>
</div>
<a class="video left" id="player"><img src="mp3Face.png" /></a>
<div class="scrollable left">
<div class="items">
<div>[*mediaPlayer1Text*]</div>
<div>[*mediaPlayer2Text*]</div>
<div>[*mediaPlayer3Text*]</div>
<div>[*mediaPlayer4Text*]</div>
<div>[*mediaPlayer5Text*]</div>
<div>[*mediaPlayer6Text*]</div>
<div>[*mediaPlayer7Text*]</div>
<div>[*mediaPlayer8Text*]</div>
</div>
</div>
<div class="clear"></div>
</div><!--end textBlock2-->
Does anyone know how I can achieve this functionality - trigger both a scrollable div and flowplayer with a single click?