Nivo Slider

Nivo Slider という、jQueryを使ったかっちょいいスライダーです。
サムネイル画像の上にマウスをもっていくと（マウスオーバー）、メインの画像が切り替わるというのはよくやることですよね。
あれはただ、onMouseOver = “jQuery(‘#main-img”).attr(‘src’, ‘sub-img-02.jpg’);” みたいなことをしてるだけで、切替え効果などは特に考えていないわけなんですが、このハデハデ GUI全盛の折にそれでいいのか、ということです。（ボクはシンプルな方が好きなんですけど）
で、Nivo Slider の出番です。

  • サムネイルに対応している
  • 画像にキャプションをかぶせられる
  • 勝手に動かない（スライドショーじゃないので）

こんなわがままな要望をかなえてくれます。
実際に使うときの注意点は、こんなところ。

  • jQueryの 1.2.6には対応していないので、素直に ajax.googleapis.com から最新版（1.4.2）を取ってきましょう。
  • jquery.nivo.slider.pack.jsのソースを見ると、ほぇ?! っとなりますが、大丈夫。これで動きます。
  • $(window).load(function() になっているところもそのままで。入れるタイミングがあるようです。
  • manualAdvance:true にすると勝手に動きません。
  • controlNavThumbs:true でサムネイルが出ます。
  • サムネイルファイルは、画像と同じところに『同じ名前_thumb.jpg』というファイルを作っておきましょう。
  • キャプションは、imgの title に設定します。

/作成者:

floatを入れておく箱の高さ

　
いつも釈然としないまま、clear:both したり、border:1px solid #fff したりしてたんですけど、明確な解決法があったので、メモ。
　
ここ（⇒ float属性を指定した要素の親要素の高さ）に書いてありました。overflow:auto を指定するだけですって、奥さん！

<div style="overflow:auto">
  <div style="float:left">左側のなにか</div>
  <div style="float:right">右側のなにか</div>
</div>

　
これだけじゃ、なんなんで、display:none で隠しておいた要素を表示するとき、display:block じゃ表示されませんよと。display:inline ですよ。（なんの豆知識やねん！）

/作成者:

カラーミーでのTips

,

　
お仕事でカラーミーのカスタマイズをやってるんですけど、これがなかなか癖があって面倒というか面白いので、少しメモっておきます。
一番美味しいところからひとつ。商品一覧でページ数を求めるときです。

<!-- $pgnum = floor(($productlist_num - 1) / 12) +1; -->

カラーミーは基本 smartyなんですけど、微妙にいろんなところがマスク（使えなく）してあって、使えないんです。
やりたいことは一番上に書いたことですが、そのまま assignしてもエラーになるので、四則演算をバラバラにして、切り捨ては、regex_replaceを使うという裏ワザです。
　
これを使って、[1] [2] [3] [4] みたいなページ・ナビゲータを出すのはこうです。


  

  

<div class="pagenate">
  
    &lt;a href=&quot;"&gt;<img src="http://img05.shop-pro.jp/PA01105/188/etc/page_arrow_lt.gif" alt="" /></a>
  
  
    &lt;a class=&quot;pbox&quot; href=&quot;&amp;page="&gt;</a>
  
  
    &lt;a href=&quot;"&gt;<img src="http://img05.shop-pro.jp/PA01105/188/etc/page_arrow_rt.gif" alt="" /></a>
  
</div>

左右の矢印を出して、間は数字（[1] [2] [3]・・・）のリンクです。途中を省略したいときや、いまいるところの前後だけ出す場合はとりあえず考慮してありませんが、できます。
　
二つ目はまた今度。

/作成者:

CrossSlide

　
いつも同じスライドショーだと飽きるので、新しいやつを探してみた。
　
CrossSlide がそれ！
　
普通のフェードと上下左右にパンしながらのフェード（ただし、これは表示エリアより画像が大きくないとエラーになる）、それと Ken Burnsができる。設定も簡単だし使いやすいが、１回で止まる指定はないみたいで、ずっとループするみたい。
この辺をどう考えるかだな。止まってほしい気もするが。（ソース見たらそういう指定が入ってるというオチはありがち）

/作成者:

用紙の拡大比率など

　
幼稚園の広報誌の表紙の制作を依頼されて（うちの財務大臣からロハで）、カラーコピーで簡易印刷するので、その程度のクォリティでいいということだったので、PhotoShopで土曜日しこしこと作業してたんですが、ほぼ完成したところでプリントアウトしてみると、「A4じゃないよ、B5って言ったじゃん！」とのこと。
さて、どうするか？
　
１．B5でレイアウトし直す。・・・　面倒いからヤダ。
２．B5で印刷する。・・・　フチなしにしてくれ！とのこと。無理だ。
３．B5でA4用紙に印刷。・・・一見よさそうだが、上マージンが足りないらしく却下。1cmくらい上マージンが指定できればいいだけなんだけど。
４．結局、PhotoShopでPNG保存して、それを Wordに貼りつけて、86％縮小して印刷。・・・OK
　
で、必要な用紙サイズをメモっときます。

A判 B判
A4 210×297 B4 257×364
A5 148×210 B5 182×257

　
これだけじゃなんなんで、その間ググったことメモ。
　
・PhotoShopで塗りつぶしじゃない円を描く方法
　なんでもっと簡単に円を描く方法を提供しないんだろうかとそっちの方が気になる。
　
・PhotoShopでキラキラした星を描く方法
　これは効果的です。使いました。
　
・PHPのヒアドキュメント
　よく使うんだけど、ちゃんと覚えてないものの典型。
　
・CSSハック一覧 – IE, Firefox, Safariなどなど
　きっとこれが決定版。
　
・フレームの右側を折り返さないようにする方法は？
　white-space:nowrap が思い出せなくてね。年だね、もう。

/作成者:

背景画像の位置

またまた、IE7互換表示だと OKで、IE8だと NGな CSSがあったので、メモ。
　
ここ（⇒ 背景画像の表示位置）によると、『CSS2.1においてbackground-positionプロパティにおいて、「キーワードを、長さや%値と組み合わせることはできません」という記述が削除されました。つまり、「top 25%」という記述も許可されます(ie8- -ff3 -o9 -sf4 -gc2未対応)。』ということですが、まだ未対応のようですね。IE7互換が先取りしてたってことで。

background-position:0 right;     /* NG */
background-position:0px right;  /* NG */
background-position:0% right;  /* NG */
background-position:top right;  /* OK */

　
あと、角丸ボックス・吹き出しのまとめ。ピタッとこないとなかなか使いにくいですが。

/作成者: