*

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,Contactform7】ユーザーエージェント(UA)から「デバイス(PC,スマホ,タブレット)」「OS」「ブラウザ」を取得する→これをContactform7に実装

ユーザーエージェント(UA)から「デバイス(PC,スマホ,タブレット)」「OS」「ブラウザ」

記事を読む

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

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

記事を読む

愛車 エブリー

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

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

記事を読む

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

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

記事を読む

【WordPress】Contact Form 7で送信できないからWP-Mail-SMTPで対策!でもgoogle appsのsmtpの設定がわからない人のためだけの記事

タイトル長い。うざい。 って思っても、この記事にたどり着いたってことは似たような悩みをお抱えな

記事を読む

【PHP】時間を扱うときはdate_default_timezone_set(‘Asia/Tokyo’);を入れよう

タイトルそのまんま。そんだけ。 日本国内のサービスでphpで時間を扱うときは、サーバの設定いじ

記事を読む

お金がなくて、時給が低いことの楽しさ

こんなサイトをたまたま見つけました。 はじめての自作PCで自宅サーバーをはじめた PCケ

記事を読む

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

これの続き 設定としては2ステップ。 DNSの設定とサーバの設定です。

記事を読む

【PHP】スマホ対応 メールフォーム設置 PEARを使ってgmailのsmtpサーバで送信する(ダウンロード可能)

メールフォーム(お問い合わせフォーム)をサイトに設置したいというのはよくあります。 で、フォー

記事を読む

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

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

記事を読む

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まで何か御用があればなんなりと。
    ブログの感想やご意見も大歓迎です!
人生はサウナ理論~結婚するあなたへ~

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

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

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

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

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

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

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

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

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

→もっと見る

PAGE TOP ↑