頭脳外部メモリー　「独学で趣味を満喫」　SINCE 2008/3

Linux　自宅サーバー　PICマイコン　PICC-LITE　Windows　車　関係の色々な趣味の記録を脳内では覚えられないので此処に保存！！　・・・って言うか、すでに忘れてしまって書けないかも・・・特に作った時に起きた問題点を書いておきたいのだが・・・　σ(^◇^;)ヒヤアセ

Home » java script » 「Highslide JS」「jun」の設定 & 使い方

2008

6/6

「Highslide JS」「jun」の設定 & 使い方

Last modified: 2008年6月6日（金）　 pm 12時29分
Posted by jun Published in java script

▼

このブログで「Highslide JS の設置説明」ページが一番人気のため、調子にのって自分の「設定 & 使い方」の記事を書いてみた。　（＾∀＾）

これをそのまま説明通りに設定（コピペ）すれば非常に簡単に設置ができ、「jun」と同じ使い方ができる・・・・・・・・と思う。　ﾍ(__ﾍ)☆＼(^^;)オイオイ　・・・すべて理解するのはちょっと難しいので使えれば良いと言う人におすすめ！
※この設定説明で使用できるものは、下記になります。

画像表示
- コントロールバー表示（画像内）
- コントロールバー表示（キャプション内）
web表示
inline表示

※オリジナルで頑張りたい方は、「Highslide JS の設置説明」と「Highslide JS のカスタマイズ」のページをご覧ください。

下準備

※ファイルの置き場を下記の状態で説明します。　（もちろん同じじゃなくても、以降の説明のアドレスをすべて置き換えてくれれば問題ないです。）

example.com
- wp-content　「フォルダ」
  - js　「フォルダ」
    - highslide　「フォルダ」
    - highslide-with-html.js　「ファイル」
    - highslide.css　「ファイル」
      - graphics　「フォルダ」
      - 各種画像ファイル　「ファイル」

これから下準備として、上記の青文字部分のファイルを入手します。　（＾∀＾）

下準備　其の一　　「highslide-with-html.js」の入手

こちらの「Highslide JS のカスタマイズページ」のオプションも使用できるように、「コンフィギュレータページ」で「highslide-with-html.js」を作成します。

右の画像と同じになるようにチェックして「Update」をクリック、表示されたら「Download highslide.js」をクリックし、下段にある「Highslide Download」の「Yes」をクリックしてダウンロードします。　「highslide-with-html.js」という名前で保存（又はリネーム）してください。　※商業的に使用する場合は「有料」になります。

・・・面倒だ！！と言う方は、「Highslide JS」からダウンロードし解凍したものの中に入っている「highslide-full.packed.js」をご使用ください・・・※サイズがちょっと大きいです。　この場合、下記の説明文の「highslide-with-html.js」を「highslide-full.packed.js」に置き換えてください。

または、「オプション」は必要ない！！という方は「Highslide JS」からダウンロードし解凍したものの中に入っている「highslide-with-html.js」をご使用ください。・・・※この場合、同じ名前ですがオプションは何個か使えません。

または、「inline表示」 & 「web表示」 & 「オプション」は必要ない！！という方は「Highslide JS」からダウンロードし解凍したものの中に入っている「highslide.js」をご使用ください。・・・※この場合、下記の説明文の「highslide-with-html.js」を「highslidel.js」に置き換えてください。

または、「jun」が使用している、「highslide-with-html.js」を使用する・・・ﾍ(__ﾍ)☆＼(^^;)オイオイ

下準備　其の弐　　「highslide.css」の入手

下記をコピーして「highslide.css」で保存してください。
※「jun」が使っているファイルですが・・・不要部分は削除したと思うのですが、もし不具合があったら言ってください。
σ(^◇^;)ヒヤアセ

.highslide {
     cursor: url(http://example.com/wp-content/js/highslide/graphics/zoomin.cur), pointer;
     outline: none;
}
.highslide img {
     border: 2px solid gray;
}
.highslide:hover img {
     border: 2px solid white;
}
.highslide-image {
     border: 10px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
     display: none;
     border: 2px solid white;
     border-top: none;
     padding: 15px;
     background-color: white;
     text-align:center;
     font-size: 10pt;
}
.highslide-loading {
     display: block;
     color: white;
     font-size: 10px;
     font-weight: bold;
     text-transform: uppercase;
     text-decoration: none;
     padding: 3px;
     opacity: 0.60; /* w3c */
     filter: alpha(opacity=60); /* ie */
     border-top: 1px solid white;
     border-bottom: 1px solid white;
     background-color: black;
     padding-left: 22px;
     background-image: url(http://example.com/wp-content/js/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;
}
.highslide-active-anchor img {
     visibility: hidden;
}
.highslide-move {
     cursor: move;
}
.highslide-overlay {
     display: none;
}
a.highslide-full-expand {
     background: url(http://example.com/wp-content/js/highslide/graphics/fullexpand.gif) no-repeat;
     display: block;
     margin: 0 10px 10px 0;
     width: 34px;
     height: 34px;
}
/* Controlbar */
.controlbar {
     background: url(http://example.com/wp-content/js/highslide/graphics/controlbar4.gif);
     width: 167px;
     height: 34px;
}
.controlbar a {
     display: block;
     float: left;
     height: 27px;
     text-decoration: none;
}
.controlbar a:hover {
     background-image: url(http://example.com/wp-content/js/highslide/graphics/controlbar4-hover.gif);
     background-repeat: no-repeat;
     text-decoration: none;
}
.controlbar .previous {
     width: 50px;
}
.controlbar .next {
     width: 40px;
     background-position: -50px 0;
}
.controlbar .highslide-move {
     width: 40px;
     background-position: -90px 0;
}
.controlbar .close {
     width: 36px;
     background-position: -130px 0;
}
.control {
     float: right;
     display: block;
     position: relative;
     margin: 0 5px;
     font-size: 9pt;
     font-weight: bold;
     text-decoration: none;
     text-transform: uppercase;
     margin-top: 1px;
     margin-bottom: 1px;
}
.control:hover {
     border-top: 1px solid #333;
     border-bottom: 1px solid #333;
     margin-top: 0;
     margin-bottom: 0;
}
.control, .control * {
     color: #666;
}
/* inline */
.highslide-html {
     background-color: white;
}
.highslide-html-blur {
}
.highslide-html-content {
     position: absolute;
     display: none;
}
.highslide-body a:link, .highslide-body a:visited {
     font-weight: bold;
     text-decoration: none;
}
.highslide-body a:hover, .highslide-body a:active {
     font-weight: bold;
     text-decoration:  underline;
}
/* Styles for the popup */
.highslide-wrapper {
     background-color: white;
}
.highslide-wrapper .highslide-html-content {
     width: 400px;
     padding: 5px;
}
.highslide-wrapper .highslide-header div {
}
.highslide-wrapper .highslide-header ul {
     margin: 0;
     padding: 0;
     text-align: right;
}
.highslide-wrapper .highslide-header ul li {
     display: inline;
     padding-left: 1em;
}
.highslide-wrapper .highslide-header ul li.highslide-previous, .highslide-wrapper .highslide-header ul li.highslide-next {
     display: none;
}
.highslide-wrapper .highslide-header a {
     font-weight: bold;
     color: gray;
     text-transform: uppercase;
     text-decoration: none;
}
.highslide-wrapper .highslide-header a:hover {
     color: black;
}
.highslide-wrapper .highslide-header .highslide-move a {
     cursor: move;
}
.highslide-wrapper .highslide-footer {
     height: 11px;
}
.highslide-wrapper .highslide-footer .highslide-resize {
     float: right;
     height: 11px;
     width: 11px;
     background: url(http://example.com/wp-content/js/highslide/graphics/resize.gif);
}
.highslide-wrapper .highslide-body {
}
.highslide-move {
     cursor: move;
}
.highslide-resize {
     cursor: nw-resize;
}
/* Opacity */
.highslide-dimming {
     position: absolute;
     background: black;
}
/* Necessary for functionality */
.highslide-display-block {
     display: block;
}
.highslide-display-none {
     display: none;
}

※細かな指定は、ご自分の環境に合わせて行ってください。　ペコリ(o_ _)ｏ))
※6ヶ所ある画像アドレスは各自必ず指定してください。

下準備　其の参　　「各種画像ファイル」の入手

「Highslide JS」からダウンロードして、解凍したフォルダの中にある「graphics」フォルダを使用します。

・・・これで下準備は終了です。　(￣▽￣)ゞ

設定方法

<head>～</head>部分の記述

※3ヶ所あるアドレスは各自必ず指定してください。

各自のテーマの「footer.php」の</body>より上の部分に下記を記述
（これは、コントロールバー（画像内）を簡単に使用するための記述です。）

使用方法

※記述例は、すべてテキストリンクですが画像リンクも、もちろん使えます。・・・下記の水色文字を<img>タグに変更してください。
※「title="～"」などは、紛らわしくなるので省かせていただきました。　・・・もちろん使えます。
※黄色文字は、各自アドレスを指定してください。
※緑色文字は各自お好きなようにしてください。
※白色文字 & 赤色文字は変更不可です。

「画像表示」

コントロールバー表示（画像内）

<a id="thumb" class="highslide" onclick="return hs.expand(this)" href="リンク先画像のアドレス">コントロールバー表示（画像内）</a>

※赤色文字（id）を付けることにより「画像内コントロールバー」が表示されるようになっています。　（※ id名、変更不可・・・どうしても変えたい場合は、設定部分も変更が必要です。）

コントロールバー表示（キャプション内）

Previous
left arrow key Next
right arrow key Close Move

ここに、キャプションを入れることも可能です。　w(￣o￣)w オオー!

<a class="highslide" onclick="return hs.expand(this)" href="リンク先画像のアドレス">コントロールバー表示（キャプション内）</a>
<div class="highslide-caption">
<a style="float: left; display: block;" class="control" onclick="return hs.previous(this)" title="戻る" href="#"> Previous <br />
<small style="font-weight: normal; text-transform: none;">left arrow key</small></a>
<a style="float: left; display: block; text-align: right; margin-left: 50px;" class="control" onclick="return hs.next(this)" title="次へ" href="#"> Next <br />
<small style="font-weight: normal; text-transform: none;">right arrow key</small> </a>
<a class="control" onclick="return hs.close(this)" title="閉じる" href="#">Close</a>
<a class="highslide-move control" onclick="return false" title="ドラッグで移動" href="#">Move</a><br />
<div style="clear:both">ここに、キャプションを入れることも可能です。　w(￣o￣)w オオー!</div></div>
<div style="clear: both;"> </div>

※キャプションが必要ない場合は、灰色背景部分の記述はいりません。

「inline表示」

Move
Close

ここが本文記入場所になります。

ここが本文記入場所になります。

ここが本文記入場所になります。

ここが本文記入場所になります。

<a href="#" class="highslide" onclick="return hs.htmlExpand(this, { contentId: 'id名' } )">「inline表示」</a><br />
<br />
<div style="width: 200px; height: 200px;" id="id名" class="highslide-html-content">
<div class="highslide-header">
<ul>
<li class="highslide-move"><a title="ドラッグで移動" href="#" onclick="return false">Move</a></li>
<li class="highslide-close"><a title="閉じる" href="#" onclick="return hs.close(this)">Close</a></li>
</ul>
</div>
<div class="highslide-body"><br />
<br />
ここが本文記入場所になります。<br />
<br />
ここが本文記入場所になります。<br />
<br />
ここが本文記入場所になります。<br />
<br />
ここが本文記入場所になります。<br />
<br /></div>
<div class="highslide-footer">
<div><span title="リサイズ" class="highslide-resize"> </span></div>
</div>
</div>
<div style="clear: both;"> </div>

※2ヶ所の桃色文字の名称は同じにしてください。
※橙色文字で表示されるサイズを指定できます。

「web表示」

<a href="リンク先アドレス" onclick="return hs.htmlExpand(this, { objectType: 'iframe' } )">「web表示」</a>

オプション　使用方法

「jun」が良く使う「オプション」をいくつか記述しておきます。　・・・自分の場合、すべて個別指定で使用しています。
上記の例すべて指定方法は同じです。　下記を例に説明します。

<a class="highslide" onclick="return hs.expand(this)" href="リンク先画像のアドレス">テキストリンク</a>

上記の赤文字部分の「this」の後に「{ }」を付けて、その中に指定したいオプションを「 , 」で区切って追加していくだけです。

背景を黒く透過したい場合
- dimmingOpacity: '0.60'
- dimmingDuration: '0'
表示位置を中央にしたい場合
- align: 'center'
表示方法をフェードイン・フェードアウトさせたい場合
- transitions: ['fade']

記述例としては

<a class="highslide" onclick="return hs.expand(this, { align: 'center' })" href="リンク先画像のアドレス">テキストリンク</a>

1個だけの指定の場合は、こんな感じ・・・

<a class="highslide" onclick="return hs.expand(this, { dimmingOpacity: '0.60', dimmingDuration: '0', align: 'center', transitions: ['fade'] })" href="リンク先画像のアドレス">テキストリンク</a>

複数指定の場合は、こんな感じ・・・
※最後のオプション記述の後に「 , 」はいりません。

そうそう、ちなみに「web表示」のサイズの指定方法は・・・

こんな感じで指定します。
・・・「inline表示」 & 「web表示」の場合は、見た人が閉じるとき面倒なので、背景を黒く透過することをおすすめします。　（背景をクリックすると閉じれるようになります。　（＾∀＾）　・・・ただし、副作用として同時表示はできなくなりますが・・・(T^T)　）

その他の使い方は、「Highslide JS のカスタマイズ」のページを参考にしてください。　（こちらのページは、個別指定は載っていませんが・・・判ると思います。　σ(^◇^;)ヒヤアセ）

以上、終了です。

・・・おかしい・・・おかしすぎる！！　・・・簡単にコピペで、あっさり作る記事のはずが　・・・なんでこんなに時間がかかってしまったのだろうか？？　全然コピペじゃないし！！　・・・・・・・・・・・「パトラッシュ・・・僕、もう疲れたよ・・・・」

人気度 : 61 %

(2 投票, 平均値/最大値: 5 / 5)

Previous Top

関係のある記事

「ブルブル４」設置説明 javascript (5月 29th, 2008)
「ModalBox」　設置説明　javascript (5月 28th, 2008)
「CoolTips」　設置説明　javascript (5月 27th, 2008)
「loupe.js」　設置説明　javascript (5月 26th, 2008)
「slided.js」　設置説明　javascript (5月 24th, 2008)

No user の書き込みがあります

Subscribe to this post コメント RSS or トラックバック URL

コメントほしぃ～よぉ～　σ(^◇^;)

現在の訪問者数

サーチ

注意書き

当ブログの内容は管理人の覚え書がメインです。書き間違い勘違いもあるでしょう。なので、一切の責任を持ちません。各自の責任で行ってください。答えられることは、お答えします。
ペコリ(o_ _)ｏ))

「Highslide JS」「jun」の設定 & 使い方