蝸牛の歩み

蝸牛の如く,ゆっくりでも着実に前へ・・・

jQueryプラグインのclossSlideでツールチップを表示させる

写真をクロスフェードさせるJavaScriptは何種類かあるが、試してみたところclossSlideというのがよさそうであった。
設置方法などはググっていただくとして……
alt属性は設定できるのでIEではマウスオーバーしたときにツールチップが表示されるが、IE以外のブラウザでは表示されない。そこで、title属性も設定できるようにしてみた。
ソース(jquery.cross-slide.js)を見ると、altを設定している部分をそっくりコピーして、titleに変えてやればよさそう。

*** jquery.cross-slide.js.org	2011-02-26 14:12:25.000000000 +0900
--- jquery.cross-slide.js	2011-02-26 14:12:10.000000000 +0900
***************
*** 252,257 ****
--- 252,259 ----
  					elm.click(p.onclick);
  				if (p.alt)
  					img.attr('alt', p.alt);
+ 				if (p.title)
+ 					img.attr('title', p.title);
  				if (p.rel)
  					elm.attr('rel', p.rel);
  				if (p.href && p.target)

minified(jquery.cross-slide.min.js)の方は読みにくいけど、以下の太字の部分を追記。

...if(m.alt){s.attr("alt",m.alt)}if(m.title){s.attr("title",m.title)}if(m.rel){y.attr("rel",m.rel)}...

設定の仕方は、alt属性と同じ。

$('#placeholder').crossSlide({
  sleep: 2,
  fade: 1
}, [
  { src: 'sand-castle.jpeg', alt: '砂のお城', title: '砂のお城' },
  { src: 'sunflower.jpeg', alt: 'ヒマワリ', title: 'ヒマワリ'  },
  { src: 'flip-flops.jpeg', alt: 'ビーチサンダル', title: 'ビーチサンダル'  },
  { src: 'rubber-ring.jpeg', alt: '浮き輪', title: '浮き輪' }
]);

ここではalt属性とtitle属性を別々につけられるようにしたが、alt属性だけを設定すればalt属性、title属性の両方を同時につけられるようにしてもよいかも。