lightbox plusが機能しない

前提・実現したいこと

やりたいことは、
①地図上のマーカーをクリック後、地図の横に縮小した画像を表示させる。
②画像クリックでlightbox plusでポップアップする。

①はできています。
②はポップアップせず、新しいページに飛んで画像が表示されてしまいます。
ポップアップもされていません。

画像をポップアップで表示させた後に、画像を再拡大させたいため、
lightboxではなく、lightbox plusを使おうと考えています。
ご教示よろしくお願い致します。

ページ補足情報

以下がlightbox plusのダウンロード元になります。
この中のresourceフォルダを全て入れています。
http://serennz.sakura.ne.jp/toybox/lightbox/?ja

該当のソースコード

html
1<!--index.html-->
2{% load static %}
3<!DOCTYPE html>
4<html lang="en">
5<head>
6
7    <meta charset="utf-8" />
8    <title>GeoDjango Hands-on</title>
9    <meta name="viewport" content="width=device-width, initial-scale=1.0">
10
11    <script
12        src="https://code.jquery.com/jquery-3.3.1.min.js"
13        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
14        crossorigin="anonymous"></script>
15
16    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
17    integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
18    crossorigin=""/>
19
20    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
21    integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
22    crossorigin=""></script>
23
24<!--lightbox plus-->
25    <link rel="stylesheet" type="text/css" href="{% static 'main/resource/lightbox.css' %}" media="screen,tv" />
26    <script type="text/javascript" charset="UTF-8" src="{% static 'main/resource/lightbox_plus.js' %}"></script>
27<!--lightbox plus--> 
28
29</head>
30<body>
31    <div id="map" ><!--style="width: 100%; height: 600px">--></div>
32    <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
33
34    <div id="aaa"></div>
35
36    <link rel="stylesheet" href="{% static 'main/css/app.css' %}">
37    <script type="text/javascript" src="{% static 'main/js/app.js' %}"></script>
38
39</body>
40</html>

javascript
1// app.js
2// 地理院地図　標準地図
3var std = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
4    {id: 'stdmap', attribution: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>国土地理院</a>"})
5// OSM
6var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
7    { id: 'osmmap', attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' });
8
9var baseMaps = {
10    "地理院地図 標準地図" : std,
11    "OSM" : osm,
12};
13
14var map = L.map('map', {layers: [osm]});
15map.setView([34.706187, 135.208398], 12);
16
17// コントロール
18L.control.layers(baseMaps, null, {collapsed:true}).addTo(map);
19
20//スケールコントロール
21L.control.scale({imperial: false}).addTo(map);
22
23var marker = L.marker([34.706187, 135.208398]).addTo(map);
24// img_showへ
25marker.on("click",function(){img_show();});

javascript
1// img.js
2function img_show(){
3    var li=["img1.jpeg","img2.jpeg"];
4
5    var target = document.getElementById('aaa');
6    // 一旦 空にしておく
7    target.innerHTML="";
8    
9    // 拡張子を除去
10    for(var i in li){
11        var title = li[i].split(".",1);
12    // id=aaaの後にinsert
13    var h=
14        '<p>'+title+'</p>'
15        +'<a rel="lightbox1" href="/media/image/'+li[i]+'" title='+ title +'>'
16        +'<img src="/media/image/'+li[i]+'" width="80%"></a></br>';
17        target.insertAdjacentHTML("beforeend",h);
18    };
19};

試したこと

index.htmlの</body>の手前に

img.jsの中はfunctioｎ img_show()を削除する。
つまり、マーカークリックで縮小画像を表示させるのではなく、html読み込み時に地図と一緒に縮小画像も表示させる。
そうするとlightbox plusが機能し、画像がポップアップされます。
最初から表示させるのとinsertするのでは何か違うのでしょうか？

javascript
1// img.js
2var li=["img1.jpeg","img2.jpeg"];
3
4var target = document.getElementById('aaa');
5// 一旦 空にしておく
6target.innerHTML="";
7    
8// 拡張子を除去
9for(var i in li){
10    var title = li[i].split(".",1);
11    // id=aaaの後にinsert
12    var h=
13        '<p>'+title+'</p>'
14        +'<a rel="lightbox1" href="/media/image/'+li[i]+'" title='+ title +'>'
15        +'<img src="/media/image/'+li[i]+'" width="80%"></a></br>';
16        target.insertAdjacentHTML("beforeend",h);
17};

補足情報（FW/ツールのバージョンなど）

macOS catalina 10.15.4
django 3.0.7

AkitoshiManabe

2020/09/13 00:46

> lightbox plus githubなどのバージョン管理サービス上で公開（メンテナンス）されていないようですので、様々な亜種の存在も考えられます。ご自身がダウンロードして採用したソースが分かるよう、ダウンロード元となるページを補足情報として示してください。

sandu

2020/09/13 01:06

teratailの使い方がまだ分かっていませんが、ダウンロード元を追加しました。 ”試したこと”の内容で実施すると、ポップアップができ、スライドショーのように次の画像に進むことも、ポップアップ内の拡大ボタンでの拡大もできます。よろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

lightbox plusが機能しない

機能面 sample.zip/sample/resource/lightbox_light.js （コメント付き）を読んでみると、
デフォルトでは「ページを読み込んだ直後に限定して応答されたページのタグを解析・実行」という内容のようです。

試せていませんが、Ajax等に対応させるには、「コードを読んで改修するしかない」形です。

274行 Lightbox#refresh() : これが使えそう

javascript
1Lightbox.prototype = {
2
3  refresh : function(target)
4  {
5    if (!target) target = document;
6    this._imgs.length = 0;
7    this._genListFromLinks(target);
8  },
9

1030行読み込まれて直ぐ Lightbox のインスタンスを生成しています。

javascript
1Spica.Event.run(function() { // L226 より DOMContentLoaded の機能検出を行って実行
2  new Lightbox({
3    loadingimg:'resource/loading.gif',
4    expandimg:'resource/expand.gif',
5    shrinkimg:'resource/shrink.gif',
6    blankimg:'resource/blank.gif',
7    previmg:'resource/prev.gif',
8    nextimg:'resource/next.gif',
9    closeimg:'resource/close.gif',
10    effectimg:'resource/zzoop.gif',
11    effectpos:{x:-40,y:-20},
12    effectclass:'effectable',
13    resizable:true,
14    animation:true
15  });
16});

回答（古いライブラリでしたので、前提の説明が長くなりましたが）

インスタンスを保持する変数が見当たりませんので、グローバルスコープの任意の変数（この回答では_lightbox）に保持させ、地図更新後のリスナから refresh() を実行するのはどうでしょうか。

javascript
1// lightbox_plus.js
2Spica.Event.run(function() { 
3  window._lightbox = new Lightbox({
4    /* omitted */
5  });
6});

javascript
1// your.js
2function anyListener() {
3  _lightbox.refresh();
4}

その他、コードリーディングのメモ

L40 ..... getElemetsByClassName polyfill　（削除して差し支えない）
L54 ..... WindowSize （アニメーション用に座標を管理）
L80 ..... PageSize （同上）
L109 .... PagePos （同上）
L136 .... Spica クロスブラウザ対策用のブラウザ判別/イベント周辺実装（大幅に削減できそう）
L236 .... Lightbox の具体的な実装コンストラクタ関数で抽象化の定義している
L1030 ... Spicaの実装を使ったローダ（jQuery.ready() のようなもの）

ライブラリの特徴
rel属性、title 属性を持った Aタグにイベントを適用する。... refresh() で再設定可能の様子
クリックするとよしなにやってくれる。

最初から表示させるのとinsertするのでは何か違うのでしょうか？

lightbox が誕生した当時の時代背景が大きく影響しています。
スタイルシートも CSS2 から CSS3 への移行期だったと思います。
（アニメーションは JavaScriptに完全依存でした）。

先にも述べていますが、ページを読み込んだ直後に限定してマークアップ内容を確認していればよかった時代のライブラリになります。
DOMのメソッドも限られたものしかなかったため、当時の pure JavaScript 実装としては纏まっているように思います。

コードを読んでみて、「今ならこんな風に書き直せそう」と、弄ってみるのも良いかもしれません。

投稿2020/09/13 02:00

編集2020/09/13 02:17

AkitoshiManabe

総合スコア5434

sandu

2020/09/13 03:05

ページを読み込んだ直後に実行する仕様だったんですね。色々やってみましたが、ポップアップされず新しいページに表示されました。 function anyListener() { _lightbox.refresh(); } は何処に追加すれば良いでしょうか？ javascriptやdjango を触り始めてまもない為、理解できず申し訳ありません。