Tag: ライトボックス

最近では、すっかり定番となってしまったライトボックスですが、ライトボックスのコピーキャットがオリジナルを越える機能を搭載して、どんどん出てきている。 ライトボックスクローンの比較表が作成される程、その数は日に増しているので、クオリティの高いの数個使いこなし、是非次のプロジェクトに合わせて、一つ取り入れたいものだ。 そこで、今回は、FANCYBOXというすばらしいライトボックスクローンの設置方法を紹介しよう。 1. 必要なファイルをダウンロード なにはともあれ、必要なファイルをダウンロードしましょう。 うれしいことに、FancyBoxをダウンロードしますと、必要なファイルがすべて入ってます。早速FancyBoxのウェブサイトに行って、右側のダウンロードリンクを押してください。 FancyBox http://fancybox.net 2. 必要なファイルをページにリンクさせる 自分はファイルの配置を以下のようにしましたが、自分のウェブサイト合わせた配置でかまいません。 私と同じファイルの配置であれば、index.phpは以下の様にしてください。ファイルの配置を変えた場合は、自分のフィアルの配置に合わせて、リンクのパス（道）は変更してください。 ３．一個のイメージだけをライトボックスで表示 最初に画像ファイルへのリンクを作り、a tag に class 若しくは id を指定する。 そして、以下の様にしてその a tag を fancybox で表示する様に指定するコードをhead内に入れる。 もっと写真のでかたなどをコントロールしたい場合は、オプションを指定してください。 ４．アルバムのイメージをライトボックスで表示 アルバムなど複数のイメージを表示させる場合でも、やり方はさっき程と同じです。唯一違うのは、a tag の中に rel=”” 内にアルバム名を指定するだけです。 複数のアルバムがある場合でも、アルバム名を変えるだけになります。 もし、アルバムのサムネイルを一個しか表示しない場合は、以下のようにしてください。 ５．インラインコンテンツをライトボックスで表示 インラインコンテンツとは、同じフィアル内にあるコンテンツのことです。同じファイル内にコンテンツを作り、divなどの中にいれて、display:none を指定して、ページが表示されても見えないようにします。fancybox でリンク先をそのdivに指定しますと、fancyboxが勝手にdisplayを変更し、ライトボックスの中に表示してくれます。 これは、とっても簡単にできるにも関わらず、いろいろな所で使えるので便利です。User Experienceの向上に欠かせないものです。たとえば、ちょっとした規約などの表示を別のページに飛ばすのではなく、ライトボックス内に表示。他にも、用語の意味を表示したり、ビデオを表示したりできます。 ６．ajaxコンテンツ をライトボックスで表示させる Ajaxでコンテンツを表示させるのも、リンクの先を別のページに変えるだけで、基本的にはさっき程のインラインと変わりありません。 ７．iFrameで別のサイトコンテンツ をライトボックスで表示させる iframeなどは、よく別サイトを自分サイト内に表示させる場合などに使います。iframeの場合は、リンク先URLのあとに?iframeを入れるだけです。 http://example.com?iframe 是非、あなたの今のサイトに導入してみてください。