スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Highslide JSで浮き出るインラインフレーム

 HighslideというJavaScriptライブラリを使って浮き出すインラインフレームを設置する方法です。サムネイルをクリックすると大きい画像が浮き出るって感じで使う人が多いみたいですが、これだと自分のサーバ内の画像しか使えない(知らないだけ!?)ので何かと不便、ということでインラインフレームが浮き出るようにしてみました。まずサンプルを。
⇒  highslide サンプル(クリックすると浮き出ます)
Powered by Highslide JS


Highslideはこちらでダウンロードしてください ⇒ Highslide JS

 【javascript】
<script type="text/javascript" src="highslide.js"></script>
<script type="text/javascript" src="highslide-html.js"></script>
<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
hs.outlineType = 'rounded-white';
hs.outlineWhileAnimating = true;
hs.objectLoadTime = 'after';
</script>
 ※ 赤字は各自アップしたアドレスを入力してください。
 【body】
<a href="表示したいサイトのアドレス" onclick="return hs.htmlExpand(this, { contentId: 'highslide-html', objectType: 'iframe', objectWidth: 700, objectHeight: 900} )" class="highslide">
Content in iframe
</a>
<div class="highslide-html-content" id="highslide-html" style="width: 700px">
<div class="highslide-move" style="border: 0; height: 18px; padding: 2px; cursor: default">
<a href="#" onclick="return hs.close(this)" class="control">Close</a>
</div>

<div class="highslide-body"></div>

<div style="text-align: center; border-top: 1px solid silver; padding: 5px 0">
<small>
Powered by <i>Highslide JS</i>
</small>
</div>
</div>

</div>
 【CSS】
<style type="text/css">
* {
font-family: Verdana, Helvetica;
font-size: 10pt;
}
.highslide-html {
background-color: white;
}
.highslide-html-content {
position: absolute;
display: none;
}
.highslide-loading {
display: block;
color: black;
font-size: 8pt;
font-family: sans-serif;
font-weight: bold;
text-decoration: none;
padding: 2px;
border: 1px solid black;
background-color: white;
/*padding-left: 22px;
background-image: url(highslide/graphics/loader.white.gif);
background-repeat: no-repeat;
background-position: 3px 1px;*/
}
.control {
float: right;
display: block;
/*position: relative;*/
margin: 0 5px;
font-size: 9pt;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
color: #999;
}
.control:hover {
color: black !important;
}
.highslide-move {
cursor: move;
}
.highslide-display-block {
display: block;
}
.highslide-display-none {
display: none;
}
</style>
 Highslide JSについては「Highslide JS-サムネール画像を拡大表示するスマートなjavascript」が参考になると思います。
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。