個人用ツール

画像をライトボックス風に表示させたい

提供: baserCMS公式ガイド

2014年11月2日 (日) 12:08時点におけるGoichi Maniwa (トーク | 投稿記録)による版

(差分) ←前の版 | 最新版 (差分) | 次の版→ (差分)
移動: 案内, 検索

画像をライトボックス風に表示させる方法をご紹介します。ブログ記事中の画像で使う場合と、固定ページ内で使う場合とで少し手順が異なります。

使用するjQueryプラグイン「Colorbox」

baserCMSには、ライトボックス風の表示を可能にするjQueryプラグインとして、「Colorbox」が同封されています。ブログでも固定ページでもこのColorboxを使用します。

ブログで利用する

配布されているテーマをお使いの場合、基本的にはブログ用のレイアウトテンプレートで上述のColorboxは読み込まれています(読み込まれていない場合や、独自テーマを作成している場合は、Colorboxの読み込みについて後述の#固定ページで利用するを参照してください)。

Colorboxの読み込みができている状態であれば、あとは画像のイメージタグ内にrel属性を付与し、値を「colorbox」とします。少し面倒な作業ですが、もしもアップローダープラグインを使用しているのであれば、画像の挿入時にrel属性の付与を自動で行ってくれます。

固定ページで利用する

固定ページで利用する場合は、Colorboxの読み込みと、実行のためのjavascriptを記述しなくてはいけません。使用しているレイアウトテンプレーとのヘッダ部分で、以下のようにColorboxを読み込んでください。

$this->BcBaser->js('admin/jquery.colorbox-min-1.4.5');
$this->BcBaser->css('admin/colorbox/colorbox');

上記は単独でColorbox用のJSとCSSを呼び出していますが、もちろん他のJS、CSSと一緒に呼び出してもらっても構いません。またColorboxにはバージョンがあります。お使いのbaserCMSに同封のものを確認してください。Colorbox本体の場所は

  /lib/Baser/webroot/js/

配下に入っています。

次に実行するための記述をします。これもレイアウトテンプレート内で記述してください。

無効な言語です。

以下のように言語を指定する必要があります: <source lang="html4strict">...</source>

構文ハイライト機能に対応している言語は以下の通りです:

4cs, 6502acme, 6502kickass, 6502tasm, 68000devpac, abap, actionscript, actionscript3, ada, algol68, apache, applescript, apt_sources, arm, asm, asp, asymptote, autoconf, autohotkey, autoit, avisynth, awk, bascomavr, bash, basic4gl, bf, bibtex, blitzbasic, bnf, boo, c, c_loadrunner, c_mac, caddcl, cadlisp, cfdg, cfm, chaiscript, cil, clojure, cmake, cobol, coffeescript, cpp, cpp-qt, csharp, css, cuesheet, d, dcl, dcpu16, dcs, delphi, diff, div, dos, dot, e, ecmascript, eiffel, email, epc, erlang, euphoria, f1, falcon, fo, fortran, freebasic, freeswitch, fsharp, gambas, gdb, genero, genie, gettext, glsl, gml, gnuplot, go, groovy, gwbasic, haskell, haxe, hicest, hq9plus, html4strict, html5, icon, idl, ini, inno, intercal, io, j, java, java5, javascript, jquery, kixtart, klonec, klonecpp, latex, lb, ldif, lisp, llvm, locobasic, logtalk, lolcode, lotusformulas, lotusscript, lscript, lsl2, lua, m68k, magiksf, make, mapbasic, matlab, mirc, mmix, modula2, modula3, mpasm, mxml, mysql, nagios, netrexx, newlisp, nsis, oberon2, objc, objeck, ocaml, ocaml-brief, octave, oobas, oorexx, oracle11, oracle8, oxygene, oz, parasail, parigp, pascal, pcre, per, perl, perl6, pf, php, php-brief, pic16, pike, pixelbender, pli, plsql, postgresql, povray, powerbuilder, powershell, proftpd, progress, prolog, properties, providex, purebasic, pycon, pys60, python, q, qbasic, rails, rebol, reg, rexx, robots, rpmspec, rsplus, ruby, sas, scala, scheme, scilab, sdlbasic, smalltalk, smarty, spark, sparql, sql, stonescript, systemverilog, tcl, teraterm, text, thinbasic, tsql, typoscript, unicon, upc, urbi, uscript, vala, vb, vbnet, vedit, verilog, vhdl, vim, visualfoxpro, visualprolog, whitespace, whois, winbatch, xbasic, xml, xorg_conf, xpp, yaml, z80, zxbasic


<script type="text/javascript">
$(function(){
if($("a[rel='colorbox']").colorbox) $("a[rel='colorbox']").colorbox({transition:"fade",maxWidth:'100%'});
});
</script>

あとはブログの時と同じように、画像のimgタグにrel属性を付与し、値を「colorbox」とすれば完了です。もしもアップローダープラグインを使用しているのであれば、画像の挿入時にrel属性の付与を自動で行ってくれます。