このページの本文へ

jQueryでクールなくるくるウィジェットを作ろう (5/5)

2009年04月28日 11時00分更新

文●古籏一浩、ASCII.jp

  • この記事をはてなブックマークに追加
本文印刷

■完成したHTMLファイル


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>TOKYOブックマニア</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<link rel="stylesheet" href="css/jquery.jcarousel.css" type="text/css">
<link rel="stylesheet" href="css/skin.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.2.3.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.pack.js"></script>
<script type="text/javascript" src="js/booknavi.js"></script>
</head>
<body>
<div id="book_header">
<div>本屋巡りが趣味の管理人による独断と偏見の書評サイト</div>
<h1>TOKYOブックマニア</h1>
<img src="images/site/mark.gif" width="52" height="63" alt="">
</div>
<div id="page_title">
<h2>ブックレビュー//文芸</h2>
</div>
<div id="book_contents">
<div id="bookmain">
<div class="contents">
<!-- Page 01 -->
<div class="reviewPage">
<img src="images/1.jpg" width="384" height="192" alt="不思議を売る男">
<h2>不思議を売る男</h2>
<p>
子どもだけではもったいない。大人もちゃんと楽しめる良質な児童書。ストーリーは、本の世界から飛び出てきた緑色のジャケットを着た男が、居候先の古道具屋で道具にまつわる小話を展開していく、というもの。まずは読んでみてください。</p>
<p>
ジェラルディン マコーリアン(著)<br>
偕成社 #ISBN-10: 4035404209<br>
1,575円 (税込)<br>
<a href="#" class="buyAmazon" rel="4035404209">Amazon で買う</a><br>
<a href="#" class="buyRakuten" rel="977713">楽天市場で買う</a><br>
</p>
</div>
<!-- Page 02 -->
<div class="reviewPage">
<img src="images/2.jpg" width="384" height="192" alt="就職しないで生きるには">
<h2>就職しないで生きるには</h2>
<p>
晶文社の「就職しないで生きるには」シリーズのきっかけになったのが本書。本屋・出版社の経営、缶詰工場など、著者レイモンド・マンゴーが体験した、80 年代アメリカを自由に生きる話は今でも十分、刺激的な内容。翻訳がこなれていないせいか、少々読みづらいのは確かだけど、そんなことを気にせずにスパッと読める。</p>
<p>
レイモンド マンゴー(著)<br>
晶文社 #ISBN-10: 4794963688<br>
1,470円 (税込)<br>
<a href="#" class="buyAmazon" rel="4794963688">Amazon で買う</a><br>
<a href="#" class="buyRakuten" rel="997516">楽天市場で買う</a><br>
</p>
</div>
<!-- Page 03 -->
<div class="reviewPage">
<img src="images/3.jpg" width="384" height="192" alt="本を読む本">
<h2>本を読む本</h2>
<p>
たしか、大学に入ったときに最初に読んだ本。最近本屋の店頭に山積みになっているのを見て思い出した。大学時代には苦痛だったが、ひさびさに引っ張り出して読んでみるとおもしろい。本を読むとはこういうことだったのか……</p>
<p>
M.J.アドラー著(著)<br>
講談社学術文庫 #ISBN-10: 4061592998<br>
945円 (税込)<br>
<a href="#" class="buyAmazon" rel="4061592998">Amazon で買う</a><br>
<a href="#" class="buyRakuten" rel="921982">楽天市場で買う</a><br>
</p>
</div>
<!-- Page 04 -->
<div class="reviewPage">
<img src="images/4.jpg" width="384" height="192" alt="セイフティボックス">
<h2>セイフティボックス</h2>
<p>
とっくの昔に絶版になってしまっている(文庫版はアリ)山田詠美のエッセイ本を思わず古本屋の店頭でジャケ買いならぬ装丁買い。角川書店の見城くん(いまは幻冬舎の社長)とか、時代を感じる描写がおもしろい。彼女のパーソナリティに触れたい方ならぜひ。……</p>
<p>
山田 詠美(著)<br>
講談社 #ISBN-10: 4062042738<br>
絶版中<br>
<a href="#" class="buyAmazon" rel="4062042738">Amazon で買う</a><br>
<a href="#" class="buyRakuten" rel="357539">楽天市場で買う</a><br>
</p>
</div>
<!-- Page 05 -->
<div class="reviewPage">
<img src="images/5.jpg" width="384" height="192" alt="恋愛小説ふいんき語り">
<h2>恋愛小説ふいんき語り</h2>
<p>
この書評は現在執筆中……</p>
<p>
麻野 一哉,飯田 和敏,米光 一成(著)<br>
ポプラ社 #ISBN-10: 4591100057<br>
1,680円 (税込)<br>
<a href="#" class="buyAmazon" rel="4591100057">Amazon で買う</a><br>
<a href="#" class="buyRakuten" rel="5101553">楽天市場で買う</a><br>
</p>
</div>
<!-- Page 06 -->
<div class="reviewPage">
<img src="images/6.jpg" width="384" height="192" alt="うずまき猫のみつけかた">
<h2>うずまき猫のみつけかた</h2>
<p>
この書評は現在執筆中……</p>
<p>
村上 春樹(著)<br>
新潮社 #ISBN-10: 4103534206<br>
1,890円 (税込)<br>
<a href="#" class="buyAmazon" rel="4103534206">Amazon で買う</a><br>
<a href="#" class="buyRakuten" rel="5368083">楽天市場で買う</a><br>
</p>
</div>
</div>
</div>
</div>
<div id="book_navi_1">
<div id="booknavileft">
<img src="menu/sidemenu1.gif" width="150" height="49" alt="文芸"><br>
<img src="menu/sidemenu2.gif" width="150" height="49" alt="アート"><br>
<img src="menu/sidemenu3.gif" width="150" height="49" alt="マンガ"><br>
<img src="menu/sidemenu4.gif" width="150" height="49" alt="趣味"><br>
</div>
</div>
<div id="book_navi_2">
<div id="booknaviright">
<ul id="bookmenu" class="jcarousel jcarousel-skin-tango">
<li><img src="icon/dummy.gif" width="80" height="80" alt=""></li>
<li><img src="icon/1.jpg" width="80" height="80" alt=""></li>
<li><img src="icon/2.jpg" width="80" height="80" alt=""></li>
<li><img src="icon/3.jpg" width="80" height="80" alt=""></li>
<li><img src="icon/4.jpg" width="80" height="80" alt=""></li>
<li><img src="icon/5.jpg" width="80" height="80" alt=""></li>
<li><img src="icon/6.jpg" width="80" height="80" alt=""></li>
<li><img src="icon/dummy.gif" width="80" height="80" alt=""></li>
</ul>
</div>
</div>
<div id="book_footer">
<p>
&copy;Copyright 2009 TOKYO BOOK REVIEW
</p>
</div>
</body>
</html>

■完成したbooknavi.jsファイル


$(function(){
    // 右の縦のカルーセル
    var pageNo = 0;
    $(".reviewPage:first").show();
    $("#bookmenu").jcarousel({ vertical: true, scroll : 1 });
    $(".jcarousel-prev").click(function(){
        pageNo--;
        if (pageNo < 0) { pageNo = 0; }
        $(".reviewPage").hide().eq(pageNo).show();
    });
    $(".jcarousel-next").click(function(){
        pageNo++;
        if (pageNo > $(".reviewPage").length-1) { pageNo = $(".reviewPage").length-1; }
        $(".reviewPage").hide().eq(pageNo).show();
    });
    // 左のナビゲーション
    var nav_count = 0;
    $("#booknavileft img").each(function(){
        $(this).css({ "position":"absolute", "left":"0px", "top":nav_count*80+"px" });
        nav_count++;
    });
    // 最初にアニメーションしながら引っ込むようにする
    $("#booknavileft img").animate({ "left":"-130px" }, 1500);
    // マウスイベントを設定する
    $("#booknavileft img").hover(
        function(){
            $(this).animate({ "left":"0px" }, 500);
        },
        function(){
            $(this).animate({ "left":"-130px" }, 500);
        }
    );
    // アマゾンと楽天に自動リンク(アフィリエイト)
    var amazonURL = "http://www.amazon.co.jp/exec/obidos/ASIN/";
    var amazonURL2 = "/●●●/ref=nosim/";
    var rakutenURL = "http://hb.afl.rakuten.co.jp/hgc/★★★/?pc=http://item.rakuten.co.jp/book/";
    $(".buyAmazon").each(function(){
        $(this).attr("href", amazonURL+$(this).attr("rel")+amazonURL2);
    });
    $(".buyRakuten").each(function(){
        $(this).attr("href", rakutenURL+$(this).attr("rel")+"/");
    });
});

●:自分のAmazon.co.jpのトラッキングIDを指定してください

★:自分の楽天のアフィリエイトIDを指定してください。モバイル用のURLは設定していませんので、楽天のアフィリエイトで生成されるURLなどを参考にしてください。rakutenURL部分のURLは書籍専用です。他の商品に対応させる場合には書き換えてください。

前へ 1 2 3 4 5 次へ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く