お世話になります。
今回、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」要素をタップして画像を変えることを条件としています。)
iPad を持っていないんで、思い付きだけで書いてます。自信ありません (´・ω・`)
// 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');
http://music.geocities.jp/kinokolovers1/library/js/jquery.min.js って、1.7.2 ですよね。
新しいの (1.11.1 とか) にしてみたら、どうなるんでしょう...
→ http://jquery.com/download/
iPad を持っていないんで、思い付きだけで書いてます。自信ありません (´・ω・`)
// 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');
http://music.geocities.jp/kinokolovers1/library/js/jquery.min.js って、1.7.2 ですよね。
新しいの (1.11.1 とか) にしてみたら、どうなるんでしょう...
→ http://jquery.com/download/
a-kuma3様
ご回答ありがとうございます!
上記のとおりテストサイトで試してみたところ、現状は変わりませんでした。
しかしながら、とても参考になるご助言誠にありがとうございます。
(補足)
テストサイトのhandmaid.jsの部分を更新しました。
li要素のタップは認識されているようでした!
「 a.flex-next」の部分は、後から要素を追加しているでは(?)と思っています。解決のヒントになればと思い追記いたしました。
a-kuma3様
2014/06/22 13:17:23ご回答ありがとうございます!
上記のとおりテストサイトで試してみたところ、現状は変わりませんでした。
しかしながら、とても参考になるご助言誠にありがとうございます。
(補足)
テストサイトのhandmaid.jsの部分を更新しました。
li要素のタップは認識されているようでした!
「 a.flex-next」の部分は、後から要素を追加しているでは(?)と思っています。解決のヒントになればと思い追記いたしました。
2014/06/22 13:43:16