Ellinikonblue.com PukiWiki - blosxom/bsnap

AmazonStore
by amanatu

ダウンロード

bsnap_hs20071210.zip

　Highslide JS を利用して、サムネイル付き画像をエントリに挿入するための bfep プラグインです。

↑

注意事項 †

　このプラグインは、bracket_fep プラグイン用のプラグイン（ bfep ）で、単体ではご使用になれません。

↑

導入 †

↑

Highslide JS のインストール †

　このプラグインを導入する前に AJAX ライブラリである Highslide JS を導入する必要があります。Highslide JS のホームページからライブラリをダウンロードし、そのアーカイブ内の highslide ディレクトリ以下を丸ごと適当なディレクトリにアップロードします。

　次に head.* フレーバーで以下の行を追加して、Highslide JS を読み込み、初期化を行うようにします。

<script type="text/javascript"
  src="http://www.yourdomain.net/lib/javascript/highslide/highslide.js"></script>
<script type="text/javascript">
  hs.graphicsDir = 'http://www.yourdomain.net/lib/javascript/highslide/graphics/';
  window.onload = function() {
    hs.preloadImages(5);
  }
</script>

　上記の例では http://www.yourdomain.net/lib/javascript/ で HTTP アクセスできるディレクトリに Highslide JS をアップロードした例になります。

　次に foot.* フレーバーに以下の１行を追加します。

<div id="highslide-container"></div>

　基本上記の１行はどこに追加してもかまいません*1が body 要素が終わる直前などがよいかと思います。

↑

CSS ファイルの準備 †

　次にダウンロードしたプラグイン内に含まれる CSS ファイルを読み込むようにフレーバー内に追加するか、もしくは以下の内容をすでに読み込む設定をしている CSS ファイルに追加します。

　ただし追加時に .highslide, .highslide-loading ブロックにある URL を適宜変更することを忘れないでください。

bsnap_hs プラグイン用 CSS ファイルの例

/* CSS Definition File for snap_hs plugin
 * Version 2007 Sep.
 */
div.snaphs {
  text-align: center;
}

div.snaptx {
  text-align: center;
}

div.snaphs img
{
  background-color: #FFFFFF; /* 白 */

  padding: 10px;

  border-left:   1px solid #808080; /* グレー */
  border-right:  2px solid #000000; /* 黒 */
  border-top:    1px solid #808080; /* グレー */
  border-bottom: 2px solid #000000; /* 黒 */
}

.highslide {
    cursor: url(http://www.yourdomain.net/lib/javascript/highslide/graphics/zoomin.cur), pointer;
    outline: none;
}

.highslide img {
}

.highslide:hover img {
}

.highslide-image {
    border: 10px solid white;
}

.highslide-image-blur {
}

.highslide-caption {
    display: none;
    border: 5px solid white;
    border-top: none;
    padding: 5px;
    background-color: white;
}

.highslide-loading {
    display: block;
    color: white;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    padding: 3px;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    background-color: black;
    /*
    padding-left: 22px;
    background-image: url(http://www.yourdomain.net/lib/javascript/highslide/graphics/loader.gif);
    background-repeat: no-repeat;
    background-position: 3px 1px;
    */
}

a.highslide-credits,
a.highslide-credits i {
    padding: 2px;
    color: silver;
    text-decoration: none;
    font-size: 10px;
}

a.highslide-credits:hover,
a.highslide-credits:hover i {
    color: white;
    background-color: gray;
}

.highslide-display-block {
    display: block;
}

.highslide-display-none {
    display: none;
}

↑

本体の編集 †

　以下の変数を必要に応じて書き換えてください。

@image_ext: 　イメージファイルとして読み込むファイルの拡張子を指定します。

$include_dir: 　イメージファイルとして読み込むファイルが存在するディレクトリのパスを指定します。

$include_url: 　イメージファイルとして読み込むファイルが存在するディレクトリのURL を指定します。

$image_dirname: 　イメージファイルとして読み込むファイルが存在するディレクトリ名を指定します。通常変更する必要はありません。

$thumbnail_dirname: 　イメージファイルのサムネルとなるファイルが存在するディレクトリ名を指定します。通常変更する必要はありません。

$class: 　画像ファイルをエントリに挿入する際のブロック要素のクラス名を指定します。通常変更する必要はありません。

　少々ややこしいですが、表示するイメージファイルをアップロードするディレクトリは $include_dir/$image_dirname となり、このディレクトリに filename.jpg と言うファイルをアップロードすると、$include_url/$image_dirname/filename.jpg として HTTP アクセスできるように変換されます。

　また $include_dir/$image_dirname/$thumbnail_dirname に $include_dir/$image_dirname と同名のファイルがあると Highslide JS による拡大表示機能が有効になります。

Nov 23, 2007 版全ソース

# Bracket Front End Plugin for blosxom: bsnap_hs
# info@ellinikonblue.com
# Version: 2007-11-23
#
# This script is encoded in UTF-8
# 【注意事項】
# ※ このプラグインには Highslide JS ライブラリ (JavaScript) が必要です。
# Highslide JS http://vikjavev.no/highslide/
package bsnap_hs;

#---------------------------------------
# Configurable Variables
#
my @image_exts = ( 'jpg', 'jpeg', 'png' , 'gif' );
# Directories Settings
my $include_dir = "/home/user/public_html/blosxom/lib";
my $include_url = "http://www.yourdomain.com/blosxom/lib";
#
my $image_dirname     = "image";     # 画像ディレクトリ名
my $thumbnail_dirname = "thumbnail"; # サムネイルディレクトリ名
# 実際には各ディレクトリは、
#   画像用ディレクトリが       $include_dir/$image_dirname
#   サムネイル用ディレクトリが $include_dir/$image_dirname/$thumbnail_dirname
# となります。
#
my $class = "snaphs"; # CSS 用クラス名
#---------------------------------------
# Main routine for bfep
#
$include_dir =~ s!/$!!; $include_url =~ s!/$!!;

sub start {
  # ディレクトリ設定チェックおよび準備
  return 0 if ( !-e $include_dir );
  if ( !-e "$include_dir/$image_dirname" ) {
    my $mkdir_r = mkdir( "$include_dir/$image_dirname", 0755 );
    $mkdir_r or return 0;
  }
  if ( !-e "$include_dir/$image_dirname/$thumbnail_dirname" ) {
    my $mkdir_r = mkdir( "$include_dir/$image_dirname/$thumbnail_dirname", 0755 );
    $mkdir_r or return 0;
  }

  return 1;
}

sub story {
  my ( $pkg, $pattern ) = @_;
  my $exts = join( "|",  @image_exts );
  my $filename;
  my $rtn = '';

  return 0 if ( $pattern !~ m/^([\/\w\-\!\#\$\%\'\^\(\)\{\}\~]+\.(?:$exts))$/is );

  $filename = $1;

  return 0 if ( !-e "$include_dir/$image_dirname/$filename" );

  $rtn  = "<div class=\"$class\">\n";
  if ( -e "$include_dir/$image_dirname/$thumbnail_dirname/$filename" ) {
  # サムネイル画像がある場合
    $rtn .= "  <a href=\"$include_url/$image_dirname/$filename\"\n";
    $rtn .= '    class="highslide" onclick="return hs.expand(this)">'."<img\n";
    $rtn .= "    src=\"$include_url/$image_dirname/$thumbnail_dirname/$filename\"\n";
    $rtn .= "    alt=\"Image:$filename\" /></a>\n";
  } else {
  # サムネイル画像がない場合
    $rtn .= "  <img src=\"$include_url/$image_dirname/$filename\" alt=\"Image:$filename\" />\n";
  }
  $rtn .= "</div>";

  return $rtn;
}

# 【参考】 Highslide JS に関する設定
# このプラグインの動作には highslide JS の導入が必須です。
# 以下の手順を参考に highslide JS をあらかじめ導入しておいてください。
#
# 1. Highslide JS http://vikjavev.no/highslide/ をダウンロードし、
#    解凍したファイルの中から highslide ディレクトリ以下を丸ごと
#    適当な位置にアップロードする
#
# 2. このプラグインに同梱されている bfep_snap.css のカーソルイメージの指定 URL など、
#    環境依存部分（二カ所）を編集してアップロードする
#
# 3. blosxom のフレーバの head.* に上記の highslide ライブラリおよび CSS ファイルの
#    読み込みを行う行を追加する
# 例）※ URL 部分の記述は環境に合わせて適宜変更してください
#
#  <link rel="stylesheet" type="text/css"
#    href="http://www.yourdomain.net/lib/css/bfep_snap.css" media="screen,tv" />
#  <script type="text/javascript"
#    src="http://www.yourdomain.net/lib/javascript/highslide/highslide.js"></script>
#  <script type="text/javascript">
#    hs.graphicsDir = 'http://www.yourdomain.net/lib/javascript/highslide/graphics/';
#    window.onload = function() {
#        hs.preloadImages(5);
#    }
#  </script>
#
# 5. blosxom のフレーバ foot.* に以下の一行を追加する
#
#  <div id="highslide-container"></div>
#
# ※ body 要素内の最後くらいが適当かと思います
#
# 以上の設定で highslide JS 導入は終了です。

1;

↑

アップロード †

　プラグイン本体ファイルの編集が終了したら、bfep プラグインディレクトリにアップロードしてください。

　あとは全く snap_in プラグインと同じです。story フレーバーで、以下のように記述すると、その記述したところが画像 image.jpg に置き換わります。

　この際、あらかじめ $include_dir/$image_dirname で指定されるディレクトリに image.jpg ファイルがアップロードされている必要があります。

[image.jpg]

　またこのとき $include_dir/$image_dirname/$thumbnail_dirname で指定されるディレクトリに image.jpg のサムネイルとなる画像ファイルを同名のファイル名でアップロードしておくと、ページ表示時にこのサムネイル画像が表示され、この画像をクリックすると Highslide JS を利用して拡大表示され、$include_dir/$image_dirname/image.jpg が表示されるようになります。

　$include_dir/$image_dirname/$thumbnail_dirname にサムネイル画像がなく、$include_dir/$image_dirname だけに画像ファイルがない場合は、拡大表示機能がなしで単に指定された画像に置き換わるだけになります。

↑

リンク集 †

*1 特に foot.* フレーバー内でなくてもかまいません

添付ファイル:

bsnap_hs20071210.zip 393件 [詳細]

[ トップ ] [ 編集 | 凍結 | 差分 | バックアップ | 添付 | リロード ] [ 新規 | 一覧 | 単語検索 | 最終更新 | ヘルプ ]

blosxom/bsnap_hs plug-in

Ellinikonblue.com

最新の20件

Ellinikonblue.net

Turf Watch

bsnap_hs plug-in †