Colorboxがうまく設置できません

締切済

質問者：優里さん
質問日時：2024/01/13 16:59
回答数：2件

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>
【省略】

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： kaz33
回答日時：2024/01/16 09:38

「classのgroup1をクリックしたらcolorboxを表示して」という指示をしているので、

classにgroup1を指定する必要があります。
aタグにgroup1を追加します。(aタグが3か所あるので3か所に追加してください。)

以下具体的なタグです。
<a href="img/27/ooita1.jpg" class="ooira_IMG group1" title="ガランドヤ1号墳">

- 0
- 件

通報する

参考程度に

No.1

回答者： fujillin
回答日時：2024/01/14 22:18

こんばんは

何も記載が無いので、何をどうなさりたいのかわかりませんけれど・・

＞同じウィンドウ（タブ）内でその画像が開きます。
ご提示のHTMLは、スクリプトはほとんど関係ない状態です。
HTMLのリンクタグでリンク先に画像アドレスに設定してあるので、そのリンクをたどって画像を表示するように遷移しているものと考えられます。
（スクリプトを外しても、同じ動作になることを確認できると思います）

＞Colorboxを設置できません。
ご提示の状態では、colorboxを読み込んでいるだけで、動作はしていません。
「実在する要素」を正しく指定すれば、とりあえずは、動作するでしょう。
外部CSSがどうなっているのかは不明ですので、どのような表示になるのかわかりませんけれど。

なお、ご質問には関係ありませんけれど・・
styleタグは基本的にhead内に記述すべきです。
（body内でも多くのブラウザは解釈してくれるようですけれど・・）
https://developer.mozilla.org/ja/docs/Web/HTML/E …

また、同じ役割の要素に対して、同じ内容を個別に重複して指定しているのも冗長です。
クラス設定やタグ名等を利用してまとめる方が簡潔になるだけでなく、メンテナンスもしやすくなるでしょう。（そのためのクラス設定とも言えますので）