前提・実現したいこと
ワードプレスでスライドショー系のwidthを100%に変更したいのですが、jQueryを使っているようですが、widthが最大1000pxで固定されてしまいます。
下記の コードのthis._max_width = 1000;を100%に変えても、数字以外のもの(例:1000px,100%)が入っているとreturnが0になり、スライドショーが表示できません。下記のコードでどうすればWidthを100%にできるでしょうか?
var Fader;
(function($) {
return $(function() {
return new Fader();
});
})(jQuery);
Fader = (function() {
function Fader() {
this._main_visual = $("#main-visual");
this._delay = 7000;
this._duration = 2000;
this._ul = $("ul", this._main_visual);
this._li = $("li", this._ul);
this._pics = [];
this._length = this._li.length;
this._showed = 1;
this._index = 1;
this._window = $(window);
this._max_width = 1000;
this._max_height = 400;
this._aspect = this._max_height / this._max_width;
this._init();
}
Fader.prototype._init = function() {
this._resize();
this._fader();
return this._onResize();
};
Fader.prototype._fader = function() {
var i, len, ref, val;
ref = this._li;
for (i = 0, len = ref.length; i < len; i++) {
val = ref[i];
this._pics.push($(val));
}
return this._startLoop();
};
Fader.prototype._startLoop = function() {
return setTimeout((function(_this) {
return function() {
if (_this._showed > (_this._length - 1)) {
_this._showed = 0;
}
return _this._pics[_this._showed].css({
zIndex: ++_this._index
}).fadeIn(_this._duration, function() {
if (_this._showed < 1) {
_this._pics[_this._length - 1].hide();
} else {
_this._pics[_this._showed - 1].hide();
}
_this._showed++;
return _this._startLoop();
});
};
})(this), this._delay);
};
Fader.prototype._resize = function() {
if (this._window.width() < this._max_width) {
return this._ul.css({
width: this._window.width(),
height: this._window.width() * this._aspect
});
} else {
return this._ul.css({
width: this._max_width,
height: this._max_width * this._aspect
});
}
};
Fader.prototype._onResize = function() {
return this._window.on("resize", (function(_this) {
return function() {
return _this._resize();
};
})(this));
};
return Fader;
})();
あなたの回答
tips
プレビュー