jqueryの設定方法です。

前回お見せしたページがオープンしました。
facebookにて鎌倉商店と検索頂ければご覧に慣れます、もしよければいいねお願いしますね。

サイドバーで色々なコンテンツ表示してますのでお楽しみ下さい。

jqueryのアコーディオンみたいに画像が開くようにするために準備するもの

1. 画像（枚数は４～８枚程度)
参考ページは縦400px横４００pxで作成してあります。
　　　　　　参考ページ　http://www.hatarakimon.com　４００x４００４枚使用
http://www.odakonbu.co.jp　　４００x４００　７枚使用
2. サーバーへjqueryとプラグインをアップロード
　　　　　ファイルはhttp://jquery.com/からダウンロードしてください。
　　　　　　　　　現在は　jquery-1.6.4.min.jsが一番新しいですね。
　　　　　　　　　アコーディオンで使用するプラグインは２つ
　　　　　　　　　　jquery.kwicks-1.5.1.js jquery.easing.1.3.1.js
all.jsはgoogleのサイトの物を引用
3. facebookで使用するにはiframeのアプリを使用出来るようにしなくてはいけません。
作成手順の参考はこちら　→　　http://ameblo.jp/wingforest/entry-10826849727.html

作成手順
1. サーバー内にフォルダーを作成しjqueryやプラグインをアップロードします。
2. htmlを書く　以下　hatarakimon.com のfacebook使用を参照下さい。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>xxxxxxxxxxxxxxxxxxxxxx</title>

<style type="text/css">


</style>

<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>


<script type="text/javascript" src="http://www.xxx.xxx/xxxxx/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://www.xxx.xxx/xxxxx/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://www.xxx.xxx/xxxxx/jquery.kwicks-1.5.1.js"></script>
<script type="text/javascript">
$().ready(function() {
$('.kwicks').kwicks({
max:400,
spacing:4,
duration: 1500,
easing: 'easeOutBounce'
});
});
</script>


</head>
<body>

<ul class="kwicks">
<li id="kwick1"></li>
<li id="kwick2"></li>
<li id="kwick3"></li>
<li id="kwick4"></li>
</ul>
<div id="fb-root"></div>
<script type="text/javascript">
FB.init({
appId : 'xxxxxxxxxxxxxxx',
status : true, // check login status
cookie : true, // enable cookies
xfbml : true, // parse XFBML
logging : true
});
FB.Canvas.setAutoResize();
</script>
</body>
</html>

facebookのコンテンツを表示出来るサイズは520pxです。
自分のぺーじに表示したい場合は520pxを変更すれば大丈夫です、shopserveのコンテンツだと650pxですかね。僕の場合648pxを使用しています、別に深い意味はないんですがテーブルを組む際に列数２でも３でもきれいに割れるのでそうしているだけですが。

3. 後はhtmlを保存してiframeを使用して表示するだけです。
例えばこんな感じです。
<iframe src="http://www.xxxx.xxx/xxxxxx/xxxxxxx.html" width="520" height="400" frameborder="0" scrolling="NO"></iframe>

横幅や縦の長さについては設定を変更すればいかようにもなります、簡単に出来るようですがこの説明でも迷われる方がいらっしゃると思います。
僕もワークス（facebookで検索下さい　他にも色んなコンテンツ作成方法があります）さんのページをみてこれは良いと思って作ったんですが初めて作成となると「なぜって」事が多くて結構大変でした。
出来ちゃうとこんなもんなんですが！

WEB DESIGN

苦労話色々と大好きなアイテムについて！
個人的な覚書だと思ってください。

jqueryの設定方法です。