質問: Flexsliderを使用したスライドの作成について お世話になります。 今回、jQueryプラグインのFlexsliderを使用してWEBサイトの制作をしていました。 テストのページは以下のURLのようになっています。 画面横のサムネイル画像、または、大きい写真のメイン画像の部分をクリックするとメイン画像の部分が変わるという感じです。 ここで質問なのですが、メイン画像の親要素である「li.item要素」をクリックまたはタップすると画像が変わるようにしたいと思い、 外部ファイル「handmaid.js」の行目にそのような記述をしたのですが、ipadのsafari環境でタップしても jQueryのクリックイベントが動かない(?)状況になっているようです。 PCと同様に、ipadのsafariでもメイン画像の親要素である「li.item」をタップしても上手く画像が変化するような記述の仕方がございましたら 是非教えていただけると幸いです。 よろしくお願い致します。 (補足:普通であれば、「 ul.flex-direction-nav > li > a.flex-next 」をクリックするなどして画像を変えるのですが、今回、諸事情によりメイン画像の親要素である「li.item」要素をタップして画像を変えることを条件としています。)
回答: iPad を持っていないんで、思い付きだけで書いてます。自信ありません ( ́・ω・`) #### ■ cursor: pointer の指定 ``` // li要素をクリック、タップして、画像を変化させたいのですが。。。ipadのsafariでは上手くいきません。。。 $('#itempage #itemwindow #itemwindow-inner #alphabox .flexslider ul li').click(function(){ $('#itempage #itemwindow #itemwindow-inner a.flex-next').click(); }).css('cursor','pointer'); ``` ↑の最後についている cursor: pointer にするのって、 がネタなんでしょうか。 もし、これが有効に働くのなら、サムネイルの画像の方にも必要なんじゃないでしょうか。 サムネイルをクリックする前に cursor: pointer を設定すると、どうなるでしょう... こんな感じで。 ``` // li要素をクリック、タップして、画像を変化させたいのですが。。。ipadのsafariでは上手くいきません。。。 $('#itempage #itemwindow #itemwindow-inner #alphabox .flexslider ul li').click(function(){ $('#itempage #itemwindow #itemwindow-inner a.flex-next') .css('cursor','pointer') .click(); }).css('cursor','pointer'); ``` #### ■ jQuery を新しくしてみる http://music.geocities.jp/kinokolovers1/library/js/jquery.min.js って、1.7.2 ですよね。 新しいの (1.11.1 とか) にしてみたら、どうなるんでしょう... →