• はてなアカウントでログイン
• 無料ユーザー登録

ベストアンサー

• a-kuma32017/03/16 23:33:46

  満足1000pt

  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 の設定を行えば、処理の順番がキープできるのではないか、と。
  
  ＃ スタイルの調整が必要になるかも、という気がしなくもないです

  スター

  • 

    7件のコメントを見る

  • Tats 2017/03/17 06:42:55

    ＞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 2017/03/17 08:44:40

    Visual Light Box を外しちゃったのですか　(´・ω・｀)
    エラーが確認できないので、何とも。
    
    少なくとも、以下の条件を満たしていれば jQuery is not defind というエラーが起きるはずがありません。

    • vlbdata1.js の内容が回答のコード
    • vlbdata1.js よりも前に jquery の読み込みをやってる
    
    

    回答では「visuallightbox.js の読み込みを削除して」とは書きましたが、一緒に jquery の script タグまで削除しちゃったんじゃないでしょうか（想像）。

    スター

  • Tats 2017/03/17 09:05:49

    エラーは以下のページで確認できます：
    http://www.weed-7777.me/entry/2017/03/10/171605#十字路の宿屋
    このページの「【地図】十字路の宿屋」が対象です。
    
    Jquery外してました😅なおしたのですが状況は変わらず。
    実は頂いたコードで一度だけ動いたのですが、戻し方を忘れてしまいました😩

    スター

  • Tats 2017/03/17 09:15:40

    写真の遷移する直前に以下のようなメッセージが表示されます。関係あるかもしれません：
    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 2017/03/17 09:19:58

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

    スター

  • Tats 2017/03/17 12:55:16

    うおおおおおおお、動いたあああああ！
    a-kuma3さん最強っす。
    本当にありがとうございました。

    スター

  • a-kuma3 2017/03/17 13:49:55

    (・`ω´・) ｳｼｯ

    スター

その他の回答

• Tats

  2017/03/16 19:06:08

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

この質問へのコメント

質問の情報

登録日時

2017-03-16 19:02:32

終了日時

2017-03-17 12:55:30

回答条件

1人1回まで

この質問のカテゴリ

• ウェブ制作

この質問に含まれるキーワード

人気の質問

• ｢会社は慈善事業ではないし遊ぶ所でもないからどういう事情があろうと役にたたないやつは切るけど反対にで…匿名質問者411日前
• 衣替えの時期について 毎年この時期は、天気予報を確認していてもうまく衣替えタイミングを見測れません。…おっきー219時間前
• 経済について、初歩的な質問で恐縮です。年収の壁の問題は、年収の枠を大きくするという単純な策では解決し…匿名質問者1112時間前
• 【アルバイトについて】 学生です。現在ファミリー向けレストランでアルバイトをしています。店舗に御局様…匿名質問者1115時間前
• 古い戸籍を見ていますが、読み取れない文字があります。 「太郎ノ◯◯◯届出」の様な感じだ…匿名質問者1111日前

メニュー

• 質問一覧
• カテゴリ一覧
• 無料ユーザー登録
• 人力検索はてなトップ

PC版

• お問い合わせ
• ヘルプ
• お知らせ
• はてなトップ