アイデアハッカーアイデアハッカーページの先頭へトップに戻る2015年2月7日Web制作Lightbox最新版(2.7.1)の設置方法と使い方ツイート画像をモーダルウィンドウでお洒落に表示することができる定番スクリプト「Lightbox」ですが、検索しても古いバージョンの設置方法ばかりヒットするので、最新版の設置方法と使い方を載せておきます。デモ作ったLightboxって何?って人は見てみてください。Demoこういうお洒落な演出を、簡単な記述だけで実現できるってのがLightboxの魅力です。STEP1:ダウンロードとりあえずLightbox本体をダウンロードしましょう。jQuery色々ありますが、最新バージョンの圧縮版でOKです。Googleにホスティングされているものを使ってもOKなので、その場合は以下のコードをhead内に記述します。src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>LeoTiger_7はこっちの方法でやってます(楽だから)。STEP2:ファイルを配置ダウンロードしたLightbox本体を解凍すると、こんな感じの構成になっています。これを自分のサイトに配置するんですが、必要なファイルは以下の通り。css/lightbox.cssjs/lightbox.min.jsimg/close.pngimg/loading.pngimg/next.pngimg/prev.pngこれだけで動きます。それぞれ自分のサイトのCSS、JS、imgフォルダに移しましょう。先ほど配置したファイルを読み込みます。src="js/lightbox.min.js"></script></head>これでLightboxを使う準備が整いました。画像にリンクしたaタグに「data-lightbox」という属性を与えると、Lightboxが動作します。属性値は何でもOKですが、ここに入れた値でグループ化(後述)されるという点は覚えておきましょう。/></a>また、画像にはキャプションを付けることも可能です。その場合はaタグに「data-title」という属性を加えます。/></a>画像のグループ化Lightboxは「data-lightbox」に指定した値で画像をグループ化します。width="256"/></a>上記の例だと「data-lightbox」に「group」という値を与えられた画像がグループ化され、画像に次の(前の)画像に移るためのボタンが表示されるようになります。以上、Lightboxの設置方法、使い方の解説でした。北海道在住の元気な22歳。右手に酒、左手に煙草、目の前にPCという生活。クズだけどいい人(ただし彼女はいない)。今欲しいのはリボルトの実機。