WordPressにGoogle Maps API V3！

Auto Hislideプラグインもいいけどあまり自由が利かないので・・・・。
プラグインじゃないですが・・・・見つからなかったので
凝りたければ、本家サイトからHislide.js本体とグラフィックをダウンロードしてカスタマイズ。

◆設定が必要なファイルは次のとおり

上記ダウンロードしたファイルから、次のファイルとグラフィックフォルダを保存したURLを指定。

js×2、css×1。

URLとグラフィックのタイプを選定。サンプルは、本家のexampleページを参照下さい。

<link rel=”stylesheet” type=”text/css” href=”http://waox.main.jp/news/webapi/highslide/highslide.css” />

<script type=”text/javascript” src=”http://waox.main.jp/news/webapi/highslide/highslide-with-html.js“></script>

<script type=”text/javascript”>

hs.graphicsDir = ‘http://waox.main.jp/news/webapi/highslide/graphics/‘;

hs.outlineType = ’rounded-white';

hs.wrapperClassName = ‘draggable-header';

</script>

◆上記3つのファイルをheaderに記述する。

wordpress　ヘッダー（header）phpへの記述は、次のプラグインを利用してみては。

• ZD　heade tags
• add css js

◆サンプル：ちょいと動作が鈍いが、こういう使い方になる。開く窓の大きさは、下記参照。

• HTMLに次のように記述すると、

<a class=”highslide” style=”margin-top: 10px; margin-left: 10px; margin-right: 10px; margin-bottom: 25px;” onclick=”return hs.htmlExpand(this, { objectType: ‘iframe’, objectHeight: 600} )” href=”http://highslide.com/”>ココがHighslideへのリンク</a>

• こんなリンクになる。

ココがHighslideへのリンク

◆画像・写真の拡大ポップアップHighslide.JSのiframe(インラインフレーム)の初期表示の大きさの設定

• 横幅：HTMLの記述で初期に開く横幅の大きさを変えられなかったので、しかたなく　cssファイルで設定。90％。

/*****************************************************************************/

/* Styles for the HTML popups     */

/* Remove these if you are not using Highslide HTML     */

/*****************************************************************************/

.highslide-maincontent {

display: none;

}

.highslide-html {

background-color: white;

}

.highslide-html-content {

display: none;

width: 90%;

padding: 0 5px 5px 5px;

}

• 高さ：こちらは、HTML側に記述

<a href=”http://highslide.com/” onclick=”return hs.htmlExpand(this, { objectType: ‘iframe’, objectHeight: 600} )” class=”highslide” style=”margin-top : 10px;margin-left : 10px;margin-right : 10px;margin-bottom : 25px;”>ココがHighslideへのリンク</a>

スポンサードリンク