Nivo Sliderはとても人気なプラグインですが、たまーにうまく動いてくれないことがあったりします。
ここでは最近自分が遭遇した現象とその対処法をメモします。
エフェクトがかからなくなる
非常に美しいエフェクトを多数持つプラグインですが、このエフェクトが動かなくなり、ただシンプルに画像が入れ替わるだけになってしまうことがあります。
このときにチェックするのはここです。
画像にリンクを張っているかどうか。貼っている場合は専用のクラスをつけているかどうか
原因
もちろんこのスライダーはスライド画像毎にリンクを張ることができます。ですが、ただ単にリンクを張ってしまうと、この現象が起こってしまうようです。
解決方法
Nivo Sliderでは画像のリンクには「nivo-imageLink」というクラスを付けないと正常に動作しませんので、リンクに1個ずつクラスを付けてあげればOKです。
CMSなどに組み込んでいる場合で自由にクラスを追加できない時は、jQueryなどで一括で設定してもOKかと。
|
1 2 3 |
$('#slider').children('a').each(function(){ $(this).append($(this).html()); }); |
リンクの挙動がおかしい場合
複数画像に異なるリンク先を指定してもすべて最後のリンク先になってしまう場合は、ここをチェックしてみて下さい。
画像タグやリンクをDIVで囲ってないかどうか
原因
スライドショーのラッパーと画像の間にDIVなど余計なタグが入ってるとリンクが上手く動作しないっぽいです。
解決方法
DIVとる。
これだけなんですが、CMSなどで、勝手にブロック要素を追加してしまう場合だとそうもいかなかったりしますよね。特に画像をCMSのウィジェットにしている場合なんかに多いかと思います。
ウィジェットで管理すると、簡単に並び替えたり出来るのですが、このように勝手にDIVが増えちゃうせいでリンクが上手く動作しないのは困りますよね。
具体的にはこんなコードになってる場合ですね。
|
1 2 3 4 5 6 |
<div id="slideWrap" class="slider-wrapper theme-light"> <div id="slider" class="nivoSlider"> <div class="widget"><a href="foo.html" class="nivo-imageLink"><img src="foo.jpg" alt=""></a></div> <div class="widget"><a href="bar.html" class="nivo-imageLink"><img src="bar.jpg" alt=""></a></div> </div> </div> |
テンプレートをいじれるならば、DIVが入らないように修正すればOKです。
でももしウィジェット部分がコアファイルの中に入ってて簡単には修正できない場合なんかは、jQueryを使って強引になんとかする方法もあります。要素の階層とかは自分の環境にあわせて修正して下さい。
|
1 2 3 4 5 6 |
jQuery(document).ready(function($) { $('#slider').children('div').each(function(){ $('#slider').append($(this).html()); $(this).remove(); }); }); |
#slider とリンクの間にDIVが入ってるとダメならば、中身を１つ上の階層（#sliderの中）に移動してしまえばいいわけですので、まずは #slider の子要素であるDIVに対して、その中身をそのまま#slider にアペンドします。
そしてもとのDIVをremove()してしまい、
|
1 2 3 4 5 6 |
<div id="slideWrap" class="slider-wrapper theme-light"> <div id="slider" class="nivoSlider"> <a href="foo.html" class="ivo-imageLink"><img src="foo.jpg" alt=""></a> <a href="bar.html" class="ivo-imageLink"><img src="bar.jpg" alt=""></a> </div> </div> |
という形になれば完成です。
先に挙げたクラスをつけるスクリプトも一緒に書くと、
|
1 2 3 4 5 6 7 |
jQuery(document).ready(function($) { $('#slider').children('div').each(function(){ $(this).children('a').addClass('nivo-imageLink'); $('#slider').append($(this).html()); $(this).remove(); }); }); |
となります。
どうしてもテンプレートなどから弄れない場所に設置したい場合なんかは試してみてはいかがでしょうか？
最後に、若干動作が分かりにくいかもしれませんが，スクリプト部分のサンプルをおいときます。このように中のコンテンツを上の階層にいどうできるようになれば、ほかにもいろいろ使い道があるかもしれませんね。
※resultを押すと動作します。画像の周りのDIVには色が塗ってあるので一瞬だけピンクになってすぐ消えると思いますが，消えたタイミングでDIVがremoveされたということです。
コメントする