WPプラグイン「Skitter Slideshow」で画像が表示されなくなる

お陰様で仕事も趣味も忙しくて、気付けば3月です。
コメントのお返事もろもろ出来てなくてスミマセン。。。

仕事で使うことになった、WordPressプラグイン「Skitter Slideshow」が使いやすいわりに、不具合あってアチャーな感じなのでメモしときます。

Skitter Slideshow とは?

Flash並に色んな種類のスライドショーが出来ちゃうjQueryプラグインです。

Skitter – Slideshow for anytime!

これをWordPressで簡単に使えるように下のが、Skitter Slideshow。
プラグインをインストールして、使用する画像を決めて、サイズやアニメーションの設定をぽちぽちして、貼付けたい場所に
<?php if ( function_exists('show_skitter') ) { show_skitter(); } ?>
を記述するだけ。超シンプル。

Skitter Slideshow の不具合

いただいたリニューアル案件で、すでに先方のサイトに導入されてたプラグイン。
リニューアル後もそのまま使ってもらう方向でやっていたんですが、先方が「(画像追加したら)見えなくなっちゃった(´・ω・`)」と言いまして。
そんなに難しいこともしてないプラグインなのになんで?と見てみたら、原因が分かりました。

「Crop Image」オプションを付けると画像が表示されなくなる

画像を切り抜きするオプション「Crop Image」をオンにすると、画像がない状態になってしまうようです。正しくは上手く画像が作られていない状態。

詳しく見てみると「wp-skitter-slideshow/image.php」で設定した画像を切り抜いているようなので、wp-skitter-slideshow/image.phpを見てみたら「空」でした。
何も書かれてない…!なんで?!しかし、理由は分かりました。

指定幅に画像を合わせたい場合

画像を切り抜くことが出来ないなら、設定した幅に画像の幅を合わせたいですよね。
設定した幅に合わせた画像を用意すればいいですが、それができない場合もあります。その場合は、wp-skitter-slideshow/wp-skitter-slideshow.php内にある

.box_skitter img { 
	width: auto !important; 
	max-width: none !important;
}

の部分を↓のように変更します。

.box_skitter img { 
	width: 100% !important; 
	max-width: none !important;
}

参考)
How to fix Skitter Slideshow image loading error | Web Design Sharepoint(en)

忘れずに「Crop Image」のチェックは外してください。
また、アニメーションによっては上手く動作しないものもあるので、必ず確認してください。

これくらいの短いネタがポツポツあるので、もう少しこまめに更新していこうと思います。
コメントお返事ももう少々お待ちください(;˘ω˘)

UPDATE : 2017/11/12 / Tags

関連記事

新着記事

コメントを残す