Concrete5の記事ブロック内の画像にfancyboxをつける

Concrete5にlightboxのブロックを追加する方法はgoogle先生に聞いてみるといくつか出てきます。

でもやりたいことは、記事ブロックに貼付けた画像をlightbox風味にしたい。

こちらを見ると、Fancyboxが良いらしい。

ということでFancybox-1.3.4をダウンロードして解凍します。

解凍したなかで、使うのはfancyboxというフォルダの中身だけなので、これだけサーバにアップロードします。

<header>～</header>内にfancyboxのjsをincludeします。

アップロードするディレクトリによって、src以下が変わるので注意して下さい。

fancyboxの公式にあるサンプルをほぼそのまま使います。

<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="/fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript">
	$(document).ready(function() {
		$("a#single_image").fancybox();
		$("a.group").fancybox({
		'transitionIn'	:	'elastic',
		'transitionOut'	:	'elastic',
		'speedIn'		:	600,
		'speedOut'		:	200,
		'overlayShow'	:	false
		});
	});
</script>

さて、実際使う場合です。

画像のリンク先を控えておいて、画像にリンクを作成し、URLを設定します。

"上級者向け"タブのID属性にsingle_imageと入力します。

これで画像をクリックするとlightbox風の動作をします。

特定の画像をlightbox風にする為に今回の方法を使いました。

他にもいろいろできるようなので、時間が空いたら試してみたいと思います。

すべての画像をlightbox風にするなら、fancyzoomがいいかも。（こちらは試してません）

Tweet