*

lightbox(ライトボックス)のバージョン2.51からPrototypeじゃなくてjQueryになったから設置の時注意

公開日: : 最終更新日:2016/04/15 how to, サーバ・プログラム

lightbox(ライトボックス)について前記事を書きました。

lightboxって何?って感じの人は見てみてね。

lightbox(ライトボックス)のie9のバグの修正方法(って言っても新しいバージョン入れなおすだけ)

で、この記事でie9(インターネットエクスプローラー バージョン9)のバグを修正するためには新しいPrototype.jsを入れなおしてね。って話でした。

ただ、よくよく考えて見るとlightboxもバージョンが新しくなっていました。

現在(2012.07)最新版でバージョン2.51です。

で、友だちのFさんも自分のサイトにlightbox実装したいという事でやってあげようとしたら、うまく動かなくて何が原因なんだろうと。。。

実はバージョン2.51からライブラリがprototypeからjQueryに変わっていました。

それが原因なんだと。。。

で、僕と同じ様な悩みの人の為にこの記事書いてます。

今見てる方は、

「lightbox 2.51 設置 できない」

とかで検索して入ってきましたでしょうか?

それはグッジョブです。

で、説明に入ります。

lightbox設置実装の手順はおおまかに

1.lightbox本体をダウンロード
2.zipで落とせるので解凍してその中の「js」「css」「images」フォルダを中身ごと実装したいサーバにアップ
3.htmlのheadタグ内に場所指定

そうすれば

<a href="画像の場所" rel="lightbox" title="なんか入れたければ">><img src="サムネ画像.jpg" alt="お好きに" /></a>

って感じで画像のリンク先でrel=”lightbox”指定して完成です。

で、2までは問題無いのですが、3のところで埋め込むタグはなんだろうと検索すると前のバージョン(Prototype使ってた)の頃のタグが出てきます。

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

で、「lightbox 設置 とかでぐぐったら出てきたからこれをコピペ」ってやると失敗します。

最初に言ったようにバージョン2.51からライブラリがprototypeからjQueryに変わってるのに1行目でprototypeを指定しちゃってるのでうまくいきません。

まあ、本家ライトボックスのページには正しいタグが書いてあるのですが英語のページなので、ボク同様英語アレルギーの人は日本語のhowto系のブログを参考にしちゃうが故の罠ですね。

一応バージョン2.51のheadに入れる正しいタグは

<script src="js/jquery-2.5.1.min.js"></script>
<script src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />

です。

というだけの話でした。

格言「英語をちゃんと勉強して英語アレルギーをなくそう」

jQuery最高の教科書
jQuery最高の教科書

posted with amazlet at 14.01.02
株式会社シフトブレイン
SBクリエイティブ
売り上げランキング: 1,695
Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)
西畑一馬
アスキー・メディアワークス
売り上げランキング: 34,070

関連記事

【WordPress】Contact Form 7の追加プラグイン「Contact Form 7 DatePicker」便利だけど手動入力されたときにエラー吐いちゃうのの対策

便利なプラグインContact Form 7の追加プラグイン「Contact Form 7

記事を読む

【覚書】 WordPress 301 リダイレクト URL変更 htaccess 下層ページ そのまま

このブログのURLを http://www.takahashi-takuro.com か

記事を読む

【google apps】バリュードメイン(value domain)のDNS設定覚書

タイトルそのまま mx ASPMX.L.GOOGLE.COM. 10 mx ALT1.A

記事を読む

【バーチャルホスト】サブドメイン・DNSの設定覚書 設定(サーバ)編 いざ!版

これの続き では、いよいよ設定です。 まず設定するファイルは一個だけ

記事を読む

【WordPress】静的htmlサイトをフルCMS化するときにURLを変えないためのパーマリンク自由自在プラグイン「Custom Permalinks」

静的htmlサイトをCMS化(WordPress化)するメリット 一家にひとつは古い静

記事を読む

【WordPress】コアファイル・プラグインを更新するとき、FTP情報求められたり、パーミッションエラーの時の対策

メモメモ chownで所有者を一括変換しちゃう。 chown -R apache:a

記事を読む

【PHP】曜日と時間を検出して、いつまでに対応するかを表示する

営業時間中であれば、お問合わせいただいてから何分以内に対応しますよという文句を自動で表示したい。

記事を読む

愛車 エブリー

20年戦士のオンボロ愛車をパワーアップ(スズキ・エブリーにNARDI取り付け)

少し前にカーステを取り替えた愛車の青春カー! ※青春カーの命名はN君です。

記事を読む

【googleガジェット】自分のサイトのアクセスのページとかに自宅からの交通費とかを簡単に調べられるやつを設置 2/2~具体的なhowto~

これの続きです。 で、具体的な方法。 説明したgoogleガジェットに、goog

記事を読む

【WordPress】プラグインBackWPupを3.1.2にアプデしたらDropboxに保存するときにERROR: Dropbox API: (59) ってエラーが出た時の対処法

バックアップと親孝行は後悔した時には遅いので出来るうちにしておけ! という名言がないとかないと

記事を読む

Comment

  1. 匿名 より:

    ありがとございます。ライトボックス動きました。

  2. かな より:

    なんで動かないのか数時間悩んでいたのがこれでするっと解決しました;w;
    本当にありがとうございました!!!

  3. 匿名 より:

    なぜ動かないのか悩んでました。助かりました!!

  4. 匿名 より:

    動作はするのですが、左右矢印が出ないのとアルファが効かないのは何なんでしょう?
    CSSの位置は間違っていないようで、背景色(background-color: black;)を変えればちゃんと変化します。
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
    opacity: 0.85;
    両方変えてもIE9では変化なしです。
    何か対処法ご存じだったら教えてください。

  5. 匿名 より:

    あ、返答ありがとうございます!!
    すべてのブラウザで試したわけではないので何とも言えないのですが、Chromeではちゃんと半透明も左右矢印も表示されるんです…
    なので、IE9特有のバクなのかなぁと推測しました。

    無理だと思ってとりあえず外しちゃったんですけど、FFとかでも確認しておけばよかった…

  6. 通りすがりの人 より:

    自分が格納している場所やバージョンでそれぞれタグが変わって来ます。
    僕のはver2.6ですので、こうなりました。

    →”js/jquery-1.10.2.min.js”

    →”js/lightbox-2.6.min.js”

    →そのまま”css/lightbox.css”

  7. […] lightbox(ライトボックス)のバージョン2.51からPrototypeじゃなくてjQueryになったから設置の時注意 5年前くらい前の記事が多かったからコード自体が違っていたらしい。 これでなんとかLi […]

  8. […] lightbox(ライトボックス)のバージョン2.51からPrototypeじゃなくてjQueryになったから設置の時注意 5年前くらい前の記事が多かったからコード自体が違っていたらしい。 これでなんとかLi […]

  9. […] ★解決してくれたサイトはコチラ lightbox(ライトボックス)のバージョン2.51からPrototypeじゃなくてjQueryになったから設置の時注意 […]

  10. […] ★解決してくれたサイトはコチラ lightbox(ライトボックス)のバージョン2.51からPrototypeじゃなくてjQueryになったから設置の時注意 […]

高橋拓郎の中の人 へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

  • 高橋拓郎歳)
    愛知県知多市生まれ。
    大学在学中に個人で始めた事業を、大学院中退後法人化(法人化のために中退が正しいかも)。
    簡単にコンタクトとれるのでt@takuro.infoまで何か御用があればなんなりと。
    ブログの感想やご意見も大歓迎です!
人生はサウナ理論~結婚するあなたへ~

人生はサウナ理論。 というのを、敬愛するさんちゃんの名言「生きて

e-taxでの確定申告のもにょもにょ(noteからの転載)

この記事は2016年にnoteに投稿した記事の転載です。 ちょう

【感想】Netflixオリジナルドラマ『Jimmy〜アホみたいなホンマの話〜』 オクレさんもはや本人でしょ??

Netflixオリジナルドラマ『Jimmy〜アホみたいなホンマの話〜』

【javaScript】2017年版 法人税実効税率 シミュレーション 自動計算機(コードも置いとくね)

今日は4/3だからこれは嘘じゃないよ!! 法人税実効税率

【ユーザー車検】軽トラを無料でGETしたけど車検代が無いから初の軽自動車ユーザー車検に挑戦!

青春カーと悲しい別れ どうも。貧乏が板に付いてきて久しい僕で

→もっと見る

PAGE TOP ↑