イメージギャラリーのコンポーネント。
無料で、複数の見せ方を選択でき、見栄えもよく、そこそこの機能があります。

ダウンロード

Theme Sliderの画像サイズを縮めない方法

JSN ImageShowにはいくつかテーマがあって、そのうちのTheme Sliderは色々なエフェクトを掛けながら、登録している画像のスライドショーを表示するテーマです。

このテーマは、高さの指定ができる（厳密には、ショーケースにテーマを割り当てて、ショーケースの高さを指定する）のですが、表示する画像の高さが指定した高さを超えている場合、指定した高さに縮められてしまいます。

縮められれば画像の比率が崩れてしまうので、対処法としては、

  1. 画像自体を指定されたサイズにトリミングする
  2. 縮めないで表示する

になります。1はトリミングが面倒ですが、自分の思った通りに画像を表示できます。2はトリミングの手間が省けますが、思い通りに表示はできません。

2の方法で対処する場合は、コードを書き換える必要があります。

  • /plugins/jsnimageshow/themeslider/assets/js/skitter/jquery.skitter.js

このファイルの762行目、

img_clone.height(parseInt(self.settings.base_height)*scale);

この部分をコメントアウトします。

//img_clone.height(parseInt(self.settings.base_height)*scale);

これで、画像はオリジナルのサイズで表示されるようになります。

ただ、これでは画像の上から指定された高さの部分しか表示されないので、

div.container_skitter div.image img.image_main,
div.container_skitter div.box_clone a img {
  position: absolute;
  top: -50%;
}

こんな感じのCSSを指定してあげると、真ん中あたりが表示されると思います。

なお、この指定をしても、「ショーケース設定→画像→タブ切り替え効果」で設定できる効果によっては、切り替え中の画像に指定が及ばないようです。

とりあえず、FadeとFade Fourは大丈夫な模様？