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.2
- 回答日時:
「classのgroup1をクリックしたらcolorboxを表示して」という指示をしているので、
classにgroup1を指定する必要があります。
aタグにgroup1を追加します。(aタグが3か所あるので3か所に追加してください。)
以下具体的なタグです。
<a href="img/27/ooita1.jpg" class="ooira_IMG group1" title="ガランドヤ1号墳">
No.1
- 回答日時:
こんばんは
何も記載が無いので、何をどうなさりたいのかわかりませんけれど・・
>同じウィンドウ(タブ)内でその画像が開きます。
ご提示のHTMLは、スクリプトはほとんど関係ない状態です。
HTMLのリンクタグでリンク先に画像アドレスに設定してあるので、そのリンクをたどって画像を表示するように遷移しているものと考えられます。
(スクリプトを外しても、同じ動作になることを確認できると思います)
>Colorboxを設置できません。
ご提示の状態では、colorboxを読み込んでいるだけで、動作はしていません。
「実在する要素」を正しく指定すれば、とりあえずは、動作するでしょう。
外部CSSがどうなっているのかは不明ですので、どのような表示になるのかわかりませんけれど。
なお、ご質問には関係ありませんけれど・・
styleタグは基本的にhead内に記述すべきです。
(body内でも多くのブラウザは解釈してくれるようですけれど・・)
https://developer.mozilla.org/ja/docs/Web/HTML/E …
また、同じ役割の要素に対して、同じ内容を個別に重複して指定しているのも冗長です。
クラス設定やタグ名等を利用してまとめる方が簡潔になるだけでなく、メンテナンスもしやすくなるでしょう。(そのためのクラス設定とも言えますので)
質問以外のところまでありがとうございます。
Colorboxのところで、「実在する要素」を正しく指定する方法をHTMLなども一緒に教えていただきたいです。よろしくお願いいたします。
お探しの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で作ったタイマーアプリが正常に動作しない
JavaScript
-
5
プログラミング言語の制作方法について
C言語・C++・C#
-
6
HTMLとJavaScriptで作った表示して検索するWebアプリが正常に動かない
JavaScript
-
7
PythonのTkinter詳しい方へ。画像や言葉の意味を答える3択クイズを作るのに手間取っています
その他(プログラミング・Web制作)
-
8
【JavaScript?HTML?】Webページでこのページは戻ることは出来ませんと表
JavaScript
-
9
HTMLとJavaScriptで作ったタイマーアプリで時間分の設定方法がわからない
JavaScript
-
10
かっこいいウェブを作るテク
HTML・CSS
-
11
HTMLでstyleを指定するフォームの作り方
HTML・CSS
-
12
HTTPエラーがカウントされる条件は?
SEO
-
13
JavaScriptでページが更新されたときに./へ自動遷移するようにする方法を教えて
JavaScript
-
14
無料hp作成ソフトお勧め
オープンソース
-
15
HTMLで作った時報アプリが動きません
JavaScript
-
16
PHPでのパスワード制限のセキュリティはどうなのか
PHP
-
17
var exports = exports || {}; ← この意味を教えてください。
JavaScript
-
18
htmlの修正方法を教えていただきたいです。
HTML・CSS
-
19
[初心者]javascriptのfor文でなぜか繰り返し処理をしない。理由がわかりません。
JavaScript
-
20
GitHubは初年度以外は有料になりますか?
Ruby
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jQueryで同じクラス名のものを...
-
ランダムで表示させたブロック...
-
セレクトボックスで、リンクバ...
-
マウスオーバーにて画像に虫眼...
-
Colorboxがうまく設置できません
-
画像拡大とともにエレメントも...
-
時間差で画像を動作させたいjav...
-
jQueryでのドラッグアンドドロ...
-
サイトにコンテンツを並べる際...
-
MAX関数を使ってからLEFT JOIN...
-
クリックで色変更後に既に変更...
-
jspでcssが読み込めない
-
JavaScriptでボタンをクリック...
-
曜日と時間を指定して表示画像...
-
JavaScriptで変更した属性の元...
-
画像の下に説明文をつけて切り...
-
innerHTMLに入れたリンクが反応...
-
jQueryを使ってランダムに表示
-
textareaに画像を表示したい
-
「jQuery」アコーディオンメニ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
デフォルト非表示にしたい。【t...
-
jQueryで同じクラス名のものを...
-
Colorboxがうまく設置できません
-
jQueryでのドラッグアンドドロ...
-
bxsliderで最初に縦に複数表示...
-
Javascript初心者|jQueryの.va...
-
画像マウスオーバーで、checkb...
-
アップロードファイルの種類に...
-
複数bxsliderをタブで切り替え...
-
サムネイルにカーソルを合わせ...
-
JavaScriptでの画像切り替えを...
-
時間差で画像を動作させたいjav...
-
「画像クリックで音声再生」を ...
-
JavaScriptでクレイアニメ。ち...
-
マウスオーバーにて画像に虫眼...
-
VBAでIEを動かす場合、下記の①...
-
クリックでクリッカブルマップ...
-
交互に入れ替わる画像を複数配置
-
JavaScript/CANVASでの画像読込...
-
JQueryでオープニングアニメー...
おすすめ情報