ひっそり開発室

faceboxにフォームタグを突っ込んで
ポップ動作するHTMLを作ったのまではいいのだけど、
FirefoxとIE10では正常動作するのにIE7,8,9では動作せず。

JavaScriptやらいろいろ書き換えて対応しようかと思って
別ファイルで検証しようとしたら、そっちではうまく動作

書き換えたのって
<form method="POST" action="./"> ↓ <form method="POST" action="./test.php"> だけなので

<form method="POST" action="./index.php"> と、書き換えたらうまく動作・・・。

原因よくわからんけど動作したからいっか。

お客さんのところでカスタムカレンダー表示してほしいとか言われ作ってみた。 function calendar_list($y,$m){ $dt = mktime(0,0,0,$m,1,$y); $wd = date('w',$dt); $res['year'] = date('Y',$dt); $res['mon'] = date('m',$dt); $p = 0; $mcl = array(); $wcl = array(); for ($i=0;$i<$wd;$i++){ $wcl[$p] = array('',$p,0); $p++; } for ($i=1;$i<=31;$i++){ $d = date('d',$dt); if ($i != $d){ break; } // $en = date_enable($dt);//----追加情報を加える関数 $wcl[$p] = array($d,$p,$en); $p++; $dt+= 24*60*60; if ($p == 7){ $mcl[] = $wcl; $wcl = array(); $p = 0; } } if ($p > 0){ while ($p < 7){ $wcl[$p] = array('',$p,0); $p++; } $mcl[] = $wcl; } $res['list'] = $mcl; return $res; } この関数でリストを作ってSmarty使ってこんな感じ。 {foreach from=$CAL item=MN} <table class="calendar_table" border=1> <caption>{$MN.year}年 {$MN.mon}月</caption> <th class="w0">日</th> <th class="w1">月</th> <th class="w2">火</th> <th class="w3">水</th> <th class="w4">木</th> <th class="w5">金</th> <th class="w6">土</th> {foreach from=$MN.list item=WEEK} <tr> {foreach from=$WEEK item=DAT} <td class="w{$DAT[1]} e{$DAT[2]}">{$DAT[0]}</td> {/foreach} </tr> {/foreach} </table> {/foreach} 実際に表示すると

2013年 06月

日	月	火	水	木	金	土
						01
02	03	04	05	06	07	08
09	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

ユーザーに確認させるために
ポップアップウィンドウを表示したい！

そんな要望に応えるためにフェイスボックスを利用してみよう。
http://defunkt.io/facebox/

前提としてはjqueryが必要なので
圧縮ファイルに同梱されているlibの中のjquery.jsをコピー
/public_html/js/jquery.js

次にsrcの中のファイル4点をよくある風にコピー
/public_html/css/facebox.css
/public_html/js/facebox.js
/public_html/img/closelabel.png
/public_html/img/loading.gif

次にHTMLへの実装

header部にとりあえずこんな感じで
<link rel="stylesheet" type="text/css" href="/css/facebox.css" media="all" /> <script type="text/javascript" src="/js/jquery.js" charset="utf-8"></script> <script type="text/javascript" src="/js/facebox.js"></script> <script type="text/javascript"> jQuery(document).ready(function($) { $('a[rel*=facebox]').facebox({ loadingImage : '/img/facebox/loading.gif', closeImage : '/img/facebox/closelabel.png' }) }) </script>
bodyの中にはこんなのを書いてみましょ
<a href="#pop1" rel="facebox" class="hint">ポップアップを試す</a></h4> <div id="pop1" style="display: none;"> ポップアップしちゃいます<br /> オンラインヘルプとかも書くのに使えそうですね。<br /> </div>
実際に動かすとこんな感じ

ポップアップを試す

ちょっと前に作ったプラグイン
MTでLightboxを利用するのはあちこちのページで紹介されているものの
記事部分の画像にタグを追加することができるものが
見つからなかったので自分で作ってみました。

プログラムの中身的にはもっと洗練できそうな気はするのだけど
限られた時間の中で作ったのでご容赦。

◆プラグイン設定画面

・ブログごとに利用するフラグをつけることができます
・リンクタグに付加する属性 slimboxなどにも変更することができます。
・記事に貼り付ける画像のデフォルト最大サイズ（lightbox表示する画像ではない）を設定できます。

◆画像選択後の画面

・チェックON/OFFで既存の設定をそのまま利用できます。

---

◆ダウンロード
LightboxImage.lzh

◆概要
エントリーで利用選択する画像ファイルに対して
エントリー内でリンクタグに属性を付加します。
画像サイズが一定の数字を超えた場合に自動的に縮小します。

◆対応バージョン
Movable Type 5.2.2
MT5以降の他のバージョンでも恐らく利用は可能ですが検証はできていません。

◆インストール
[mt-dir]/plugins/
に展開したファイルをディレクトリごとコピーしてください。

◆設定
lightboxをダウンロードし、
http://leandrovieira.com/projects/jquery/lightbox/
ブログディレクトリにコピー

MT側テンプレートデザインで<header>タグ内に以下のHTMLを記述してください。
パスはそれぞれ合わせてください。(絶対パスでの記述をおすすめします。)
<script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/jquery.lightbox-0.5.js"></script> <link rel="stylesheet" type="text/css" href="/css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript"> $(function() { $('.lightbox a').lightBox(); }); </script> slimboxを利用する場合も似たような処理を行うことで設定できます。

◆注意事項
本ソフトウェアを利用して発生した、
いかなる損害も当方では責任を負えません。
自己責任での改変はご自由にどうぞ。

とりあえず作ってみました。
どれくらい書くかはネタ次第
期待はしないでください。