Colorboxを設置できません。Colorboxのリンクを押すと、同じウィンドウ(タブ)内でその画像が開きます。どうしてでしょうか。以下HTMLです。
【省略】
<head>
【省略】
<link rel="stylesheet" type="text/css" href="colorbox.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1. …
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.co …
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.to …
<script>
$(document).ready(function(){
$(".group1").colorbox({rel:'group1', maxWidth:"90%", maxHeight:"90%"});
//swipe
$("#colorbox").swipe({
swipeLeft:function(){
$.colorbox.next()
},
swipeRight:function(){
$.colorbox.prev()
},
threshold:0
})
});
</script>
</head>
<body>
【省略】
<div class="img_area"><div class="imgtitle1">
<div><a href="img/27/ooita1.jpg" class="ooira_IMG" title="ガランドヤ1号墳"><img src="img/27/ooita1.jpg" width="222px" alt="ガランドヤ1号墳写真" title="ガランドヤ1号墳"></a></div>
<style>
.imgtitle1 {
position: relative;
display: inline-block;
}
.imgtitle1 img {
display: block;
}
.imgtitle1::after {
content: "ガランドヤ1号墳";
position: absolute;
bottom: 0;
right: 0;
background-color: white;
color: black;
padding: 5px;
}
</style>
</div>
<div class="imgtitle2">
<div><a href="img/27/ooita2.jpg" class="ooira_IMG" title="ガランドヤ2号墳"><img src="img/27/ooita2.jpg" width="222px" alt="ガランドヤ2号墳写真" title="ガランドヤ2号墳"></a></div>
<style>
.imgtitle2 {
position: relative;
display: inline-block;
}
.imgtitle2 img {
display: block;
}
.imgtitle2::after {
content: "ガランドヤ2号墳";
position: absolute;
bottom: 0;
right: 0;
background-color: white;
color: black;
padding: 5px;
}
</style>
</div>
<div class="imgtitle3">
<div><a href="img/27/ooita3.jpg" class="ooira_IMG" title="ガランドヤ3号墳"><img src="img/27/ooita3.jpg" width="222px" alt="ガランドヤ3号墳写真" title="ガランドヤ3号墳"></a></div>
<style>
.imgtitle3 {
position: relative;
display: inline-block;
}
.imgtitle3 img {
display: block;
}
.imgtitle3::after {
content: "ガランドヤ3号墳";
position: absolute;
bottom: 0;
right: 0;
background-color: white;
color: black;
padding: 5px;
}
</style>
</div></div>
【省略】
</body>
【省略】
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
こんばんは
何も記載が無いので、何をどうなさりたいのかわかりませんけれど・・
>同じウィンドウ(タブ)内でその画像が開きます。
ご提示のHTMLは、スクリプトはほとんど関係ない状態です。
HTMLのリンクタグでリンク先に画像アドレスに設定してあるので、そのリンクをたどって画像を表示するように遷移しているものと考えられます。
(スクリプトを外しても、同じ動作になることを確認できると思います)
>Colorboxを設置できません。
ご提示の状態では、colorboxを読み込んでいるだけで、動作はしていません。
「実在する要素」を正しく指定すれば、とりあえずは、動作するでしょう。
外部CSSがどうなっているのかは不明ですので、どのような表示になるのかわかりませんけれど。
なお、ご質問には関係ありませんけれど・・
styleタグは基本的にhead内に記述すべきです。
(body内でも多くのブラウザは解釈してくれるようですけれど・・)
https://developer.mozilla.org/ja/docs/Web/HTML/E …
また、同じ役割の要素に対して、同じ内容を個別に重複して指定しているのも冗長です。
クラス設定やタグ名等を利用してまとめる方が簡潔になるだけでなく、メンテナンスもしやすくなるでしょう。(そのためのクラス設定とも言えますので)
質問以外のところまでありがとうございます。
Colorboxのところで、「実在する要素」を正しく指定する方法をHTMLなども一緒に教えていただきたいです。よろしくお願いいたします。
No.2
- 回答日時:
「classのgroup1をクリックしたらcolorboxを表示して」という指示をしているので、
classにgroup1を指定する必要があります。
aタグにgroup1を追加します。(aタグが3か所あるので3か所に追加してください。)
以下具体的なタグです。
<a href="img/27/ooita1.jpg" class="ooira_IMG group1" title="ガランドヤ1号墳">
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript 【JavaScript】検索がヒットした場合、プルダウンをオープンで表示させる方法 2 2023/09/06 14:02
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS HTMLですCSSです 画像のように作りたいのですが 以下のようにあってますか?間違ってる感じがしま 3 2023/12/24 16:15
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS HTMLですCSSです この画像のように 文字を打ち込みたいのですが、 下の3この四角にを画像のよ 3 2023/12/25 16:07
このQ&Aを見た人はこんなQ&Aも見ています
-
プロが教える店舗&オフィスのセキュリティ対策術
中・小規模の店舗やオフィスのセキュリティセキュリティ対策について、プロにどう対策すべきか 何を注意すべきかを教えていただきました!
-
JavaScriptで作ったアプリが正常に動作しない。改善したい。
JavaScript
-
HTMLで画像をポップアップで表示するようにする方法
HTML・CSS
-
デジタルブックを自分のウェブサイトに設置する方法を教えて
オープンソース
-
-
4
HTMLとJavaScriptで作った表示して検索するWebアプリが正常に動かない
JavaScript
-
5
HTMLとJavaScriptで作ったタイマーアプリが正常に動作しない
JavaScript
-
6
プログラミング言語の制作方法について
C言語・C++・C#
-
7
PythonのTkinter詳しい方へ。画像や言葉の意味を答える3択クイズを作るのに手間取っています
その他(プログラミング・Web制作)
-
8
【JavaScript?HTML?】Webページでこのページは戻ることは出来ませんと表
JavaScript
-
9
HTMLでstyleを指定するフォームの作り方
HTML・CSS
-
10
HTMLとJavaScriptで作ったタイマーアプリで時間分の設定方法がわからない
JavaScript
-
11
かっこいいウェブを作るテク
HTML・CSS
-
12
HTTPエラーがカウントされる条件は?
SEO
-
13
PHPでのパスワード制限のセキュリティはどうなのか
PHP
-
14
HTMLで作った時報アプリが動きません
JavaScript
-
15
無料hp作成ソフトお勧め
オープンソース
-
16
JavaScriptでページが更新されたときに./へ自動遷移するようにする方法を教えて
JavaScript
-
17
var exports = exports || {}; ← この意味を教えてください。
JavaScript
-
18
ホームページの事でおしえてください
CGI
-
19
フロントエンドフレームワークの定数について
JavaScript
-
20
htmlの修正方法を教えていただきたいです。
HTML・CSS
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
clear機能を失わずにファイルア...
-
画像拡大とともにエレメントも...
-
デフォルト非表示にしたい。【t...
-
embed要素のsrc属性の値を変更...
-
画像をクリックで、2回新しい...
-
MAX関数を使ってからLEFT JOIN...
-
textareaに画像を表示したい
-
htmlの記述で link rel=styles...
-
小窓について教えて下さい。
-
スワップイメージが上手く動作...
-
bxsliderにて読み込み後に内容...
-
HTMLとJavaScriptで作ったタイ...
-
<div id="blank">内の<a>タグ群...
-
画像の特定の座標にカーソルが...
-
読み込んだQRコードをフォーム...
-
複数のラジオボタン項目でのテ...
-
MFCで画像を表示させているので...
-
JSPでの画像ファイル表示
-
createElementで作成した要素を...
-
透過pngの透明部分以外をクリッ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
デフォルト非表示にしたい。【t...
-
jQueryで同じクラス名のものを...
-
Colorboxがうまく設置できません
-
Javascript初心者|jQueryの.va...
-
jQueryでのドラッグアンドドロ...
-
アップロードファイルの種類に...
-
embed要素のsrc属性の値を変更...
-
fancyboxのポップアップ時の画...
-
JQueryで画像の上で文字を動かす
-
一定時間で入れ替わるバナー画...
-
ボタンを押すたびに交互に切り...
-
全部のサイコロをjavascriptで...
-
交互に入れ替わる画像を複数配置
-
clear機能を失わずにファイルア...
-
JavaScriptが、Firefoxで動かな...
-
「画像クリックで音声再生」を ...
-
bxsliderで最初に縦に複数表示...
-
JQueryを使用して、画像をドラ...
-
イラストのボタンを押したとき...
-
背景色と連動するスライドショ...
おすすめ情報