8bitodyssey.com

[WordPress Plugins] HighSlide JSをWordPressに。WPJ-Highslideプラグイン v0.1.0

Highslide JS

This caption can be styled using CSS.

はじめて作ったプラグインなのでうまく動作するかあまり自信がありませんが、lomoさんのところでHighslide JSを知り、誰も作らないようだったので調子にのって作って公開してしまいました。皆さんでテストしてみてください！画像をかっこよくオーバーレイ表示して見せる、いや魅せるステキなJavaScript、Highslide JSをWordPressに組み込むプラグインです。

Downloadはコチラから。162KB
最新バージョンをご利用ください。

使い方(Zipの中のReadme_first_japaneseをご利用ください。)

1. wpj-highslide.phpをエディタで開き、15行目を修正してください。
// 以下の行をWordPressをインストールした環境に合わせて修正してください。
$highslide_path = get_settings('home')."/wordpress/wp-content/plugins/wpj-highslide/";
wordpressという名前のディレクトリにインストールしている場合、修正の必要はありません。

2. 次に画像をオーバーレイ表示するデザインを選びます。
16行目以下 説明、3行のスクリプトという順でデザインを決める部分が並んでいます。
日本語を参考に好きなデザインを選んで、コメントアウト(//を消す）してください。

3. WordPressのプラグインフォルダにwpj-highslideフォルダをアップロードします。

4. WordPress管理画面でwpj-highslideプラグインを有効にします。

5. ご使用中のテンプレートファイルheader.phpのタグの直下に
<div id="highslide-container"></div>
を加えます。
位置はJavaScriptで自動制御されるので、まったく直下においてしまって問題ありません（たぶん）。

6. オーバーレイしたい画像を以下の書式で書きます。hrefの中は自由に。
<a>タグ内のhrefは大きい画像を、<img>タグ内のhrefはサムネイル画像を指定します。
<a href="images/full-image.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="images/thumbnail.jpg" alt="Highslide JS" id="thumb1"
title="Click to enlarge" height="120" width="107" />

7. （オプション）画像に注釈をつけたい場合は、上記6の下に以下のような書式で注釈を書きます。
<div class='highslide-caption' id='caption-for-thumb1'>
This caption can be styled using CSS.
</div>

利用にあたって

Highslide JSはクリエイティブコモンズ非営利2.5の元で提供されています。よってWPJ-Highslideもこれに従います。
http://creativecommons.org/licenses/by-nc/2.5/

◆http://vikjavev.no/highslide/のクレジット表示を外してはいけません。
◆営利目的での利用はできません。
◇http://8bitodyssey.com/へもリンクしてくれたらうれしいな。
Special Thanx: lomoさん（紹介してくださらなければ作りませんでしたｗ）、Naoさん（WordPress標準ガイドブックのPlugin作成ページを参考にしました！）、Atsushiさん、Kohakuさん（応援ありがとうございますｗ）。

for English User

You can find usage of this plugin in wpj-highslide.zip. Readme_first_english there! Enjoy it!
Here’s the Latest Version.

おでっせい

,

“[WordPress Plugins] HighSlide JSをWordPressに。WPJ-Highslideプラグイン v0.1.0” への23件のフィードバック

  1. こんにちは～、これ自作ですか？(ﾉﾟωﾟ)ﾉ
    エンジニアに負けず劣らずってことができてしまうのですね、びっくり。。。
    Firefox1.5 や、Opera8.5 for Win でもしっかり動いてましたよ！

    返信

  2. >Atsushiさん
    コメントありがとうございます。
    自作したのはScriptを手軽にWordPressに組み込めるようにPHPをちょこっと書いた部分だけですけどね＾＾;
    使う人がどれくらいいるかは分かりませんが、公開できるように今いじくってます。

    返信

  3. こんにちは。
    すごいっすね。
    lomoさんとこで紹介されて誰かが作るだろうと期待していたのですが、さっそくとは。
    期待してます。

    返信

  4. >kohakuさん
    土日様子を見ていたんですが、Googleでもdel.icio.usでも誰も作る気配がなかったので作ってみましたｗ
    不具合起こさないか心配だなー…。
    phpファイルにも日本語含ませてるけど、shift-jisで問題ないのでしょうか(汗)
    utf-8にするとログイン・ログアウト時に不具合が出るんですよね…
    こういうとき強い味方が(゜∀゜ )三 三( ゜∀゜)？

    返信

  5. イヤー、すごいー。
    今日ちょうどLightboxまわりのスクリプトやら似た効果のプラグインやらを探索してたのですよ。
    いま人さまのサイト（WPだけど！）にかかりっきりなので自分とこが弄れずちょい欲求不満気味・・・。リニュ案が固まりつつあるんだけどなぁああ。
    そのあかつきにはこのスクリプト弄らせてもらいますー。Falbum上でできたら最高なんだけど・・・。（むりだよね・・・）

    返信

  6. ども。
    公開有難うございます。

    さっそく導入してみました。
    みごと動作しております。ホント素晴らしいです。

    今後の改良で、出来るだけ楽に導入できるようになると、さらに幸せになるかもしれません。
    期待してます！

    返信

  7. >Zazieさん
    Falbumですか～～い。ううーん、何しろ今日はじめてプラグイン書いた人ですから(汗)
    でもちょっと研究してみようかな。からくりはなんとなく分かってきたんですよねぇ。

    リニューアル期待してますよ～。

    >kohakuさん
    おお、無事動いてよかったです。

    そうなんですよねー。テンプレートに自分で手を加えるのってけっこう面倒ですし。
    今後の研究次第では…もしかしたら…、ヒント～(｀Д´≡｀Д´)??

    返信

  9. おひさしぶり～。すごい！プラグイン公開でござるか。
    いい感じですねぇ。さっそく落とさせていただきます～。

    返信

  10. ＞でぃおさん
    使ってみてくださいな～。そいでもって改善できそうなところを教えて～。
    ついでにコードも書いて（ぉ

    返信

  13. 数時間前はどうも。（ｗ

    リッチエディタで使いたい場合は、どのようにしたらよいのでしょうか？
    御教授おねがいします。

    返信

  14. >kohakuさん

    こんばんはｗ

    ビジュアルリッチエディタの場合は、エディタに[HTML]アイコンを押して、
    HTMLソース編集画面に上記解説の6、7あたりのコードを書いて
    アップデートしてみてください。
    私の場合はこの方法できちんと表示されました。

    エディタに直接書いてしまうと変換されてしまって、
    うまく表示できないようです。

    返信

  15. WPJ-Highslide 0.2…

    WPJ-Highslide 0.2を入れてみました。おでさんのこの記事を見た時からずっと試したいと思っていたのですが、何故かうまく動きませんでした。で、先日バージョンU (more…)

    返信

  16. Highslide LS の導入…

    フレのJ2さんのブログでカックイイ画像表示が使われてました。　Highslide JS　というJavaScriptです。
    本家からダウンロードしたスクリプトをいろいろ見てたのですが、それなりに面倒な初…

    返信

  17. はじめまして！
    ありがたく使わせて頂いています。

    ちょっと気になる頃があるんですけど、サムネイルの枠を
    非表示（もしくは白）にするにはどうすればよいでしょうか？
    マウスが乗ったときは消えるのですが、乗ってないときは
    灰色の枠が表示されてしまうので困っています。
    ヨロシクおねがいします。

    返信

  18. ＞てんてんさん

    プラグインのフォルダの中にhighslide-***.cssというのがいくつか入っていると思いますが、お使いのcssファイルを開くと5行目あたりに

    .highslide img {
    border: 2px solid gray;
    }

    というところがあります。

    ここが、通常時（マウスアウト時）の画像の枠を定義していますので、これを

    .highslide img {
    border: 2px solid white;
    }

    と変えてみてください。この場合は白に、

    .highslide img {
    border: 2px;
    }

    とすれば色を指定せず枠線の幅だけ2pxになります。
    このあたりを色々いじれば自分だけのデザインができますので、試してみてください！

    返信

  19. おでさんご丁寧にどうもありがとうございました！
    感謝です。
    これからもありがたく使わせて頂きます。

    返信

  20. […] ほかに画像表示のエフェクトがないかと探していたところ、おで氏作成の「wpj-highslide」を発見。 タグ付きの書式で書けば、highslideが適用されるとのこと…。 […]

    返信

  21. こんばんは。
    質問させてください。
    WPJ-Highslide を使用させて頂いています。
    Flexible upload と合わせて使用しています。

    この道わが旅英国探訪の記事を見させてもらったのですが
    画像の alt=”***” の内容が、Highslide の注釈に表示されているように見えるのですが
    これは、どのようにして実現しているのでしょうか？

    http://8bitodyssey.com/archives/715
    の記事だと注釈を表示するには以下の書式が必要ですよね？

    This caption can be styled using CSS.

    Flexible upload から画像を追加して、そのaltの内容が
    注釈に入ってくれると大変嬉しいです。

    お手数ですが、カスタマイズの仕方を教えてください。
    よろしくお願いします。

    返信

  22. ＞アイスクリームさん
    ご利用ありがとうございます。

    僕自身の話をすると、Windows Live Writerを使って投稿しているので、highslide用のコードをHTMLコードにそのまま挿入していますので、特段カスタマイズはしていないんです。

    This caption can be styled using CSS.

    これは説明が分かりにくくてごめんなさい！
    単純にこの文章の位置に書いた文字列がキャプションになって、CSSでスタイル付けされますよ、という例として書いています。

    Flexible Uploadとの連携をどのようにカスタマイズされているか分かりませんが、この文字列のところに、たとえばFUP_IMAGE_ALT_OPTIONで取得する内容（ALTに入るもの）を入れてやれば、Highslideの注釈でも同じものが入ると思います。

    返信

  23. お返事ありがとうございます。
    返信が遅くなってすいません。

    highslideはキャプションを入れる場合 caption-for-*** とid=”***”が
    一致していなければ、キャプションは表示されないですよね。

    力量が足りず、Flexible uploadのカスタマイズは無理でした。
    キャプションは手作業で入れていくことにします。

    上のThis caption can be styled using CSS.はコードタグを入れてなかったので

    This caption can be styled using CSS.


    と表示されなかったみたいです。変な書き方をしてすいませんでした。

    返信

フォームは コメントしてほしそうに こちらを見ている……！

This site uses Akismet to reduce spam. Learn how your comment data is processed.