*

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

関連記事

【PHP】〓WordPressとかで便利〓Internet Explorerの古いバージョンの場合は違うページにリダイレクトさせる ハック編 2/2

【PHP】〓WordPressとかで便利〓Internet Explorerの古いバージョンの場合は

記事を読む

【apacheモジュール】mod_pagespeedのキャッシュの削除の仕方

あいも変わらずgoogle先生はとんでもないものを作りますね!! インストールするだけ! お手

記事を読む

【バーチャルホスト】サブドメイン・DNSの設定覚書 設定(サーバ)編 予備知識版

これの続きです。 前はDNSの設定編で今回は2ステップの最後サーバの設定です。

記事を読む

SDカードからデジカメで撮影した写真が消えてしまった時の復元方法~データ削除したけど実際には消えていない?~

恋人への愛してるとバックアップは定期的に という有名な格言がなかったりなかったりしますが、バッ

記事を読む

HP Mini 210-1000 ネットブック メモリ増設 1GB→2GB (I-O DATA PC2-6400 (DDR2-800) S.O.DIMM 2GB SDX800-2G/EC)

この記事を読む前に、、、 みんなの合言葉 自己責任で!!! すごく限定的な使い

記事を読む

【WordPress】WP-PageNaviがデフォルト設定が左寄せだもんで、真中揃えにする方法

WordPressの人気プラグインでWP-PageNaviってやつがあります。 何のプラグイン

記事を読む

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

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

記事を読む

起業するときにおすすめのサービス【PCFAXでペーパーレス】 02

前回のやつ 前回の流れから、ミニマムに商売をはじめるためのおすすめのサービスの紹介です。

記事を読む

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

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

記事を読む

愛車 エブリー

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

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

記事を読む

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になったから設置の時注意 […]

Message

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

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

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

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

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

新紙幣とディープインパクトの単勝馬券

僕は大学生になり、そして20歳になった時に、それまで未成年で禁止されて

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

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

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

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

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

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

→もっと見る

PAGE TOP ↑