質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

ポップアップ

一般的に、ポップアップは、ウィンドウやアプリケーションに上に浮かぶUIエレメントを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

lightbox plusが機能しない

sandu
sandu

総合スコア8

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

ポップアップ

一般的に、ポップアップは、ウィンドウやアプリケーションに上に浮かぶUIエレメントを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1回答

0グッド

0クリップ

1214閲覧

投稿2020/09/12 13:57

編集2020/09/13 00:58

前提・実現したいこと

やりたいことは、
①地図上のマーカーをクリック後、地図の横に縮小した画像を表示させる。
②画像クリックで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>の手前に

<script type="text/javascript" src="{% static 'main/js/img.js' %}"></script>を追加してimg.jsを呼び出す。

img.jsの中はfunction 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

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

AkitoshiManabe

2020/09/13 00:46

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

2020/09/13 01:06

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

回答1

0

ベストアンサー

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

総合スコア5426

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

sandu

2020/09/13 03:05

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

2020/09/13 03:31

> 何処に追加すれば良いでしょうか? 「地図更新後のリスナ」と回答していますが、詳細は分かりません。 ご自身のコードにおけるイベント処理を追いかけ、必要なリスナに _lightbox.refresh() を追加してください。
sandu

2020/09/13 09:40

show_imgの中に追加してみましたが、ポップアップされませんでした。
sandu

2020/10/10 12:10

初心者の私にはぷらぐいんをアレンジするのはハードルが高かったようです。 ご回答いただきありがとうございました。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

ポップアップ

一般的に、ポップアップは、ウィンドウやアプリケーションに上に浮かぶUIエレメントを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。