人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

はてなブログでVisual Light Boxを動作させたいです。本当は添付画像のようになるはずなのですが、実際には以下のアドレスのようになってしまいます。「戻る」ボタンなどが表示されません。

http://weed-7777.sakura.ne.jp/image-light-box-witcher3/index_files/vlb_images1/c7bhr0jvaaapbll.jpg

コンソールを見ると、以下の箇所でコケています:

Uncaught TypeError: (intermediate value).visualLightbox is not a function
at HTMLDocument.<anonymous> (vlbdata1.js:1)
at c (jquery.js:3)
at Object.fireWith [as resolveWith] (jquery.js:3)
at Function.ready (jquery.js:3)
at HTMLDocument.H (jquery.js:3)

vlbdata1.jsを開けると、以下の「visualLightbox(...」の箇所に赤い波下線が引かれており、jQueryオブジェクトにvisualLightboxがアタッチされていません。

window.Lightbox = new jQuery().visualLightbox(...

ちなみにアタッチするjsは以下のものです:

http://weed-7777.sakura.ne.jp/video-light-box-witcher3/index_videolb/videolightbox.js

どうしたらいいのでしょうか?よろしくお願いします。

1489658552
●拡大する

●質問者: weed_7777
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

質問者から

Lightboxは動作するようです:はてなブログ(無料版)でLightboxとbxSliderを利用する - Flat Leon Works http://flat-leon.hatenablog.com/entry/hatenablog_lightbox_bxslider


1 ● a-kuma3
●1000ポイント ベストアンサー

Visual LightBox って、↓のやつで良いんでしょうか。
http://www.jqueryscript.net/demo/Awesome-Responsive-LightBox-Plugin-For-jQuery-VisualLightBox/demo/

visuallightbox.js をちらっと見てみましたけど、この書き方だと、これを読みこんだ後に jQuery が読み込まれると、動かないです(jQuery がリセットされちゃう)。
はてなブログでは、ページの末尾ではてなの方が設置した jQuery を読み込んでいる(この回答を書いている時点で、1.12.4)ので、visualLightbox メソッドが見つからない、とエラーになるんだと思います。

別の個所で タグの visuallightbox.js の読み込みを削除して、vlbdata1.js を以下のように書き換えると、動きそうな気がします(見づらいんで、整形してます)。

jQuery(document).ready(function() {
 var script = document.createElement("script");
 script.src = "http://weed-7777.sakura.ne.jp/image-light-box-witcher3/index_files/vlb_engine/visuallightbox.js";
 script.addEventListener("load", function() {
 window.Lightbox = new jQuery().visualLightbox({
 autoPlay: true,
 borderSize: 10,
 classNames: 'vlightbox1',
 descSliding: true,
 enableRightClick: false,
 enableSlideshow: true,
 prefix: 'vlb1',
 resizeSpeed: 7,
 slideTime: 4,
 startZoom: true
 });
 });
 document.body.appendChild(script);
});

パラメータは元のままです。
固定で script タグを書くのではなく、onload イベントで動的に visuallightbox.js を読み込んで、そのスクリプトの onload で window.Lightbox の設定を行えば、処理の順番がキープできるのではないか、と。

# スタイルの調整が必要になるかも、という気がしなくもないです


weed_7777さんのコメント
>Visual LightBox って、↓のやつで良いんでしょうか。 ご明察の通りです ご提案の通りにしてみたのですが、今度は以下のようなエラーが出てしまいます。動作しません。 ``` Uncaught ReferenceError: jQuery is not defined at jquery.tools.min.js:39 videolightbox.js:9 Uncaught ReferenceError: jQuery is not defined at videolightbox.js:9 vlbdata1.js:1 Uncaught ReferenceError: jQuery is not defined at vlbdata1.js:1 ``` 何だか…動きそうな気配はするのですが…よろしくお願いします。

a-kuma3さんのコメント
Visual Light Box を外しちゃったのですか (´・ω・`) エラーが確認できないので、何とも。 少なくとも、以下の条件を満たしていれば jQuery is not defind というエラーが起きるはずがありません。 - vlbdata1.js の内容が回答のコード - vlbdata1.js よりも前に jquery の読み込みをやってる 回答では「visuallightbox.js の読み込みを削除して」とは書きましたが、一緒に jquery の script タグまで削除しちゃったんじゃないでしょうか(想像)。

weed_7777さんのコメント
エラーは以下のページで確認できます: http://www.weed-7777.me/entry/2017/03/10/171605#十字路の宿屋 このページの「【地図】十字路の宿屋」が対象です。 Jquery外してました

weed_7777さんのコメント
写真の遷移する直前に以下のようなメッセージが表示されます。関係あるかもしれません: Resource interpreted as Document but transferred with MIME type image/jpeg: "http://weed-7777.sakura.ne.jp/image-light-box-witcher3/index_files/vlb_images1/c7bhr0jvaaapbll.jpg". Navigated to http://weed-7777.sakura.ne.jp/image-light-box-witcher3/index_files/vlb_images1/c7bhr0jvaaapbll.jpg

a-kuma3さんのコメント
vlbdata1.js の読み込みが消えています。 なので、今の状態ではエラーも出ません。 jquery の読み込みの後に、vlbdata1.js を読み込んでください。 # 直後じゃなくても OK です

weed_7777さんのコメント
うおおおおおおお、動いたあああああ! a-kuma3さん最強っす。 本当にありがとうございました。

a-kuma3さんのコメント
(・`ω´・) ウシッ
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ