6.49 HighSlide JSによるサムネイル画像のズームアップ ★

P.617

Highslide JSの設定

●head要素にlink要素とscript要素を追加

「ヘッダー」テンプレートモジュール（サンプルテンプレート）
*注：書籍では青色の設定が不足していますので、追加してください。

...前略...
  <mt:if name="index_template">
    <mt:CCLicenseRDF />
  </mt:if>
<script type="text/javascript" src="<mt:blogURL />highslide/highslide.js"></script>
<script type="text/javascript">
//<![CDATA[
hs.graphicsDir = '<mt:blogURL />highslide/graphics/';
//]]>
</script>
</head>
...後略...

★「HTMLヘッダー」テンプレートモジュール（デフォルトテンプレート）

007を追加します。

    ...前略...
001:<link rel="stylesheet" href="<mt:BlogURL />litebox/css/lightbox.css" type="text/css" media="screen" />
002:<link rel="stylesheet" href="<$mt:Link template="styles"$>" type="text/css" />
003:<link rel="start" href="<$mt:BlogURL$>" title="Home" />
004:<link rel="alternate" type="application/atom+xml" title="Recent Entries" href="<$mt:Link template="feed_recent"$>" />
005:<script type="text/javascript" src="<$mt:Link template="javascript"$>"></script>
006:<script type="text/javascript" src="<mt:BlogURL />highslide/highslide.js"></script>
007:<$mt:CCLicenseRDF$>

●スタイルシートの変更

「スタイルシート」インデックステンプレート
*注：書籍では青色の設定が不足していますので、追加してください。

.highslide {
    cursor: url(<mt:blogURL />highslide/graphics/zoomin.cur), pointer;
    outline: none;
}
.highslide img {
    border: 2px solid gray;
}
.highslide-image-blur {
}
.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(<mt:blogURL />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;
}
a.highslide-full-expand {
    background: url(<mt:blogURL />highslide/graphics/fullexpand.gif) no-repeat;
    display: block;
    margin: 0 10px 10px 0;
    width: 34px;
    height: 34px;
}
.highslide-display-block {
    display: block;
}
.highslide-display-none {
    display: none;
}

これは、サムネイル画像をポイントした時のスタイルと、画像をズームアップしたときのスタイルを設定しています。

P.618

画像つきブログ記事の投稿

class="highslide" onclick="return hs.expand(this)"

class="highslide" onclick="return hs.expand(this)" onkeypress="return hs.expand(this)"

<a href="画像ファイルのURL" class="highslide" onclick="return hs.expand(this)" onkeypress="return hs.expand(this)">
<img src="サムネイル画像のURL" width="サムネイル画像の幅" height="サムネイル画像の高さ" alt="代替テキスト" title="画像タイトル" />
</a> 

P.621

class属性とonclick属性を手動で付与しない方法

●JavaScript外部ファイルの作成とアップロード

highslide_eh.js

addHighSlideAttribute = function() {
  var isIE = (document.documentElement.getAttribute('style') ==
              document.documentElement.style);
  if (!document.getElementsByTagName) { return; }
  var id = 'main';
  var element;
  if (id) {
    element = document.getElementById(id)
    if (!element) { return; }
  } else {
    element = document.body;
  }
  var anchors = element.getElementsByTagName('a');
  for (var i = 0, len = anchors.length; i < len; i++) {
    var anchor = anchors[i];
    if (anchor.getAttribute('href') && anchor.getAttribute('href').match(/jpg$|gif$|png$/)) {
        anchor.className = 'highslide';
      if (!anchors[i].getAttribute('onclick')) {
        isIE ? anchors[i].setAttribute('onclick', new Function('return hs.expand(this)')) :
               anchors[i].setAttribute('onclick','return hs.expand(this)');
        isIE ? anchors[i].setAttribute('onkeypress', new Function('return hs.expand(this)')) :
               anchors[i].setAttribute('onkeypress','return hs.expand(this)');
      }
    }
  }
};

highslide_eh.js

...前略...
  var id = 'content';
...後略...

●head要素にscript要素を追加

「ヘッダー」テンプレートモジュール（サンプルテンプレート）

...前略...
  <mt:if name="index_template">
    <mt:CCLicenseRDF />
  </mt:if>
<script type="text/javascript" src="<mt:blogURL />highslide/highslide.js"></script>
<script type="text/javascript" src="<mt:blogURL />highslide/highslide_eh.js"></script>
</head>
...後略...

★「HTMLヘッダー」テンプレートモジュール（デフォルトテンプレート）

003を追加します。

    ...前略...
001:<script type="text/javascript" src="<$mt:Link template="javascript"$>"></script>
002:<script type="text/javascript" src="<mt:BlogURL />highslide/highslide.js"></script>
003:<script type="text/javascript" src="<mt:BlogURL />highslide/highslide_eh.js"></script>
004:<$mt:CCLicenseRDF$>

P.622

●フッターにscript要素の追加

「フッター」テンプレートモジュール（サンプルテンプレート）

:<p id="footer">Copyright &copy; 2008 <mt:blogName encode_html="1" /> All Rights Reserved.</p>
<script type="text/javascript">
//<![CDATA[
addHighSlideAttribute();
//]]>
</script>
</body>
</html>

★「バナーフッター」テンプレートモジュール（デフォルトテンプレート）

005～009を追加します。

    ...前略...
001:</mt:BlogIfCCLicense>
002:    </div>
003:  </div>
004:</div>
005:<script type="text/javascript">
006://<![CDATA[
007:addHighSlideAttribute();
008://]]>
009:</script>
010:</body>
011:</html>

ズームアップのスタイルを変更する

<script type="text/javascript" src="<mt:blogURL />highslide/highslide.js"></script>

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

P.623

●ボーダー（角）・ドロップシャドウ

「スタイルシート」インデックステンプレート

.highslide:hover img {
    border: 2px solid white;
}
.highslide-image {
    border: 10px solid white;
}
.highslide-caption {
    display: none;
    border: 5px solid white;
    border-top: none;
    padding: 5px;
    background-color: white;
}

●ボーダー（角丸）・ドロップシャドウ

「ヘッダー」テンプレートモジュール（サンプルテンプレート）
「HTMLヘッダー」テンプレートモジュール（デフォルトテンプレート）

<script type="text/javascript">
    hs.outlineType = 'rounded-white';
</script>

「スタイルシート」インデックステンプレート

.highslide:hover img {
    border: 2px solid white;
}
.highslide-image {
    border: 2px solid white;
}
.highslide-caption {
    display: none;
    border: 2px solid white;
    border-top: none;
    font-family: Verdana, Helvetica;
    font-size: 10pt;
    padding: 5px;
    background-color: white;
}

P.624

●ボーダー（ダーク系）・ドロップシャドウ

「ヘッダー」テンプレートモジュール（サンプルテンプレート）
「HTMLヘッダー」テンプレートモジュール（デフォルトテンプレート）

<script type="text/javascript">
    hs.outlineType = 'outer-glow';
</script>

「スタイルシート」インデックステンプレート

.highslide:hover img {
    border: 2px solid white;
}
.highslide-image {
    border: 5px solid #444;
}
.highslide-caption {
    display: none;
    font-family: Verdana, Helvetica;
    font-size: 10pt;
    border: 5px solid #444;
    border-top: none;
    padding: 5px;
    background-color: gray;
}

●アウトラインなし

「ヘッダー」テンプレートモジュール（サンプルテンプレート）
「HTMLヘッダー」テンプレートモジュール（デフォルトテンプレート）

<script type="text/javascript">
    hs.outlineType = null;
</script>

「スタイルシート」インデックステンプレート

.highslide:hover img {
    border: 2px solid white;
}
.highslide-image {
    border: 2px solid white;
}
.highslide-caption {
    display: none;
    border: 2px solid white;
    border-top: none;
    font-family: Verdana, Helvetica;
    font-size: 10pt;
    padding: 5px;
    background-color: white;
}

P.625

キャプション（画像のタイトル）を表示する

<span class="highslide-caption">これはキャプションです</span>

「スタイルシート」インデックステンプレート

...前略...
.highslide-caption {
    display: none;
...中略...
}
...後略...