よろしくお願いします。
jQueryで、<a>タグと<area>タグで表示が違ってしまいます。
http://colorpowered.com/colorbox/core/example2/i …
上記ページの「Fade Transition」というjQueryを使ってみたのですが、
<a href="○○.jpg" rel="example2" title="タイトル">文字</a>ではうまく表示できました。
<a href="○○.jpg" rel="example2" title="タイトル"><img src="□□.jpg" width="100" height="100" /></a>でもうまく表示できました。
クリッカブルマップを使って、画像の一部だけリンクさせる場合がうまくいきません・・。
<area shape="poly" coords="14,33,33,-4,57,0,63,29,46,64,30,66" href="○○.jpg" rel="example2" title="タイトル" accesskey="A" />
上記のように記述した場合、クリッカブルマップはうまく動いて、jQueryも一応表示されるのですが、
左上の ←→× (prev、next、close)ボタンがうまくいかないのです・・・。
添付画像のように、
・prev、nextの矢印は表示されません。
・「前へ」、「次へ」の動きもしません。
・closeの×ボタンは表示されるのですが、何回かクリックしないと閉じません。
CSSはこれで、 http://colorpowered.com/colorbox/core/example2/c …
jsはこれです。 http://colorpowered.com/colorbox/core/colorbox/j …
多分jsの方の記述に修正が必要なのかなと思っているのですが、
もしわかる方いらっしゃいましたら、教えていただきたいと思います。
jQuery初心者で恐縮なのですが、よろしくお願いいたします。
No.2ベストアンサー
- 回答日時:
>> No.1 お礼
http://colorpowered.com/colorbox/
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a[rel='example1']").colorbox();
...
});
No.1で提示したコードはjsファイルではなく、htmlに記述されているこの部分のことです。
<map id="map1" name="map1">
<area ...>
...
</map>
id属性に"map1"を持つmap要素が内包するarea要素すべてがグループ化されます。
$(document).ready(function(){
$('#map1 area').colorbox({ rel: 'area1', transition: 'fade' });
});
再びご回答ありがとうございます!!
記載の通りにしてみたら、うまくできました!
こんなにすっぱり解決するなんて・・感激です!
本当に助かりました。ありがとうございます。
No.1
- 回答日時:
area要素のrel属性値をスクリプトで取れないのが原因のようです。
area要素にはない属性ですからDOMが無視してるのだと思いますが。
$('#map1 area').colorbox({ rel: 'area1' });
ユーザーオプションで設定すればグループ化できるみたいですよ。
area要素のrel属性は不要です。
ご回答いただきありがとうございます!
$('#map1 area').colorbox({ rel: 'area1' });
さっそく教えていただいた上の記述をjsファイルに入れてみたのですが、
うまくいかず・・・。
すみません、もしよろしければどのファイルのどの辺りに
書けば良いか教えていただけないでしょうか?
>area要素のrel属性は不要です。
とのことですが、
<area shape="poly" coords="14,33,33,-4,57,0,63,29,46,64,30,66" href="○○.jpg" rel="example2" title="タイトル" accesskey="A" />
↓以下に変更
<area shape="poly" coords="14,33,33,-4,57,0,63,29,46,64,30,66" href="○○.jpg" title="タイトル" accesskey="A" />
ということでしょうか?
そのようにやってみたのですが、うまくいかず・・。
せっかく教えていただいたのに申し訳ありません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- JavaScript jQueryでのレスポンシブが綺麗に動かない 3 2022/06/21 11:08
- Excel(エクセル) excelで検索した商品の画像(ネットワーク上の)を表示させたい。 3 2023/06/28 00:32
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Gifアニメ、最後のコマに行った...
-
重なった画像にクリックイベン...
-
lightbox2をiframeから外に表示...
-
画像の重なりの順序を代える方...
-
マウスオーバーとポップアップ...
-
JavaScriptでスライドショー
-
スワップイメージが上手く動作...
-
jQuery bxSlider 画像に変更
-
ページ読込中に表示が崩れるの...
-
画像クリックで別の場所の画像...
-
JavaScript スライドの画像にリ...
-
Javascript で共通の処理をどこ...
-
画像をフォルダから自動読み込み。
-
1枚の画像をクリックすると複数...
-
画面の表示位置を指定させて表...
-
MAX関数を使ってからLEFT JOIN...
-
MFCで画像を表示させているので...
-
JavaScriptで変更した属性の元...
-
クリックで色変更後に既に変更...
-
createElementが一瞬で消えてし...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Javascript で共通の処理をどこ...
-
Javascriptで指定した日付と時...
-
textareaに画像を表示したい
-
Gifアニメ、最後のコマに行った...
-
1枚の画像をクリックして複数の...
-
画像ランダム表示、しかしダブ...
-
スライダーを実装した場合、ペ...
-
1枚の画像をクリックすると複数...
-
HTMLで条件分岐はできますか?
-
JavaScript スライドの画像にリ...
-
オンマウスで、画像切り替え+...
-
画像の重なりの順序を代える方...
-
JavaScriptとチェックボックス...
-
透過pngの透明部分以外をクリッ...
-
画像をドラッグ&ドロップで移...
-
各フォルダから1枚ずつ画像をラ...
-
jQueryで特定のURLの時のみ表示
-
bxsliderにて読み込み後に内容...
-
prettyphotoの画像表示について
-
WEBページ立ち上げ時に1回のみ...
おすすめ情報