Why are these jQuery statements at the top of the file breaking the ones below?
The Jquery Accordion part it is breaking the others below (Nivo Slider and jPlayer).
Like you can see in this website: http://alexchen.info/brianfunshine
var $j = jQuery.noConflict();
$j(document).ready(function () {
/**
* Jquery Accordion
*/
$j('#list1b').accordion({
autoheight: false
});
$j('#list1c').accordion({
autoheight: false
});
$j('#list1d').accordion({
autoheight: false
});
$j('#list1e').accordion({
autoheight: false
});
/**
* Nivo Slider
*/
$j('.jimgMenu ul').kwicks({max: 310, duration: 300, easing: 'easeOutQuad'});
/**
* Jplayer
*/
var Playlist = function(instance, playlist, options) {
var self = this;
this.instance = instance; // String: To associate specific HTML with this playlist
this.playlist = playlist; // Array of Objects: The playlist
this.options = options; // Object: The jPlayer constructor options for this playlist
this.current = 0;
this.cssId = {
jPlayer: "jquery_jplayer_",
interface: "jp_interface_",
playlist: "jp_playlist_"
};
this.cssSelector = {};
$j.each(this.cssId, function(entity, id) {
self.cssSelector[entity] = "#" + id + self.instance;
});
if(!this.options.cssSelectorAncestor) {
this.options.cssSelectorAncestor = this.cssSelector.interface;
}
$j(this.cssSelector.jPlayer).jPlayer(this.options);
$j(this.cssSelector.interface + " .jp-previous").click(function() {
self.playlistPrev();
$j(this).blur();
return false;
});
$j(this.cssSelector.interface + " .jp-next").click(function() {
self.playlistNext();
$j(this).blur();
return false;
});
};
Playlist.prototype = {
displayPlaylist: function() {
var self = this;
$j(this.cssSelector.playlist + " ul").empty();
for (i=0; i < this.playlist.length; i++) {
var listItem = (i === this.playlist.length-1) ? "<li class='jp-playlist-last'>" : "<li>";
listItem += "<a href='#' id='" + this.cssId.playlist + this.instance + "_item_" + i +"' tabindex='1'>"+ this.playlist[i].name +"</a>";
// Create links to free media
if(this.playlist[i].free) {
var first = true;
listItem += "<div class='jp-free-media'>(";
$j.each(this.playlist[i], function(property,value) {
if($j.jPlayer.prototype.format[property]) { // Check property is a media format.
if(first) {
first = false;
} else {
listItem += " | ";
}
listItem += "<a id='" + self.cssId.playlist + self.instance + "_item_" + i + "_" + property + "' href='" + value + "' tabindex='1'>" + property + "</a>";
}
});
listItem += ")</span>";
}
listItem += "</li>";
// Associate playlist items with their media
$j(this.cssSelector.playlist + " ul").append(listItem);
$j(this.cssSelector.playlist + "_item_" + i).data("index", i).click(function() {
var index = $j(this).data("index");
if(self.current !== index) {
self.playlistChange(index);
} else {
$j(self.cssSelector.jPlayer).jPlayer("play");
}
$j(this).blur();
return false;
});
// Disable free media links to force access via right click
if(this开发者_如何学运维.playlist[i].free) {
$j.each(this.playlist[i], function(property,value) {
if($j.jPlayer.prototype.format[property]) { // Check property is a media format.
$j(self.cssSelector.playlist + "_item_" + i + "_" + property).data("index", i).click(function() {
var index = $j(this).data("index");
$j(self.cssSelector.playlist + "_item_" + index).click();
$j(this).blur();
return false;
});
}
});
}
}
},
playlistInit: function(autoplay) {
if(autoplay) {
this.playlistChange(this.current);
} else {
this.playlistConfig(this.current);
}
},
playlistConfig: function(index) {
$j(this.cssSelector.playlist + "_item_" + this.current).removeClass("jp-playlist-current").parent().removeClass("jp-playlist-current");
$j(this.cssSelector.playlist + "_item_" + index).addClass("jp-playlist-current").parent().addClass("jp-playlist-current");
this.current = index;
$j(this.cssSelector.jPlayer).jPlayer("setMedia", this.playlist[this.current]);
},
playlistChange: function(index) {
this.playlistConfig(index);
$j(this.cssSelector.jPlayer).jPlayer("play");
},
playlistNext: function() {
var index = (this.current + 1 < this.playlist.length) ? this.current + 1 : 0;
this.playlistChange(index);
},
playlistPrev: function() {
var index = (this.current - 1 >= 0) ? this.current - 1 : this.playlist.length - 1;
this.playlistChange(index);
}
};
var videoPlaylist = new Playlist("1", [
{
name:"Big Buck Bunny Trailer",
free:true,
m4v:"http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer_480x270_h264aac.m4v",
ogv:"http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer_480x270.ogv",
poster:"http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
},
{
name:"Finding Nemo Teaser",
m4v: "http://www.jplayer.org/video/m4v/Finding_Nemo_Teaser_640x352_h264aac.m4v",
ogv: "http://www.jplayer.org/video/ogv/Finding_Nemo_Teaser_640x352.ogv",
poster: "http://www.jplayer.org/video/poster/Finding_Nemo_Teaser_640x352.png"
},
{
name:"Incredibles Teaser",
m4v: "http://www.jplayer.org/video/m4v/Incredibles_Teaser_640x272_h264aac.m4v",
ogv: "http://www.jplayer.org/video/ogv/Incredibles_Teaser_640x272.ogv",
poster: "http://www.jplayer.org/video/poster/Incredibles_Teaser_640x272.png"
}
], {
ready: function() {
videoPlaylist.displayPlaylist();
videoPlaylist.playlistInit(false); // Parameter is a boolean for autoplay.
},
ended: function() {
videoPlaylist.playlistNext();
},
play: function() {
$j(this).jPlayer("pauseOthers");
},
swfPath: "js",
supplied: "ogv, m4v"
});
var audioPlaylist = new Playlist("2", [
{
name:"Tempered Song",
mp3:"http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3",
oga:"http://www.jplayer.org/audio/ogg/Miaow-01-Tempered-song.ogg"
},
{
name:"Hidden",
mp3:"http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3",
oga:"http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg"
},
{
name:"Lentement",
free:true,
mp3:"http://www.jplayer.org/audio/mp3/Miaow-03-Lentement.mp3",
oga:"http://www.jplayer.org/audio/ogg/Miaow-03-Lentement.ogg"
},
{
name:"Hidden",
mp3:"http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3",
oga:"http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg"
},
{
name:"Lismore",
free:true,
mp3:"http://www.jplayer.org/audio/mp3/Miaow-04-Lismore.mp3",
oga:"http://www.jplayer.org/audio/ogg/Miaow-04-Lismore.ogg"
},
{
name:"Hidden",
mp3:"http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3",
oga:"http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg"
},
{
name:"The Separation",
mp3:"http://www.jplayer.org/audio/mp3/Miaow-05-The-separation.mp3",
oga:"http://www.jplayer.org/audio/ogg/Miaow-05-The-separation.ogg"
},
{
name:"Hidden",
mp3:"http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3",
oga:"http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg"
},
{
name:"Beside Me",
mp3:"http://www.jplayer.org/audio/mp3/Miaow-06-Beside-me.mp3",
oga:"http://www.jplayer.org/audio/ogg/Miaow-06-Beside-me.ogg"
}
], {
ready: function() {
audioPlaylist.displayPlaylist();
audioPlaylist.playlistInit(false); // Parameter is a boolean for autoplay.
},
ended: function() {
audioPlaylist.playlistNext();
},
play: function() {
$j(this).jPlayer("pauseOthers");
},
swfPath: "js",
supplied: "oga, mp3"
});
});
Any suggestion of why?
I think this:
$j('#list1b').accordion({
autoheight: false
});
$j('#list1c').accordion({
autoheight: false
});
$j('#list1d').accordion({
autoheight: false
});
$j('#list1e').accordion({
autoheight: false
});
Could become this:
$j('#list1b, #list1c, #list1d, #list1e').accordion(
{autoHeight : false}
);
NOTE: the 'autoHeight' rather than the 'autoheight'
精彩评论