私は信じているjavascriptで解決する必要がある問題を抱えていますが、それを始める方法がわからないので、javascriptコミュニティの誰かが助けてくれることを願っています.
基本的に、次のコードを使用すると、10 個の画像をスライドショー カルーセルに読み込むことができます。ただし、これらの画像は 600px x 400px の縦または 400px x 600 の横のいずれかです。私が抱えている問題は、横長の画像がコンテナーの上部に垂直に配置されていることです。
CSSファイルにimage-Pとimage-Lの2つのクラスを作成することで、これを回避することができました
image-L には「 padding-top:100px 」があり、横長の画像を中央に垂直に整列させることができます。
私がやりたいのは、コードでどの画像が横向きかを確認してから作成することです
return '<img src="Images/' + item.url + '" class="image-L" alt="" />';
その他に使用するもの
return '<img src="Images/' + item.url + '" class="image-P" alt="" />';
よろしくお願いします。
乾杯ロブ。
<script type="text/javascript">
var mycarousel_itemList = [
{ url: "Image1.jpg" },
{ url: "Image2.jpg" },
{ url: "Image3.jpg" },
{ url: "Image4.jpg" },
{ url: "Image5.jpg" },
{ url: "Image6.jpg" },
{ url: "Image7.jpg" },
{ url: "Image8.jpg" },
{ url: "Image9.jpg" },
{ url: "Image10.jpg" }
];
function mycarousel_itemLoadCallback(carousel, state) {
for (var i = carousel.first; i <= carousel.last; i++) {
if (carousel.has(i)) {
continue;
}
if (i > mycarousel_itemList.length) {
break;
}
carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[i - 1]));
}
};
/**
* Item html creation helper.
*/
function mycarousel_getItemHTML(item) {
return '<img src="Images/' + item.url + '" class="image-L" alt="" />';
};
jQuery(document).ready(function () {
jQuery('#mycarousel').jcarousel({
size: mycarousel_itemList.length,
itemLoadCallback: { onBeforeAnimation: mycarousel_itemLoadCallback }
});
});