スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
公開: --年--月--日, カテゴリ: スポンサー広告

画像表示に便利なスクリプト Highslide JS 導入メモ

少し前に画像をポップアップ表示させるスクリプト"Highslide JS"を導入してみました。 個人的に使い勝手がよくかなり気に入ったので導入手順をメモしておきます。* この記事で導入した"Highslide JS"のバージョンは4.1.9です。 なお、この記事はみさぱんだらけのFC2ブログでのHighslide JS 導入メモを参考に導入したのちにまとめています。

更新: 2011-01-15

特徴

追記: 2011-01-15
デモページを用意しました。『附属書(P110) - Highslide JS デモページ

用意するもの

注意: Licenseに関する事です。利用の際は御一読願います。
このスクリプトは非営利目的の場合のみFreeでの利用を許可されています。営利目的のウェブサイトで利用する場合は有償パッケージをお求め下さい。
製品を直接販売していないサイトであっても、例えばアフィリエイト(Google AdSenseなど)のような広告収入を得ているサイトも同様に商用サイトとみなされるようです。
"Highslide JS"を紹介するときはユーザーに対してこのこと(特に商用サイトではFreeではないこと)を強調して元記事へリンクしておいてくださいとのことです。
Downloadはページ中段辺りのLicenseの項目にあります。Link: Highslide JS License
以下にLicenseの文章を引用しておきます。

Highslide JS is licensed under a Creative Commons Attribution-NonCommercial 2.5 License. This means you need the author's permission to use Highslide JS on commercial websites.

WHAT IS A COMMERCIAL WEBSITE?

A commercial website is a website which purpose is generating revenue or cash flow of any type, and that isn't under a non-profit organization. So if you're selling a product, selling advertisement, selling a service or just marketing a commercial business, your site is commercial. A company website is also commercial even if it doesn't sell anything, as it's purpose is to front a commercial company.

REDISTRIBUTION

You are allowed to distribute Highslide JS with non-commercial packages given that you fulfill two conditions:

  • Emphasize to your users that Highslide JS is not free for commercial use. You can do this on your download page or when your users activate Highslide in your application.
  • Provide a link back to this web page in the same location.

ダウンロードした圧縮ファイルを展開すると以下のような構成になっています。今回の導入メモではgraphicsフォルダ以下の画像とhighslideフォルダ以下のhighslide-full.js, highslide.cssファイルを使って導入します。

highslide-4.1.9/
   ├ examples/
   │   └ サンプルhtmlファイル
   ├ highslide/
   │   ├ graphics/
   │   │   ├ outlines/
   │   │   │   └ PNG形式の画像ファイル
   │   │   └ PNG, CUR形式の画像ファイル
   │   └ javascript, cssファイル
   ├ images/
   │   └ サンプル画像
   └ index.htm

導入メモ

  1. highslide-full.jsファイルの編集

    画像ファイルへのパスに関する記述を変更します。36行目から以下の記述があります。

    /* 変更前 */
    graphicsDir : 'highslide/graphics/',
    expandCursor : 'zoomin.cur', // null disables
    restoreCursor : 'zoomout.cur', // null disables
    /* 変更後 */
    graphicsDir : 'http://file/path/to/grahpics/',
    expandCursor : 'zoomin.ico', // null disables
    restoreCursor : 'zoomout.ico', // null disables

    1行目の記述はgraphicsフォルダ以下の画像のパスを記述(道順)しています。各自のアップロードしたディレクトリのURLに変更します。

    2,3行目については、FC2ブログでは拡張子curのカーソルファイルがアップロードできないため、対応している拡張子のicoに変更しています。よって特に制限のないところにアップロードしている場合は変更する必要はありません。

    次に1109行目の記述を変更します。

    /* 変更前 */
    var src = hs.graphicsDir + (hs.outlinesDir || "outlines/")+ this.outlineType +".png";
    /* 変更後 */
    var src = hs.graphicsDir + this.outlineType +".png";

    これはFC2ブログがディレクトリ単位のアップロードに対応していないことへの対策ですのでgraphicsディレクトリごとアップロードした場合はここの変更も不要です。

  2. highslide.cssファイルの編集

    graphicsフォルダ以下の画像のパスを変更します。全部で18箇所ありますので一つ残らず変更しましょう。エディタの一括置換機能を利用すればあっという間に終わりますが、参考のため行番号を記載しておきます。

    行番号: 65, 82, 126, 184, 194, 204, 331, 382, 496, 518, 538, 618, 626, 636, 764, 778, 824, 838 の18箇所

  3. ファイルのアップロード

    以下のファイルをアップロードします。

    • highslide-full.js
    • highslide.css
    • graphicsフォルダ内の画像全て (FC2ブログの場合は拡張子.curのファイルは.icoに変更しておく)
    • outlinesフォルダ内の画像全て
  4. テンプレートの編集(FC2ブログ)

    管理画面からテンプレートの編集を選択し、HTMLの編集で<head>~</head>間に以下の記述を加えます。

    
    <link rel="stylesheet" type="text/css" href="アップロード先のURL" />
    <script type="text/javascript" src="アップロード先のURL"></script>

    更にもう一つJavaScriptを記述しますが、これは利用したい機能によって内容が異なります。examplesフォルダの中にサンプルのHTMLファイルがありますので利用したいもののファイルを見て記述をコピーしましょう。ただし、どの記述も始めのhs.graphicsDir = '../highslide/graphics/';の箇所を修正しておきましょう。これはgraphicsフォルダ内の画像をアップロードしたディレクトリを指定します。以上で導入は終わりです。

利用例

これも利用したい機能のHTMLファイルを見てそれを真似して記述すればOKですが、一つ記述例を載せておきます。


<a href="URI" class="highslide" onclick="return hs.expand(this)">
    <img src="URI" width="画像の幅" height="画像の高さ" alt="代替テキスト" title="タイトル" />
</a>
<div class="highslide-caption">
キャプションを記述します。<!-- class="highslide-caption"を記述した要素がキャプションエリアとなるので、この例のようにdiv要素である必要はありません。 -->
</div>

画像挿入の際に赤字の内容を追加するだけです。後半のdiv要素はキャプション(見出し)が必要なければ書かなくても問題ありません。a要素中にclass属性とonclick属性を追加するだけでとりあえず動作はします。

以上、導入メモでした。細かい使い方や設定などはサンプルに記載されているのでそちらを参考にどうぞ。(他の機能や設定項目は気が向いたら書くかも)今回導入する時に手こずりましたが、みさぱんださんの記事のお陰で無事できました。みさぱんださん、どうもありがとうございました。

ではでは。

公開: 2010年09月01日, カテゴリ: ぶろぐいじり