こちらの「plugins」のページにも記載していますが、現在「WP-Highslide」を使用しているのですが、やはり「IE
」で表示されないのは悔しい？・・・そこで、本家バージョンの「Highslide」は、どうなのだろうか？ と、思い設置してみました・・・結果、問題なく表示できました。 （＾∀＾）
この、スクリプトの他とは違う特徴としては、同じ画面上に「複数表示が可能」なこと、そして「ドラッグで移動が可能」というところでしょう！ (*ﾟ oﾟ*) オオー！
※以下の設定は、実際に試して自分の環境では問題なく動作したことを確認して記述しております・・・が！！ しかし、あくまで英語の不得意な自分が、「Highslide JS」のページ＆ソースやサンプル＆ソースを参考に作成したものです。
・・・と言うことで一応、下記設定で狙い通りに動作している事は確認済みですが、実際の使い方と間違っている場合があるかもしれません・・・それをご了承してから、ご覧ください。 相変わらず責任は持ちませんと言うことで・・・σ(^◇^;)ヒヤアセ そして、間違っているところがありましたら教えていただけると嬉しいです。 ペコリ(o_ _)ｏ))
・・・と言うことで一応、下記設定で狙い通りに動作している事は確認済みですが、実際の使い方と間違っている場合があるかもしれません・・・それをご了承してから、ご覧ください。 相変わらず責任は持ちませんと言うことで・・・σ(^◇^;)ヒヤアセ そして、間違っているところがありましたら教えていただけると嬉しいです。 ペコリ(o_ _)ｏ))
設定方法
※こちらは基本的な画像を表示する場合の説明になります・・・（初めての設置の場合は、こちらから試した方が良いと思います・・・(＞▽＜;; アセアセ ） ・・・画像以外の「設定＆使い方」はこちらにあります・・・（＾∀＾）こちらからダウンロード
※商業的に使用する場合は「有料」になります。
解凍後にできたフォルダ内にある「highslide」 フォルダのみを、ご自分のスクリプト置き場に転送してください。（ここでは /wp-content/js/highslide/ に置いたものとして説明します。）
その他のファイルは、サンプル表示用です。
次に「JavaScript」 を、外部リンクとして読み込ませるために<head>?</head>の間に書き込みます。 自分の場合は、テーマエディタでヘッダーの問題無さそうな部分に書き込みました。
<script type="text/javascript" src="http://example.com/wp-content/js/highslide/highslide.js"></script>
<script type="text/javascript">
hs.graphicsDir = 'http://example.com/wp-content/js/highslide/graphics/';
hs.outlineType = 'rounded-white';
</script>
黄色の部分にファイルの設置場所（アドレス）を指定<script type="text/javascript">
hs.graphicsDir = 'http://example.com/wp-content/js/highslide/graphics/';
hs.outlineType = 'rounded-white';
</script>
※ 画像フォルダのアドレス指定箇所は忘れずに記述してください！！ 忘れると、ずっと読み込み表示のままになってしまいます。
上記の赤文字の部分は、背景色が濃い色を使用している場合は下記に変更してみるのも良いかもしれません。
hs.outlineType = 'outer-glow';
外枠が光っているような感じになります・・・素敵ですが、白い背景色だと、見えません。 (TOT)使用方法
記事本文中の基本的な記述方法は下記になります。<a class="highslide" onclick="return hs.expand(this)" href="リンク先画像のアドレス" title="画像のタイトル"><img src="サムネイル画像のアドレス" /></a>
<div class="highslide-caption">ここに、キャプション（タイトル）や説明文を記述。<br /><br />必要なければこの青の背景色部分はいりません。</div>
黄文字はそれぞれあったものを指定してください。<div class="highslide-caption">ここに、キャプション（タイトル）や説明文を記述。<br /><br />必要なければこの青の背景色部分はいりません。</div>
赤文字の「クラス属性」と、緑文字の「onclick属性」が重要です。
他にも指定方法はあるみたいです。詳しくは本家サイトの「Documentation」や「hs.expand」をご覧ください。
・・・ちなみに、キャプション内に
<a href="javascript:void(0)" onclick="hs.close(this)" class="control">Close</a>
を記述すると、閉じるリンクが表示されます。その他の「コントロールバー」表示設定などがあるのですが・・・自分は興味ないので省略！！
ﾍ(__ﾍ)☆＼(^^;)オイオイ
詳しくは本家サイト「Documentation」の「ADDING A CAPTION」＆「CUSTOM OVERLAYS」か、サンプル表示用のファイルのソースを参考にしてください。
追記・・・コントロールバーの説明はこちら
追記・・・「web 表示」 「Inline 表示」 の説明はこちら
css の設定
「css」 の設定によって表示形式（「ボーダーあり・なし・幅」 「角・角丸」 「キャプションのあり・なし」が変わりますので、これについては各自お好みで設定してください・・・・サンプル表示用ファイルの好みのもののソースを参考にすると良いと思います。※ スタイルシートの読み込ませ方ですが別ファイルとして保存・転送して上記の<head>?</head>の間で読み込ませる方法か、ご自分のテーマのスタイルシートに追記する方法などで良いと思います。
※ スタイルシートの画像アドレス指定場所は忘れずに記述してください！！ 忘れると、ずっと読み込み表示のままになってしまいます。
自分が「css」で、いじったところは、こちらで紹介した「影付き写真風」になるように、下記のようにしたところと
.highslide {
cursor: url(http://example.com/wp-content/js/highslide/graphics/zoomin.cur), pointer;
outline: none;
margin: 10px 7px -2px 15px;
background: url(影用画像のアドレス) right bottom;
float: left;
}
.highslide img {
margin: 0;
padding: 0;
position: relative;
left: -5px;
top: -5px;
padding: 8px;
background: #fff;
border: 1px solid !important;
border-color: #C0C0C0 #737373 #737373 #C0C0C0 !important;
}
.highslide:hover img {
border: 2px dotted !important;
border-color: #FF8000 !important;
}
cursor: url(http://example.com/wp-content/js/highslide/graphics/zoomin.cur), pointer;
outline: none;
margin: 10px 7px -2px 15px;
background: url(影用画像のアドレス) right bottom;
float: left;
}
.highslide img {
margin: 0;
padding: 0;
position: relative;
left: -5px;
top: -5px;
padding: 8px;
background: #fff;
border: 1px solid !important;
border-color: #C0C0C0 #737373 #737373 #C0C0C0 !important;
}
.highslide:hover img {
border: 2px dotted !important;
border-color: #FF8000 !important;
}
下記を追記して、クリックした後にサムネイル画像を消えるようにしたくらいです。
.highslide-active-anchor img {
visibility: hidden;
}
visibility: hidden;
}
サンプル
と、ここまでの画像を表示させるだけの設定なら、自分にもそんなに問題なくできたのですが、これ以上の「コントロールバー表示」 「インライン表示」 「WEB表示」 を使いこなそうとしたら素人の自分には大変でした・・・って言うか自分的には、画像表示だけでよかったのですが、説明ページと言っているのに・・・それだけでは・・・（＾∀＾2）、 と思い、がんばって徐々に追記して行こうと思います。
ペコリ(o_ _)ｏ)) ・・・こちらと、下にある 「コントロールバーを使用する場合」 の表示は、 多少カスタマイズされております・・・ 両方の背景が黒透にしてある部分（デフォルトでは無色透明）と、表示位置がセンターになるようにしてある部分（デフォルトではAUTO）と、 下記の方の「じわぁ～」って感じでフェードイン＆フェードアウトする部分（デフォルトでは上記と同じ）が変更されています。 ・・・最後に追記した、 「「web 表示」 「Inline 表示」 の設定方法」 は背景が黒透とセンター表示に設定されています。
ヽｄ´ι｀ｂノ Oh・・・ 自分もそうしたい！！ と、思ったら下記の カスタマイズページを参考にしてください！！ (o^v^o)えへ
その他の設定方法
追記・・・カスタマイズのページを作成しました。 （＾∀＾） ・・・こちらです。
以上終了です。
人気度 : 65 %
(3 投票, 平均値/最大値: 5 / 5)
関係のある記事
2 users の書き込みがあります
はじめまして参考になりますね！！
そうなんですよね ちょっとした間違いで
動作しませんね。
困っていました さっそく試してみます。
ありがとう
そうそうちなみに私が取り入れようと考えているのは
ajax_highslideですが……
上手く動作しないものですね。
それと管理人さんVertical Suckerfish HoverLightboxの
IE動作不良の情報等お持ちでないですか？
これもなかなのものでしてお手上げ状態です。
ご無理でなければご指導ください
では失礼します。
ありがとう
toshi さん コメントありがとうございます。
ajax_highslideは全く試したことがないので・・・わかりません (＞▽＜;; アセアセ
Suckerfish HoverLightbox については・・・初めて知り検索してみると・・・w(￣o￣)w オオー! なかなか素敵ですね・・・・IEについての動作不良についてはその検索で見かけたのはIE6で同じように表示させるには専用？の「JavaScript」と「css」を読み込ませなければダメというようなことを見かけましたが・・・・
・・・全く参考にならず申し訳ありません。 ペコリ(o_ _)ｏ))
Suckerfish HoverLightbox は素敵なので試した見たいと思いましたが・・・最近ちょっと忙しくてしばらく無理そうです・・・・
コメントほしぃ～よぉ～ σ(^◇^;)