TYPO3 サイトのモバイル版を開発しています。nivosliderそこでは、公式に知られている Nivo Slider を使用するプラグインを使用します。次に、スライダーのサイズを小さくする必要があります。どうすればこれに到達できますか？
TYPO3 では、プラグイン ページに幅と高さの設定がありますが、これはフル サイズの Web サイトにも影響します。マニュアルがないので、後でTyposcriptを使って幅と高さを設定することはできないと思います。
CSSで幅を設定してみた
.nivoSlider {
width: 300px !important;
height: auto !important;
}
.nivoSlider img {
width: 300px !important;
height: auto !important;
}
ただし、スライダーが読み込まれると、通常のサイズの画像が使用されます。スライダー コンテナー自体のみが画像をトリミングしていますが、高さが正しくありません (ドットと画像の小さな部分のみが表示されます)。
また、ドキュメントを調べて、幅と高さを何らかの方法で設定できるかどうかを確認しようとしました。しかし、設定が見つかりませんでした。使用できる javascript/jquery ソリューションはありますか? これは機能しません:
$(document).ready(function() {
$('.nivoslider img').each(function(index, element){
alert('test');
$(this).width(300);
var src = $(this).attr("src");
src = 'fileadmin/templates/timthumb/timthumb.php?src=' + src + '&w=300';
$(this).attr("src", src);
});
});
.nivoslider後でビルドされるようですが、私のコードは前に実行されます。これは確認です：
if ($('.nivoslider').length != 0) {
alert('element found');
}else{
alert('element NOT found');
}
上記のコードelement NOT foundは、拡張子の初期化が最後にありheader、私のコードが前にあるためです。TYPO3 のヘッダーの最後に Javascript コードを含めるにはどうすればよいですか?
解決策が見つからないため、この CSS を使用すると思います。
.nivoslider {
display: none;
}