Concrete5 5.6にFancyboxを導入する

この記事は2015年11月16日に旧HPに投稿したものです

前略

鴉河雛です

　　　　 そんなわけで、今まで画像付きの記事はポップアップで表示されたり、クリックしても何も出なかったりして、

小さい画像の際は見にくかったりしていたのですが、なんとかしてLightBoxを導入したいなぁ。。とか思ってたのですが。

ググっても出てくるのはLightBoxのブロック・・・

ちょっと違うんだよなぁ。。やりたいことが・・・

記事ブロックの画像で使いたいんですよね。

とか思いつつ、技術力もないのでどうすることもできてなかったのですが、

とあるサイトを見ていたらfancyboxを使うといいとか。。。

と言うことで早速その記事通りに導入しましたので、そのメモです。

１、fancyboxをDLして配置する

まずはfancyboxのサイトへ行ってFancyboxをDLしてきて下さい。

現在だとFanxybox-1.3.4でしょうか。

DLできたら解凍して、中にある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\>

1,2,3,4行目はアップロードしたパスと合わせてください。

今回私はトラッキングコードに書き加えました。

（管理画面⇒システムと設定⇒トラッキングコード　ヘッダーで登録）

３、実際にする際は

実際に使用する際はちょっと面倒です。

まずはいつも通りに画像を追加してください。

その際に、画像のURLを控えておきます。

次に画像を選択して、リンクの挿入をします。

リンクのURLは画像のURLで、そのほかタイトルもつける際はつけてください。

完了したら専門的タブに移動し、高度な属性のIDを「single_image」に設定してください。

（ヘッダーに加えたやつでIDを変えていたらそれに合わせます。）

あとは表示されることを確認し、完了となります。

結局リンクは作らなきゃいけないけど、前よりは楽になったのでこれでいいかなぁとか思ってます。

追記 2016/02/09

※Concrete5 5.7では標準で同等機能を搭載しております。

まずは、編集画面で画像を追加します。

その時に、アドレスをコピーしておきます。

追加した画像をクリックすると、真ん中に編集ボタンが現れるのでそれを押します。

リンクに先ほどのアドレスを記載し、リンクを開くに「ライトボックスでリンクを開く」を設定し、完了です。

※Concrete5 5.7では以下のように表示されます

最初からリンクとライトボックスの設定をつけられるようにできればいいのですが何かいい方法は無いですかね。。。

（結局ブロックを編集するしかないのかな？）

では、また。