example of dynamic multiple instances of jplayer..

[Steve Jones]

I'm fairly new to jQuery and jPlayer. What I needed was to have
several players embedded into the page I was working on and I found
this to be a bit overwhelming because I didn't want to build a massive
list of instances each time I wanted to add a movie. So on the page I
have thumbnails that when clicked fade in the jplayer with the
appropriate movie attached. The players do not interfere with each
other...
here is the page so you can see what I am talking about ...

www.kurtejones.com/animations.html

I am posting this because these forums have helped me immensely in the
creation of this page. So I hope this helps out anyone with a similar
need.

$(document).ready(function(){
//loop through vids and assign a unique class for each
$(".thumbnailGallery > li").each(function(i){
var vidNum = $(this).addClass("vid" + (i+1));
});

$(".openVid").click(function(){
currentVid = $(this).parent().attr("class"); //get the current
link's class

newPlayerId = "jquery_jplayer_" + currentVid; // create id for
current video

var currMovObj = $(".jPlayer_movies"); //current player

var newObj = $(currMovObj).clone(); //create new player

$(currMovObj).remove();// remove old player

$(newObj).appendTo("#movieWrapper"); //insert new player

currObjId = $(newObj).find('.jp-jplayer').attr("id",
newPlayerId); // get id for current player

newMovie = $(currObjId).attr("id");


$("#mainNav, #branding, #footer").css("opacity", ".2");

currMovie = $(this).attr("href"); // get url to video of current
movie
currPoster = $
(this).find('img').attr("src").replace("thumbs","posters");

$(".jPlayer_movies").fadeIn();

$("#" + newMovie).jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4v: "http://kurtejones.com/" + currMovie + ".m4v",
ogv: "http://kurtejones.com/" + currMovie + ".ogv",
poster: "http://kurtejones.com/" + currPoster,
});
},
ended: function (event) {
$(this).jPlayer("stop");
},
swfPath: "js",
solution:"html",
supplied: "m4v, ogv"

});

$(".closeBtn").click(function(){
$("#" + newMovie).jPlayer("stop");
$(".jPlayer_movies").fadeOut();
$("#mainNav, #branding, #footer").css("opacity", "1");
});


return false;
});


});


Here are the thumbnails:

<ul class="thumbnailGallery avatarGallery group"> <!--START CONCEPT
GALLERY IMAGES-->

<li><a class="openVid" href="animations/desert" title="Kurt E. Jones
Animations" width="640" height="292">
<img class="thumbnails" src="images/animations/thumbs/desert.jpg" /></
a>
</li>

<li><a class="openVid" href="animations/frog" title="Kurt E. Jones
Animations" width="640" height="292">
<img class="thumbnails" src="images/animations/thumbs/frog.jpg" /></a>
</li>

</ul>

[Mark Panaghiston]

Nice stuff Steve. Thank you for sharing.

Best regards,
Mark P