大きな画像を上下左右にスライドさせて表示するプラグイン。
Ken Burns effectみたいにグイングインさせるのではなく、up、downにゆるゆると動かしてフェードみたいな感じが使いたくて。
使い方は割と簡単。
注意点は、jquery.js?ver=1.2.6 だと動かなかったこと。jQuery.isEmptyObject()を使っているので、1.4 over じゃないとダメみたいね。
<script type="text/javascript" src="/js/jquery.cross-slide.js">
jQuery(function($) {
$('#gallery1').crossSlide(
{
speed: 15, //in px/sec
fade: 4 //in sec
},
[
{ src: '/tops-1.jpg', dir: 'up' },
{ src: '/tops-2.jpg', dir: 'down' },
{ src: '/tops-3.jpg', dir: 'up' }
]
);
});
$tmp、$imgはそれぞれのディレクトリを適宜セットすること。
使いたいところに、#gallery1 を書いて、cssは width と height だけ指定しておけば、OK。
<div>Now Loading ...</div>
#gallery1 {
width:900px;
height:388px;
}
ウィンドウサイズより画像の方が小さかったり、fadeを大きくすると、すぐエラーで怒られたりするので、使い方がちょっと難しいけど、まぁ、お手軽です。
jQuery:later
jQuery例の CrossSlide がウザいから1回で止めてくれと、お客様じゃなくて社内から声が。あんたが入れろって言ったんじゃんか!と喉元まで出かかった言葉を呑み込んで、ハイハイと素直に答える優しい技術者。
でも、ソースを読んでも、止める方法が書いてない。
$.fn.crossSlideFreeze = function() { this.find('img').stop(); }crossSlideFreezeという関数を呼べば止まるみたいだけど、どうやって呼べばいいんだ?
スライドに飽きたら[Stop]ボタンをユーザに押してもらうか。そんなバカな。
ということで、ある程度時間が経ったら止めることにしました。
(function($) { $.fn.later = function(arg, fn) { var self = this; var timer = setTimeout(function() { clearTimeout(timer); self.each(fn); }, arg); return self; }; })(jQuery);こういうのを外部ファイル(例えば、jquery.later.js)に置いておいて、こんな風にします。
<script type="text/javascript" src="/js/jquery.later.js"> jQuery(function($) { $('#gallery1').later(80000, function() { $(this).find('img').stop(); }); });80秒経ったら、gallery1のすべての imgを止めてしまえ、です。フェードの途中でも有無を言わさず止まってしまって面白いです。
jQuery:LavaLamp
jQueryLavaLampと書いてもピンときませんよね。

グローバル・ナビゲーションで、マウスをもっていくと、ビヨーンと背景ブロックが追っかけてくるやつです。
こう書いてもきっとわかりませんね。
こんなやつです。使い方。
頭で指定しておくのはお決まり。ULにメニューを書いていきます。
下の例は、ULの背景にメニュー画像を置いて、その上を透過パネル(少し斜がかかったもの)が移動するようにしたものです。
メニュー画像を載せられればわかりやすいんだけど、今制作中のお客様のやつなんでね。
<script type="text/javascript" src="/js/jquery.lavalamp.js"> <script type="text/javascript" src="/js/jquery.easing.1.1.js"> jQuery(function($) { $("#nav1").lavaLamp( { fx: "backout", speed: 700 } ); });<ul class="lavaLampNoImage"> <li class="current"><a href="#">MENU</a></li> <li><a href="/party/">PARTY PLAN</a></li> <li><a href="/access/">ACCESS</a></li> <li><a href="/contact">CONTACT</a></li> </ul>.lavaLampNoImage { background:#fff url(images/top-menu.png) no-repeat; width: 898px; height: 78px; position: relative; overflow: hidden; padding:1px; margin: 0; border: none; } .lavaLampNoImage li { margin:0; padding:0; float: left; list-style: none; } .lavaLampNoImage li.back { position: absolute; z-index: 8; height: 76px; background-color:#fff; opacity:0.2; filter:alpha(opacity=20); -ms-filter:"alpha( opacity=20 )"; } .lavaLampNoImage li a { position: relative; z-index:10; display:block; overflow: hidden; float: left; height: 76px; font-size:8px; color:#C1955C !important; text-decoration:none; } .lavaLampNoImage li a:hover, .lavaLampNoImage li a:active, .lavaLampNoImage li a:visited { border:none; } #nav1l1, #nav1l1 a { width:152px; } #nav1l2, #nav1l2 a { width:197px; margin-left:2px; } #nav1l5, #nav1l5 a { width:121px; margin-left:2px; } #nav1l6, #nav1l6 a { width:123px; margin-left:2px; }jQuery:CrossSlide
jQuery大きな画像を上下左右にスライドさせて表示するプラグイン。
Ken Burns effectみたいにグイングインさせるのではなく、up、downにゆるゆると動かしてフェードみたいな感じが使いたくて。
使い方は割と簡単。
注意点は、jquery.js?ver=1.2.6 だと動かなかったこと。jQuery.isEmptyObject()を使っているので、1.4 over じゃないとダメみたいね。
<script type="text/javascript" src="/js/jquery.cross-slide.js"> jQuery(function($) { $('#gallery1').crossSlide( { speed: 15, //in px/sec fade: 4 //in sec }, [ { src: '/tops-1.jpg', dir: 'up' }, { src: '/tops-2.jpg', dir: 'down' }, { src: '/tops-3.jpg', dir: 'up' } ] ); });$tmp、$imgはそれぞれのディレクトリを適宜セットすること。
使いたいところに、#gallery1 を書いて、cssは width と height だけ指定しておけば、OK。
#gallery1 { width:900px; height:388px; }ウィンドウサイズより画像の方が小さかったり、fadeを大きくすると、すぐエラーで怒られたりするので、使い方がちょっと難しいけど、まぁ、お手軽です。
SQL:CASE WHEN
PostgreSQL, TipsPostgreSQLだけというわけじゃなくて、いまのいままで(自分が)知らなかったのがびっくりというネタ。
それは、SQL文での CASE式。昔々、Accessで IIF(三項演算子)は使ったことがあったけど、SQLに IIFがないというのも、これを書こうと思って、ググって知ったくらい。
ほかの使い方はこちら「SQL の CASE 式って知ってますか?」参照。
Twitter:巧妙な手口?
EtcTwitterを使った巧妙なダイレクトセールスじゃないかな?と思われる販売手法があったのでメモ。
もちろん、なにかを買ったわけではないけど、「これは使えるかもね、むふふ」という感じなので。
アイディアとして秀逸だなと思うところは、
自分が売りたいもの(物販、情報、集客、認知等)があって、それに興味を持ちそうな人が集まるTwitterのフォロワーに対して、上手にダイレクト・メッセージを送るという手法は、SPAMと紙一重だけど、やり様によってはアリかも。
WordPress:メディア追加のときのタグ編集
WP Tipsあとであとでと思っているといつまでたってもやらないので、思い立ったときにやってみたシリーズ。
「メディアを追加」ボタンで画像を投稿エディタへ挿入してから、毎回毎回手作業で次のようなことをしてました。(自分使用&仕様)
それをフィルタ一発でやったろーぜというわけです。参考にさせていただいたのは「WordPress のエディタに埋め込むメディア用タグを自動編集する」。
きっとこっちを見た方がわかりいいと思うので、自分でやったとこだけメモ。
function add_image_send_to_editor($html, $id, $alt='', $title='', $align='', $url='', $size='') { $wk_html = ""; if (preg_match("/^<a>]*?>.*?$/i", $html)) { $wk_html .= '<div class="img-shadow">'.preg_replace("/^<a>]*?>(.*?)$/i", "$1", $html).'</div>'; $wk_html = preg_replace('/(title=".*?"|class="align.*"|http:.*satake7.net)/i', "", $wk_html); }<a>タグだったら、<div class=”img-shadow”></div>でくくって、いろんなものを削除ということです。