ユーティリティ

2018年07月

1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -

キーワード検索

キーワード検索フォーム
キーワード

ユーザー

  • cccのアバター

新着画像

過去ログ

Twitter

Twilogを見る

Feed

エントリー

freoでHighslide JSを導入するには(基本編)

freoで画像を拡大するのにcolorboxではなく、Highslide JSを使用する場合の設置方法です。

  1. Highslide JS の左側のメニューにある「Download」を開いて「Get the zip package」の下にある「Download now!」ボタンを押して一番下にある「Do you accept the licence conditions above?」の「Yes」ボタンを押してダウンロードします。
  2. ダウンロードしたものを解凍し、highlide フォルダ内の以下のファイルをfreoの次のディレクトリ内にUPします。
    • highslide.jsjs/
    • highslide.csshighslide-ie6.csscss/
    • graphics/images/
    freojshighslide.jscsshighslide.css
     ┃     ┗ highslide-ie6.cssimagesgraphics ~  (略)
  3. templates/header.html
    <link rel="stylesheet" href="{$freo.core.http_url}{$smarty.const.FREO_CSS_DIR}colorbox.css" type="text/css" media="all" />
    の部分を
    <link rel="stylesheet" href="{$freo.core.http_url}{$smarty.const.FREO_CSS_DIR}highslide.css" type="text/css" media="all" />
    <!--[if lt IE 7]>
    <link rel="stylesheet" href="{$freo.core.http_url}{$smarty.const.FREO_CSS_DIR}highslide-ie6.css" type="text/css" media="all" />
    <![endif]-->
    に、
    <script type="text/javascript" src="{$freo.core.http_url}{$smarty.const.FREO_JS_DIR}jquery.colorbox.js"></script>
    の部分を
    <script type="text/javascript" src="{$freo.core.http_url}{$smarty.const.FREO_JS_DIR}highslide.js"></script>
    に変更(緑字赤字に)し、
    </head>
    の手前に
    <script type="text/javascript">
    	hs.graphicsDir = '{$freo.core.http_url}images/graphics/';
    	hs.outlineType = 'rounded-white';
    </script>
    を追加します。
  4. メディア挿入 ⇒ 登録した画像(サムネイル使用)に適用する場合:templates/internals/admin/iframe_media.html の83、84行目あたりにある
    {if $file.thumbnail.width and $file.thumbnail.height}
    title="&lt;a href=&quot;{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}medias/~略~/&gt;&lt;/a&gt;"
    の部分を
    {if $file.thumbnail.width and $file.thumbnail.height}
    title="&lt;a class=&quot;highslide&quot; onclick=&quot;return hs.expand(this)&quot; onKeyPress=&quot;return hs.expand(this)&quot; href=&quot;{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}medias/~略~/&gt;&lt;/a&gt;"
    に変更(赤字を追加)します。
  5. エントリーの添付ファイルで登録した画像(サムネイル使用)に適用する場合:templates/internals/default/default.html の101、102行目あたりにある
    <!--{elseif $entry_thumbnails[$entry.id]}-->
    	<p><a href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_files/~略~></a></p>
    の部分を
    <!--{elseif $entry_thumbnails[$entry.id]}-->
    	<p><a class="highslide" onclick="return hs.expand(this)" onKeyPress="return hs.expand(this)" href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_files/~略~></a></p>
    に、
    templates/internals/view/default.html の26、27行目あたりにある
    <!--{elseif $entry_thumbnail}-->
    	<p><a href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_files/~略~></a></p>
    の部分を
    <!--{elseif $entry_thumbnail}-->
    	<p><a class="highslide" onclick="return hs.expand(this)" onKeyPress="return hs.expand(this)" href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_files/~略~></a></p>
    に変更(赤字を追加)します。
  6. ページの添付ファイルで登録した画像(サムネイル使用)に適用する場合:templates/internals/page/default.html の20、21行目の
    <!--{elseif $page_thumbnail}-->
    	<p><a href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}page_files/~略~></a></p>
    の部分を
    <!--{elseif $page_thumbnail}-->
    	<p><a class="highslide" onclick="return hs.expand(this)" onKeyPress="return hs.expand(this)" href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}page_files/~略~></a></p>
    に変更(赤字を追加)します。
  7. エントリーの添付ファイルで登録した画像(サムネイル不使用)&イメージに適用する場合:templates/internals/default/default.html の99、100行目あたりにある
    <!--{if $entry.file and $entry.image}-->
    	<p><a href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_files/~略~></a></p>
    の部分を
    <!--{if $entry.file and $entry.image}-->
    	<p><a class="highslide" onclick="return hs.expand(this)" onKeyPress="return hs.expand(this)" href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_files/~略~></a></p>
    に、
    templates/internals/view/default.html の24、25行目の
    <!--{if $entry.file and $entry.image}-->
    	<p><a href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_files/~略~></a></p>
    の部分を
    <!--{if $entry.file and $entry.image}-->
    	<p><a class="highslide" onclick="return hs.expand(this)" onKeyPress="return hs.expand(this)" href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_files/~略~></a></p>
    に変更(赤字を追加)します。
  8. ページの添付ファイルで登録した画像(サムネイル不使用)&イメージに適用する場合:templates/internals/page/default.html の18、19行目あたりにある
    <!--{if $page.file and $page.image}-->
    	<p><a href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}page_files/~略~></a></p>
    の部分を
    <!--{if $page.file and $page.image}-->
    	<p><a class="highslide" onclick="return hs.expand(this)" onKeyPress="return hs.expand(this)" href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}page_files/~略~></a></p>
    に変更(赤字を追加)します。
キャプションを画像のタイトルにする方法や複数の画像をアップする場合にコントロールバーをつける方法は次の「応用編」で解説しています。

ページ移動

関連エントリー

コメント

うにっこ

freo設置・カスタマイズにあたり、大変ありがたく参考にさせて頂いております。
以前、WDPでHighslide JSを使っていたのでfreoでも使いたいと思い、こちらの記事の通りにしてみたのですが…
1.iframe_media.html の該当部分を見つけられないです;(100行目のelseif~には同じ表記がありましたが…)
2.header.htmlを書き換えるとブラウザでの表示が真っ白になってしまいます(ソースでは見えます)
どれがあると真っ白になるのかと少しずつ表記をいじって確認した結果、/headの手前に入れる<script type="text/javascript"&gt hs.graphicsDir~(以下略)があると真っ白になってしまうようです。
サーバーはさくらのスタンダード、freoは1.20、highlideは5.0(ともに最新版)です。
この作業をしない状態では問題なく使えております。
不躾ですが、なにとぞよろしくお願いします…。

  • 2018/03/19 02:28:08

うにっこ

たびたび申し訳ありません、画面が真っ白になる問題は<script type="text/javascript"&gtと書かれているのを<script type="text/javascript">にしましたら解決しました。ファイル添付(サムネイル使用)の方ではしっかり反映できました!
ただメディア(サムネイル使用)の方がどうしても実現できません…。
どうすればよいのかご教授いただければ幸いです。

  • 2018/03/19 23:46:57

うにっこ

本当に何度も申し訳ありません。ひとまず解決?できましたのでご報告を…。
半分ヤケでiframe_media.htmlの101行目のtitle="&lt;a href=(略)のところに書き加えたところ、投稿画面でメディア(画像)挿入のリンクにタグが追加されていました。
ところが実際に投稿するとタグが消えてしまうので、色々調べてjs/admin.jsの//TinyMCEのtinymce.init({ 以下にvalid_elements:'*[*]'を書き加えたところ、無事に希望する動作を実現できました。
まずいやり方かもしれない、という懸念はありますがひとまずこれでしのいでみようと思います。お時間のある時にでもまともなやり方をご教授頂ければ有難く存じます。たびたびの書き込み、申し訳ありませんでした。

  • 2018/03/20 20:08:40

ccc

すいません。遅ればせながら...

<script type="text/javascript"&gt

<script type="text/javascript">

の誤りですね。申し訳ありませんm(_ _)m 修正しておきます。

TinyMCEの修正は、それでいいと思いますよ。

  • 2018/03/24 21:56:47

コメント登録

  • コメントを入力してください。
  • 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
登録フォーム
名前
メールアドレス
URL
コメント(コメント本文の装飾について
閲覧制限
※基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がございますので、その旨ご了承下さい。
freoをカタカナ3文字で入力してください(スパム対策)