jQueryと「Pikachoose」でサムネイルをクリックして画像を切り替えるスライダー

サムネイルをクリックすると、画像が切り替わるjQueryスライダー。

条件

  • 建築関係のクライアントで、設計した建物の写真を見せたい。
  • 正方形にトリミングしたサムネイルをクリックすると、画像が変わる。
  • クライアントが更新する。
    →ソースはできるだけシンプルに。
  • クライアントはメイン画像のリサイズくらいはできるが、サムネイル画像を縮小して正方形にトリミングするところまではやれない。
    →サムネイルはメイン画像を縮小、トリミングして表示させることにする。
  • レスポンシブ対応はなし。対象ブラウザはIE7以上、Firefox、Chrome。

pikachoose

利用したjs

Pikachoose a jQuery Slideshow – Pikachoose
http://www.pikachoose.com/

ピカチュー。かわいい。

htmlファイルへの記述

headタグ内でjsを読み込む

body内のスライダーを表示させたいところに以下記述。

cssファイルへの記述

サムネイルはデフォルトでは、選択されていないサムネイルは透過で表示して、hoverで透過0になるが、クライアントの要望で、サムネイルを透過0で表示させておいてhoverで透過になるようにしたいとのこと。
htmlの内の設定でサムネイルの透過を0にしておいて、以下hoverの時に透過0.7になるように設定した。

追記(2013/12/20/ 20:45):画像の両端をクリックしたら次(前)の画像を表示することになったのだが、デフォルトの状態では、サムネイルが「フルサイズの画像と同じサムネイルが透過なしで、その他のサムネイルは透過している」状態。
デザインとしては逆で、「フルサイズの画像と同じサムネイルが透過していて、その他のサムネイルは透過なし」にしたい。
そのため、jquery.pikachoose.jsを3箇所書き換えた。

About sakaism

名古屋で働くWebデザイナー 最近はデザインとは別のフィールドを持ちたいなぁとも思っている。
This entry was posted in javascript, jQuery. Bookmark the permalink.

スポンサードリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です