jQuery活用で、もっと見やすいポートフォリオを作る

なんで、このカテゴリを作ってなかったんだろう(´・ω・`)



\(・_\)ソノハナシハ(/_・)/コッチニオイトイテ



今日はようやくイラストサイトのポートフォリオ(作品集)修正に手を付けました。



古い黒歴史の削除と見やすさの改善が主な目的です。



変更前は、絵の一部をPhotoshopで75×75ピクセルに切り取ってサムネイルにし、HTML編集で並べて、サムネイルをクリックすると作品全体が表示されるという仕組みをLightboxというものを使って作り上げていました。



変更前のサイトスクリーンショットを取り忘れてしまったのが残念(?)です。



jQueryというのは、JavaScriptを用いてWeb上でのアニメーションなどの仕掛けをより簡単に作れるようにするためのライブラリ(プログラムのデータを集めたもの…という表現で良いのでしょうか? プログラミングは詳しくないのでorz)です。



※jQueryについては下記のサイトなどを参考にして調べていました。

http://www.slideshare.net/hayatomizuno/jquery-7665168

http://jquery.ccoo.jp/



そのjQueryを私みたいなJavaScriptをろくに分かってないような生き物でも使いやすくするため、プラグインというものがあります。



LightboxもjQueryプラグインの一つで、ギャラリーの画像を見やすくするためのものです。



これを導入した結果、する前よりはだいぶ見やすくなったものの…。

更新が面倒(わざわざサムネールを作って、HTMLに書き足して…という過程)、現在のページデザインの都合で、サムネイルが増えすぎるとページそのものを増やさざるを得ない、という問題が発生しました。



そして、アメブロにブログを移してから、中々イラストサイトの方まで手が回らず、長らく放置されていたわけです。



今日になって、何か良いjQueryプラグインはないかと、Google先生に聞き、いくつか内容を比べてみて、「Galleria」というプラグインを導入することに決めました。



理由は「サムネイルを自動的に作ってくれる」「あまり手間をかけずに使い勝手が良くて見やすいデザインになる」からです。



カスタマイズもかなり行けそうだったものの、分からない部分があったため、分かる部分だけ手を加えました。



で、導入方法はというと…。



まずは、Galleriaのサイトからプラグイン一式をダウンロードしてきます



今度はHTMLファイルの編集です。

jQueryを使えるように、headタグ内に以下の一文を書き加えます。



<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js”></script>



そして、やはりheadタグ内(↑の直後でOK)に



<script src=”galleria/galleria-1.2.7.min.js”></script>



を書き加えます。



更に、bodyタグ内に



<script>

Galleria.loadTheme(‘galleria/themes/classic/galleria.classic.min.js’);

Galleria.run(‘#galleria’, {

height: 420, width: 560

});

</script>




※heightとwidthは任意の数値を記入。heightは書かないとエラーが発生したので必須の模様。

widthはなくてもOK。書かない場合はwidth100%と同じ扱いになります。



を付け加えて、↑のタグ直前辺りに

<div id=”galleria”>

<img src=”photo1.jpg”>

<img src=”photo2.jpg”>

<img src=”photo3.jpg”>(以下表示させたい分繰り返し)

</div>




以上の内容を書いたHTMLファイルと、Galleriaのライブラリ

これで、基本的な動作はするようになるはず。



ちなみに、Galleriaサイト内Beginners Guideにも同様の解説が書かれています(ただし英語です)。



今回は、画像をクリックして大きな画像を表示するオプションと、lightboxを使うオプションも加えました。



Galleria.run(‘#galleria’, {

height: 420, width: 560

});

</script>








Galleria.run(‘#galleria’, {

height: 420, width: 560, popupLinks: true, lightbox: true

});

</script>




と書き換えて、



headタグ内にlightboxで使うプラグイン群に関するscriptタグと、表示で必要になるCSSに関する記述を加えます。

<script type=”text/javascript” src=”js/jquery.lightbox.js”></script>

<link rel=”stylesheet” type=”text/css” href=”css/jquery.lightbox.css” />



導入に関する詳細は先に紹介したページが役に立つかと思います。



しかし、自分が使っていたのは若干仕様が異なるものだったようで…。

(Lightbox系のプラグインは多数あります)

どうやら違うライブラリを使ってたらしい(゜▽゜;)



<script type=”text/javascript” src=”../js/prototype.js”></script>

<script type=”text/javascript” src=”../js/scriptaculous.js?load=effects,builder”></script>



画像ファイル表示で記載しているimgタグをa hrefタグで挟みます。

URLは画像と全く同じでOKです(自分でサムネールを用意する場合は、imgタグにサムネイルのURLを、aタグに元画像のURLを記載します)。



HTMLの記載に合わせて、プラグインをアップロードし、ギャラリーページのHTMLファイルと画像もアップロードします。



$猫っぽいイラストレーター トラ猫ちゃっぴーの行動記録-Galleria:大体こんな感じになるはず



そうやって完成したトラ猫さんのポートフォリオはこちら



更新の際は、画像のHTMLを加えて、画像と書き換えたファイルをアップロードすればOKってことに…。

若干手間が省けたかなぁ( ・ω・)?






$猫っぽい人の行動記録-ペタしてにゃん
$猫っぽい人の行動記録-人気ブログランキングへ
↑このエントリ・ブログが気に入った方はぽちっと押してくれると嬉しいです(*’-‘)