ユーティリティ

2017年08月

- - 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"&gt
    	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>
    に変更(赤字を追加)します。
キャプションを画像のタイトルにする方法や複数の画像をアップする場合にコントロールバーをつける方法は次の「応用編」で解説しています。

ページ移動

関連エントリー

コメント

  • コメントはまだありません。

コメント登録

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