*

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

関連記事

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

サブドメインをやろうと思いました。 サブドメインをやる目的は自分のサイトがexam

記事を読む

iPhone5水没 エクスプレス交換サービスで秒速で4,400円(税込)で新品に変わる~AppleCareにより~

今日も元気だ!お酒が旨い。 というわけで尿路結石の激痛で死にかけたのはどこ吹く風と暴飲暴食をし

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

【結婚式二次会のゲームなどにおすすめ】めくりフリップ 自作 手作り 作り方 材料 で検索にひっかかれ!!

先日友達の結婚式の二次会の幹事をやりました。 その中でゲームの中でめくりフリップあった方がいい

記事を読む

「ssh port 変更 さくら 専用サーバ できない」 などのワードで検索引っかかってこい

ずーと前からさくらの専用サーバのsshのポートを22から変更しなくちゃ危ないって思っていたけど、人間

記事を読む

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

Lightbox | よもやまチョモランマ へ返信する コメントをキャンセル

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

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

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

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

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

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

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

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

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

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

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

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

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

→もっと見る

PAGE TOP ↑