画像をクリックしたときに詳細情報を表示するのに スライドするパネルを用いました。 最初はアコーディオンメニューというのかと思ってぐぐってたのですが、 そのあとスライド、メニューとか、サイド、スライドとか。。。 意外と簡単、hide/showを$().animateで実現できるのですね！ 私だけの世界地図(3) 表示している情報は、取れたExif情報すべてです。 参照：jQuery でスライドしつつ隠れるサイドバー : dogmap.jp
Category: JavaScript
私だけの世界地図(2) ♥ 角丸
やっぱり角丸だよね♥ ヽ(*´∀｀*)ﾉ ということでマーカーの写真を角丸にしました。 私だけの世界地図(2) phpにimagickモジュールが入っていないので、 別途サーバにインストールされていたImageMagickに対して execで渡して加工することに。 元画像はこちら。 1. 最小辺を100pxになるようにリサイズ。 [code] // リサイズ //convert -resize n% goreme-s.jpg resize.jpg [/code] ↓こうなります。 2. 中心から100×100をクロッピングし、角丸に。 [code] // クロッピング、角丸 //convert -size 100×100 -quality 100 -gravity center -crop 100×100+0+0 xc:none -fill white -draw "roundRectangle 0,0 100,100 10,10" resize.jpg -compose SrcIn -composite out.png [/code] ↓こうなります。 3. あらかじめ用意した背景の上に重ねてできあがり。 [code] // 枠線 //convert… Continue reading 私だけの世界地図(2) ♥ 角丸
私だけの世界地図(1)
長年ぼんやり夢みてきた「私だけの世界地図」の制作を開始しました。 地図が好きで特にGoogleMapsが好きで、写真が好きで、GPSモノが好きで、 旅行（トレッキング）が好きで、プログラマな私が作る私だけの世界地図です。 ヽ(*´∀｀*)ﾉ まだゴールは見えていません。作りながら落としどころを考えていこうと思っています。 これ→私だけの世界地図(1) JSの勉強をしながらやってます。 現在の要件は、 ・GoogleMaps ・Geoタグ付きの写真 です。 まず第1フェーズは、「画像のExif情報から緯度経度を取ってきて、GooogleMaps上にプロット。」 までしました。いまのところのこだわりは、 ・DB使わない！ ・サーバサーバサイドのプログラム使わなーい。 です。でも次のフェーズできっとサーバサイドのスクリプト使います。。。 こないだ行った御岳山と、トルコのカッパドキアの写真だけプロットしてあります。 旅先での記録でも書いたように、旅先って特に海外ではネット環境がひたすら悪いので、オンラインじゃ動かないのは×。 現状は、iPhoneで撮った写真をチビすな !!っていうExif情報を保持したままリサイズするソフトでリサイズしてFTPでアップした画像を使っています。 以下ポイント。 1. binaryajax.js, exif.jsでExif情報がとれます。 Nihilogic : Javascript EXIF Reader – jQuery Plugin jQuery EXIF data plugin – Nihilogic ここを参考にしました。 [code language=”Javascript”] $(‘.photo’).each(function() { var sel_id = $(this).attr(‘id’); var img = document.getElementById(sel_id); var exif = new… Continue reading 私だけの世界地図(1)