$(document).ready(function(){

	$("#jquery_jplayer_1").jPlayer({
		ready: function () {
			$(this).jPlayer("setMedia", {
				m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
				oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
			}).jPlayer("play");
		},
		ended: function (event) {
			$("#jquery_jplayer_2").jPlayer("play", 0); // This stops #jquery_jplayer_2 from playing
		},
		swfPath: "js",
		supplied: "m4a, oga"
	})
	.bind($.jPlayer.event.play, function() { // Using a jPlayer event to avoid both jPlayers playing together.
			$(this).jPlayer("pauseOthers");
	});

	$("#jquery_jplayer_2").jPlayer({
		ready: function () {
			$(this).jPlayer("setMedia", {
				m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
				oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
			}).jPlayer("play");
		},
		ended: function (event) {
			$("#jquery_jplayer_1").jPlayer("play", 0); // This stops #jquery_jplayer_1 from playing
		},
		swfPath: "js",
		supplied: "m4a, oga"
	})
	.bind($.jPlayer.event.play, function() { // Using a jPlayer event to avoid both jPlayers playing together.
			$(this).jPlayer("pauseOthers");
	});

});

I’ve added a comments in the js so you can see what’s going on.

$(document).ready(function() {
        $("#jquery_jplayer_1").jPlayer({
            ready: function(event) {
                $(this).jPlayer("setMedia", {
                    mp3: "http://somefile.mp3"
                });
            },
            swfPath: "http://www.jplayer.org/2.1.0/js",
            supplied: "mp3"
        });

So I assumed by adding ids like #jquery_jplayer_2, #jquery_jplayer_3, etc. would make it work. But still all instances play simultaneously. Do you think the solution would be to use if statements, and if yes, could you please show me how? Thanks!

Any help would be appreciated.

$(document).ready(function() {

		$("a.contact-btn").toggle(
      		function () {
       			 $("#contact").animate( {"top": "0"}, 900, "linear" );
     		 },
      		function () {
        		$("#contact").animate( {"top": "-400px"}, 900, "linear" );
    	});

		$('body').bind('click', function() {

			var position = $('#contact').css('marginTop');

			if ( position == '-400px') {
				alert('margin top is equal to -400px')
			}

		});
});

Where ‘form’ is your ‘#form-id’ and ‘#radio-button-id’ are the corresponding ID’s.

The code says this:
On submit of the form, check to see if #radio-button-id is checked. If not, prevent the default functionality of the form ( aka don’t submit ).

Yeah it does work quite nicely. It’s definitely easy enough to create – So I’d do that instead of paying for something like that The “fullscreen” background image confusion comes in when different people expect it to work differently. Both the examples you linked to are ones I’ve used before. I’ve also been asked to have one that doesn’t resize the size on browser resize – So it should only show more/less of the image. All of these options are valid. There is just no *specific* way of doing this to please everyone.

If the submit button is clicked when a certain radio button is selected display lightbox.

The supersized plugin is no exception. I’ve taken a screen shot of the supersized jquery plugin example page – One with my browser maximized, and next to it is my browser minimized to half the height. You’ll notice in the second browser the legs are cut off a bit, therefore it’s not a perfect full screen solution – and as I’ve mentioned above, there is no bullet-proof full screen solution. There is only a solution for your specific need, therefore there is no plug-and-play solution.