人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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」要素をタップして画像を変えることを条件としています。)

●質問者: nagato-yuki
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
●100ポイント ベストアンサー

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/


nagato-yukiさんのコメント
a-kuma3様 ご回答ありがとうございます! 上記のとおりテストサイトで試してみたところ、現状は変わりませんでした。 しかしながら、とても参考になるご助言誠にありがとうございます。 (補足) テストサイトのhandmaid.jsの部分を更新しました。 li要素のタップは認識されているようでした!

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

質問者から

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


関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ