スポンサードリンク

Highslide でリンク先サイトのHTMLをIframeで表示させてみる。

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へのリンク

◆画像・写真の拡大ポップアップ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>

スポンサードリンク

Related Posts

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">