Notice: Undefined variable: objtype in /home/sites/heteml/users/n/e/w/new-can/web/blog/mt-dynamic.php on line 180

Notice: Undefined variable: objtype in /home/sites/heteml/users/n/e/w/new-can/web/blog/mt-dynamic.php on line 183
jQuery LightBox Pluginの導入
Memory-01 Memory-02 Memory-03 Memory-04 Memory-05

From the author's New-Can

  • 当サイトは、IE11&Edge&Chrome61&Firefox56&OPERA48&Safari5.1…以上の環境で動作をなんとなく確認済です。全てのブラウザに対して、素人が完璧に対処することは至難の業です…。
  • スマートフォンでも、Android4.2/6.0&iOS11の環境で“必要最低限の動作は確認済”です。PCと同様のレイアウトで概ね閲覧可能ですが、解像度により一部非表示となるケースがあります。
  • 記事内で掲載されている一部画像は、ダブルクリックするとポップアップ画面経由で拡大されます。
  • 足跡を残す際は、画面左側にある“おきてがみ”機能も利用して下さい。
  • 白い頁が全面に出力されてしまった場合などは当方へ報告して下さい。メールフォームは、“検索&アーカイブメニュー頁の中央”に用意してあります。

jQuery LightBox Pluginの導入 

user-pic

Written  By  New-Can   [ 2010年12月18日 11:25 ]     

Category  06-B. Movable Type/カスタマイズ関連      BBS


記事に添付されている画像をダブルクリックすると…
一部はポップアップされるように、あるときから“Litebox”を導入したのですが、最近それが上手く行かないケースがあることに気がついてしまったので、「改善を図らねば…」と思っておりました。そのため、まずは“Lightbox v2.04”へと変更する修正を始めました。


ところが、これが全く上手く行く気がしない…orz
そのとき、「もう1つ手段はあった気がしたな…」と思い出したのが、“jQuery LightBox Plugin”。名前の通り、jQuery版のLightBoxで、今迄の画像系リンクに対して、“rel”なしでも問題なく使えそうだったからです。。。


しかし、実はこれもそのまま利用するだけではポップアップされないのです…orz
ただ、他のブログサイトを見ると、キチント導入することができているのです。「何故だろう?」と思っていたところ、昨日原因が分かりました。


このブログの個別記事において、チョット前に導入した…
zenback”が原因である」という記事を発見することができました。「これは間違いないな…」と確信して、導入方法が丁寧に書かれている記事を読みながら作業を進めたところ…無事、導入することができました♪


要は、「当サイトで読み込む“jQuery”と“zenback”が読み込む“jQuery”が衝突してしまうため」です。


この記事に検索して辿り着いた方であれば…
その理由に関しては、「あぁ、なるほどね~」という感じで納得することができるかと思います。ただ、自分はプログラム記述手法に疎いので、「スクリプトの開始を“$”ではなく、“jQuery”から始める」とか、「省略形にしてしまうと“zenback”が導入されている頁では“LightBox”の効果を導入することはできないです」と言われても、信じて突き進むことしかできないのですが…(;^^)


そんな訳で、今回は調査に時間を要しただけに、解決できたときは本当に嬉しかったです。
個人的なメモがてら、記事にしておきます♪

  1. jQueryファイルのバージョンを変更する(×:1.23→○:1.26…1.3以上不可/※参考記事)。
  2. ファイル名を短くする(※趣味の問題ですね…)。
    jquery.lightbox-0.5.css→“lightbox.css”
    jquery.lightbox-0.5.js→“lightbox.js”
  3. “lightbox.js”へと変更したファイル内に記載されているimagesフォルダの参照先を修正する。
  4. 下記のように記載した“lightbox-add.js”を作成し、必要なファイルをアップロードする。
    jQuery(function($){
    $('a[href$=".jpg"], a[href$=".gif"], a[href$=".png"]')
    .addClass("lightbox");
    $('#(記事箇所の)divのID名 a.lightbox').lightBox();
    });
  5. <head>内に下記の記述を追加し、再構築を実施する。
    <link rel="stylesheet" href="~lightbox/css/lightbox.css" type="text/css" media="screen" />
    <script type="text/javascript" src="~lightbox/js/jquery.js"></script>
    <script type="text/javascript" src="~lightbox/js/lightbox.js"></script>
    <script type="text/javascript" src="~lightbox/js/lightbox-add.js"></script>

<Postscript>

便利機能系は新しいものを1つ導入すると、従来のものは1つ壊れる…
そんなもんなんですね。やっぱり…(;^^)


- Entry Site -

にほんブログ村  BlogPeople  ブログ王

AlphaPolis  人気blogランキング  info-blogrank(article)  ブログ掲示板神奈川県

Thank you so much to read My Blog. I hope it's a fine day for you. See ya!

 

From the Same Category...

§この記事のメインカテゴリは、「06-B. Movable Type/カスタマイズ関連」です。


From the Same Date in a Different Year...

§記載者が過去を振り返りたくなったときのために掲載しております…m(__)m


Related Posts with Thumbnails