Flexsliderを使用したスライドの作成について


お世話になります。
今回、jQueryプラグインのFlexsliderを使用してWEBサイトの制作をしていました。
テストのページは以下のURLのようになっています。
http://music.geocities.jp/kinokolovers1/

画面横のサムネイル画像、または、大きい写真のメイン画像の部分をクリックするとメイン画像の部分が変わるという感じです。
ここで質問なのですが、メイン画像の親要素である「li.item要素」をクリックまたはタップすると画像が変わるようにしたいと思い、
外部ファイル「handmaid.js」の行目にそのような記述をしたのですが、ipadのsafari環境でタップしても
jQueryのクリックイベントが動かない(?)状況になっているようです。

PCと同様に、ipadのsafariでもメイン画像の親要素である「li.item」をタップしても上手く画像が変化するような記述の仕方がございましたら
是非教えていただけると幸いです。

よろしくお願い致します。


(補足:普通であれば、「 ul.flex-direction-nav > li > a.flex-next 」をクリックするなどして画像を変えるのですが、今回、諸事情によりメイン画像の親要素である「li.item」要素をタップして画像を変えることを条件としています。)

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2014/06/18 10:42:31
  • 終了:2014/06/23 20:53:31

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4545ベストアンサー獲得回数18952014/06/18 13:06:01

ポイント100pt

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 にするのって、http://blog.roundrop.jp/show/28 がネタなんでしょうか。
もし、これが有効に働くのなら、サムネイルの画像の方にも必要なんじゃないでしょうか。
サムネイルをクリックする前に 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 とか) にしてみたら、どうなるんでしょう...
http://jquery.com/download/

id:nagato-yuki

a-kuma3様
ご回答ありがとうございます!

上記のとおりテストサイトで試してみたところ、現状は変わりませんでした。
しかしながら、とても参考になるご助言誠にありがとうございます。

(補足)
テストサイトのhandmaid.jsの部分を更新しました。
li要素のタップは認識されているようでした!

2014/06/22 13:17:23
id:nagato-yuki

「 a.flex-next」の部分は、後から要素を追加しているでは(?)と思っています。解決のヒントになればと思い追記いたしました。

2014/06/22 13:43:16

その他の回答(0件)

id:a-kuma3 No.1

a-kuma3回答回数4545ベストアンサー獲得回数18952014/06/18 13:06:01ここでベストアンサー

ポイント100pt

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 にするのって、http://blog.roundrop.jp/show/28 がネタなんでしょうか。
もし、これが有効に働くのなら、サムネイルの画像の方にも必要なんじゃないでしょうか。
サムネイルをクリックする前に 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 とか) にしてみたら、どうなるんでしょう...
http://jquery.com/download/

id:nagato-yuki

a-kuma3様
ご回答ありがとうございます!

上記のとおりテストサイトで試してみたところ、現状は変わりませんでした。
しかしながら、とても参考になるご助言誠にありがとうございます。

(補足)
テストサイトのhandmaid.jsの部分を更新しました。
li要素のタップは認識されているようでした!

2014/06/22 13:17:23
id:nagato-yuki

「 a.flex-next」の部分は、後から要素を追加しているでは(?)と思っています。解決のヒントになればと思い追記いたしました。

2014/06/22 13:43:16
id:nagato-yuki

「a.flex-next」の部分は、後から要素を追加しているでは(?)と思っています。解決のヒントになればと思い追記いたしました。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません