[wp] GoogleMaps を記事本文内に埋め込むショートコードの作成(応用)

基本編で適当に作ったショートコードを改変してマーカーを増やす。

Gmap shortcode

ショートコード間に書いたHTMLとかがそのまま出力されるのは同じで、

  • マーカーを増やす
  • タブ表示
  • 最大化表示
  • style属性でheightの設定
  • showMapBlowup()

以上を追加。

1記事1MAPで複数表示は(使う用事がなかったので)未対応。

“[wp] GoogleMaps を記事本文内に埋め込むショートコードの作成(応用)” の続きを読む

[MooTools] 診断テスト作成スクリプト Diagnosizm

質問に対し、YESまたはNOで答える1問2答形式の簡易診断テストを自動生成するスクリプト。
問題と診断結果はJSONファイルに保存するのでCGI使えない鯖でも設置できます。

diagnosizm

HTML

質問・結果を表示する要素とボタンが必要。
要素内の中身は実行時に全て削除されるので、NOSCRIPT環境への警告など入れると良いでしょう。

<div id="diagnosizm">JavaScriptを有効にして御覧下さい</div>
<p class="button"><button id="check">診断</button></p>

inputタグのボタンはつかえません。

“[MooTools] 診断テスト作成スクリプト Diagnosizm” の続きを読む

[GoogleMaps] グーグルマップとストリートビューを双方向連動表示させる

久しぶりにGoogleマップ弄ったらいろいろと変わっていたので遊びついでに作ってみた。
Ajaxローダーを利用して導入しやすく作ってみたので是非お試しあれ!

このスクリプトは、Googleマップとストリートビューを同時に表示した上で、移動した時の表示を連動させるものです。

  • GooleMapsで中央に表示している地点がストリートビューに対応している場合、ストリートビューを表示
  • Googleマップでマーカーを移動したらストリートビューも移動させる
  • ストリートビューで移動したらマップのポイント(中心)も移動させる
  • ストリートビューで表示している場所の住所表示
  • ストリートビューに未対応の場合エラーを表示する
  • 3Dコントローラーの利用

GoogleMapsとStreetViewの双方向連動表示

DEMOはこちら

使用上の注意

  • 光のような高速回線環境でないと表示がもたつきます
  • ローカル環境(サーバーではない)ではクリック移動時のストリートビューが機能しません
  • ストリートビューを表示する要素は、直接縦横のサイズを指定しないと横幅が100%になります
  • MITライセンスです

“[GoogleMaps] グーグルマップとストリートビューを双方向連動表示させる” の続きを読む

[MooTools] mooZoomGallery Plugin

mooZoomGalleryはサムネイル画像から拡大画像への表示を、画像が並んでいるエリア内で行うMooTools用ギャラリープラグインです。
LightBoxのようにレイヤーを被せて表示するのではなく、他のサムネイルを非表示にする事で画像を表示する場所を確保します。
……なんかこの動きどこかで見たような気がしなくもないですが、
このプラグインは全て同じサイズのサムネイル画像を並べたレイアウトに特化しています。

View DEMO
View Demo

“[MooTools] mooZoomGallery Plugin” の続きを読む