tips blog

jCarouselliteで文字が隠れる・高さ設定がうまくいかない

2014年7月25日

jcarousellite_1.0.1.js

■症状
文字が隠れる・一部見えなくなる
最大の高さ(幅)にあわせてくれない

■原因
$.height()を使用しており、最初の要素の幅・高さを使用する
そもそも写真などの固定サイズ用で、文字のような可変するタイプで使えるものでは無い?

■解決法1
$..jCarouselLite前に一覧の幅高さを最大値になるように設定しておく
jQuery(function($){
$(window).bind(‘load’,function(){ //← 画像を読み込んだ後になるように
var maxWidth=0;
var maxHeight=0;
$(任意).each(function(){
if($(this).width()>maxWidth)maxWidth=$(this).width();
if($(this).height()>maxHeight)maxHeight=$(this).height();
});
$(任意).jCarouselLite(オプション);
});
});

■解決法2
jcarousellite_1.0.1.jsを書き換える(規約上駄目かも)
247行目

li.css({width: li.width(), height: li.height()});
↓ 
li.css({width: getMax(li,’width’), height: getMax(li,’height’)});
function getMax(ob,func){
var m=0;
ob.each(function(){
var n=parseInt($(this)[func]());
if(n>m)m=n;
});
return m;
}

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です