【jQuery】高機能スライダーSlider Proで画像のクリックでリンク先に飛ばない場合の対処方法


  • 公開:
  • 更新:
  • 編集:
概要 ▶ jQueryを使ったスライダー「Slider Pro」の画像にリンクを付けるとクリックしてもChromeでは効かない場合の対策を解説。

20160619-SliderPro-クリックできない問題を修正-00

画像をウェブページ上でスライドのように切り替えるスクリプトは、いわゆるスライダーと呼ばれます。



●高機能スライダースクリプト「Slider Pro」

このスライダーを使うためのスクリプトとして有名で高機能なスクリプトに「Slider Pro」があります。

Slider ProはjQueryと一緒にロードして使うタイプのスライダーのスクリプトです。

20160619-SliderPro-クリックできない問題を修正-02

画像出典:Slider Pro - Elegant and Professional Sliders



Webサイト制作に役立つ情報を発信しているサイト「コリス(Coliss)」でも紹介されていましたね。

Slider Proの特徴

Slider Proはさまざまなスライダーをモジュール式に実装でき、レスポンシブ対応、タッチ操作にも対応したjQueryのプラグインです。

[JS]スライダーのスクリプトを探しているなら絶対チェックした方がいいスクリプト -Slider Pro( コリス)


実際に制作したSlider Proを使ったスライダーはこんな感じ。

20160619-SliderPro-クリックできない問題を修正-01

画像出典:相談できる印刷会社 吉田印刷所

●PC版Chromeだとスライダー画像のリンクが効かない

このSlider Proのスクリプトでは、画像にリンクを張ってクリック(タップ)したらリンク先に飛ばすこともできるのですが、Chromeだとクリックしてもリンク先に飛ばない、という問題が発生することがあります。

(同じページをInternet Explorer・Edge・Firefoxで開いた場合は発生しません)


同じ問題で約1年前に悩まれている方もいました。

sliderproでリンクをつけようと思ったら、上手く行かないので、ライトボックスっぽい奴を動かしてるプログラムに無理やりurl取得してlocation.hrefしてリンクを飛ばしました。

sliderproの画像をクリックしたら別のページへ飛ばす方法(メシのタネ)

この問題について、上記サイトに書かれている以外の解決方法が分かったので紹介します。



●問題の原因

問題の原因は何なのか?と調べてみると、どうやらPC版のChromeでスワイプの処理が原因のようです。

PC版のChromeでは、タブレットPCやタッチパネル搭載のPCでは、スワイプ処理で「前のページに戻る」「次のページに進む」という処理ができます。

タブレットPCやタッチパネルを搭載したノートPCは、スマホと同じようにタッチ操作でアプリを利用することができます。

(中略)

Webブラウザ「Google Chrome」では、上記の操作のほかに、左右にスワイプすることで前のページ、次のページへの送り操作が可能で、ニュースサイトなどを読む際に便利です。

タッチパネル対応PCでも威力を発揮! Windows 10のタッチ操作使いこなし術(ウイルスバスター チャンネル)

しかし、なぜかわかりませんが、タブレットPCやタッチパネル搭載のPCでも効いてしまう上に、通常はスマホなどでしか想定していないスワイプの処理が、PCでも動作し、そのことで画像クリックの処理がうまく動作していないようなのです。



●問題の対処方法

解決方法は、要素に「sp-selectable」のclassを付けることです。

sp-selectableのclassを付けることでスワイプの処理を受け付けなくすることができます。(本来はスワイプのあたり判定のある部分の文字をスマホでも選択するようにするためのclassらしいです)


ただし、単純にsp-selectableのclassを付けてしまうと、今度はスマホなどで、スワイプの処理ができなくなってしまうので、スクリプトで画面の幅サイズが大きい場合をPCと仮定し、その時だけ、sp-selectableのclassを付けるようにします。


GitHubに掲載されているサンプルHTMLの画像にリンクを追加してスライダーのHTMLを組んでいるとします。

<div class="slider-pro" id="my-slider">
    <div class="sp-slides">
        
        <div class="sp-slide">
            <a href="path/url1.html"><img class="sp-image" src="path/to/image1.jpg"/></a>
        </div>
        
        (中略)
        
    </div>
</div>


この場合は、以下のスクリプトをjQueryを読み込んだ後の部分に追加します。

<script>
    $(function(){
        if($(window).width() > 767) { // ウインドウサイズの幅が767ピクセルよりも大きい場合
            $("#my-slider .sp-slide a").each(function(){
                $(this).addClass("sp-selectable").css("cursor","pointer");
            });
        }
    });
</script>

行っている処理は、スライダーの中にある「sp-slide」のclassの付いた要素の中の「aタグ」に「sp-selectable」のclassを付けています。

また、sp-selectableのclassが付いた要素は、カーソルが通常の矢印になってしまうので、クリックできることを知らせるために、カーソルの形もCSSで「pointer」(いわゆる指のアイコン)に変更します。


以上です。

この対策で、PCでは画像をスワイプして(ドラッグして)スライダー画像を切り替える事ができなくなりますが、大きな影響はないでしょう。


それでは、よいSlider Proライフを。



●参考ページ

GitHubでも書いてあるように、オプションでスワイプ処理を無効にしようとしても、うまくできないようです(何のためのオプションなんだ…?)



●追記(2017/02/13)

コメント欄にて、えーけーさんからスクリプトの誤りの指摘がありました。スクリプトは現在修正されています。ご指摘ありがとうございました!

カテゴリー:

このページをぜひシェアしてください