highslide.jsを使ってみるその４

JavaScript

だいぶhighslide.jsを利用できていると思うので、更なる向上を目指してお試し中。

まず縮小画像にマウスポインタを置いたとき、アイコンの形を拡大を表すアイコンに変える。

.highslide {
  cursor: url(http://file.shinobibloglab.blog.shinobi.jp/zoomin.cur), pointer;
  outline: none;
}

次に縮小画像をクリックした際に、縮小画面に「読み込み中」って文言が表示されると思うんだけど何もしないと青いリンクされた？文字が表示される。かっこよく無いよね。で、それを多少まとものする。

.highslide-loading {
  display: block;
  color: white;
  font-style: 'MS Sans Serif';
  font-size: 9px;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  padding: 3px;
  opacity: 0.60; /* w3c */
  filter: alpha(opacity=60); /* ie */
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  background-color: black;
}

これでいいはず。いや〜ローカル環境で試しているとロードされてますよなんて表示される事がほとんど無いから確認できんのよね。たぶんこれでいいはずなんだわ。

次はそうだな〜キャプションを拡大画像の下ではなく左に表示してみたい。では