クリックするとウインドウ内で画像が拡大する「Lightbox2」の設置手順 | うぇぶ小屋

ホーム / JavaScript / クリックするとウインドウ内で画像が拡大する「Lightbox2」の設置手順
  • 2012/12/05
  • クリックするとウインドウ内で画像が拡大する「Lightbox2」の設置手順

    クリックするとウインドウ内で画像が拡大する「Lightbox2」の設置手順

    クリックするとウィンドウ内で画像が拡大するLightbox2 (v2.51)の設置手順です。

    DEMO
    [Get Picture] [Get Picture] [Get Picture] [Get Picture] [Get Picture]

    まずLightbox2のサイトに行きファイルをダウンロードします。 lightbox2download

    Download

    ダウンロードされました。
    lightbox23file

    lightbox2.51.zipを解凍してファイルを選別していきます。 file1

    【使用するファイル】

    ■CSSフォルダ内
    file2
    ・lightbox.css
    ・screen.css

    ■imagesフォルダ内
    file3
    ・close.png
    ・loading.gif
    ・next.png
    ・prev.png

    ■JSフォルダ内
    file4
    ・jquery-1.7.2.min.js
    ・jquery.smooth-scroll.min.js
    ・jquery-ui-1.8.18.custom.min.js
    ・lightbox.js

    上記以外のファイルは使わないので削除してOKです。

    では順番に進めていきます。

    ①gifデータをアップロードします。

    ■imagesフォルダ内の
    ・close.png
    ・loading.gif
    ・next.png
    ・prev.png

    4つ全てをアップロードしてURLをメモしておきます。

    ②CSSとJavaScriptデータを書き換えます。

    ■CSSフォルダ内
    ・lightbox.css

    上記のlightbox.cssをエディタで開き、
    114行目と119行目の画像URLを①でメモしておいた自分の画像URLに書き換えて保存します。 file5

    ■JSフォルダ内
    ・lightbox.js

    上記のlightbox.jsをエディタで開き、
    51行目と52行目の画像URLを①でメモしておいた自分の画像URLに書き換えて保存します。 file6

    ③CSSファイルとJSファイルをアップロード。

    ■CSSフォルダ内
    ・lightbox.css(②で書き換えて保存したもの)
    ・screen.css

    ■JSフォルダ内
    ・jquery-1-7-2-min.js
    ・jquery-smooth-scroll-min.js
    ・jquery-ui-1-8-18-custom-min.js
    ・lightbox.js(②で書き換えて保存したもの)

    以上6つのファイルをアップロードしてURLをメモしておきます。

    最後に下記コードをHTMLの<head>~</head> 内に挿入します。
    URLとパスは③でメモした自分のものに書き換えてください。 これでLightbox2の設置は終わりです。

    画像を拡大させたい場合は、
    と記入します。

    画像を連続して表示させたい場合は、グループ名を [ ] で囲みrel="lightboxの後に入れます。
    画像名はグループ名の末尾に番号を振ったものに統一してください。

    画像を表示させる順番は、画像ファイルの末尾の番号順となります。

    例えばDEMOの夕日画像の場合は
    ・グループ名=yuhi
    ・クリック後の大きい画像名=yuni1、yuni2、yuni3、yuni4、yuhi5
    ・クリック前の小さい画像名=yuhis1、yuhis2、yuhis3、yuhis4、yuhis5
    といった具合です。

    以上参考になれば幸いです。

    この記事を読んだ人はこんな記事も読んでます

    TwitterやFacebookページでは日々うぇぶ小屋が気になった情報(ウェブ制作・運営、ブログの収益化に関する事が多い)をつぶやいていますのでこの機会にぜひ"フォロー"または"いいね"をよろしくお願いします。


    Twitterアカウント → @webgoya
    Facebookページ → webgoya
    RSSフィードを配信しています → RSS購読はこちら

    コメント一覧
    この記事にコメントを残す
    管理者にだけ表示を許可する

    人気記事

    最新のエントリー

    カテゴリ

    ライター募集!