jQueryを使った画像ギャラリーを作ってみました！

前に春夏秋冬アイコンを作ったので～

同じく春夏秋冬ギャラリーです。



アイコンをクリックすると対応した写真が表示され(タブパネルみたいになってます。)

写真をクリックすると写真が大きく表示されます。

このギャラリーは何かと使えそうな気がします。

サンプルページ

参考にさせて頂いているサイト

http://ascii.jp/elem/000/000/438/438206/

http://gihyo.jp/design/serial/01/jquery-site-production

http://semooh.jp/jquery/

skal （スコール）

Ｗｅｂデザイナーにもとっつきやすい、

CSSのセレクターに近い記述方法、

シンプルで軽快、将来有望などなど

評判がとてもいいJavaScriptライブラリjQueryを使ってサンプルを作ってみました！
Flashのこの先がとても心配になってきたので、なので…


今回は初歩的な、春夏秋冬説明アコーディオンパネルを作ってみました。



矢印のアイコンをクリックするとパネルが出てきて、

$(“.up,.down”).click(function(){
$(“div#menu_list”).slideToggle(“slow”);
$(“.up”).toggle();
$(“.down”).toggle();
return false;
});

でてきた春、夏、秋、冬、アイコンにマウスオーバーすると説明を表示させます。

$(“#icon1″).mouseover(function(){
　　　　　　　　　　　　$(“#skal_blog_content_haru:not(:animated)”).fadeIn(); });
$(“#icon1″).mouseout(function(){
　　　　　　　　 $(“#skal_blog_content_haru”).hide(“slow”)； });


jQuery比較的簡単ということらしいのですが……

もっと勉強してあざやかーーなスクリプトを組めるようになりたいです。

また何か出来たら公開したいと思います。

サンプルページ

参考にさせて頂いているサイト

http://ascii.jp/elem/000/000/438/438206/

http://gihyo.jp/design/serial/01/jquery-site-production

http://semooh.jp/jquery/


skal （スコール）