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への記述は、次のプラグインを利用してみては。
◆サンプル:ちょいと動作が鈍いが、こういう使い方になる。開く窓の大きさは、下記参照。
- 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.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>
関連記事一覧
スポンサードリンク
Leave a Comment