memo-memo

今回使ってみたプラグインは、こちらです。

いい感じに、画像を並列に表示して、スライドしてくれます。

横についている「⇒」をクリックすると、画像がスライドします。
ダウンロードページは、こちらです。

使い方は、まずプラグインをダウンロードします。で、jQuery本体とプラグイン本体と、cssを2ファイル分、htmlに読み込みます。

cssは、メインのcss（libフォルダに入っている、jquery.jcarousel.css）と、使いたいスキン（skins/ie7もしくはtango/skin.css）の2ファイルです。今回は、ie7を使ってみました。

<link rel="stylesheet" type="text/css" href="path/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="path/ie7/skin.css" />
<script type="text/javascript" src="path/jquery.js"></script>
<script type="text/javascript" src="path/jquery.jcarousel.pack.js"></script>

こんな感じです。

あとは、htmlの<ul>タグを使って、イメージを指定します。

<ul id="mycarousel" class="jcarousel-skin-ie7">
 <li><img src="images/gazou_01_s.jpg" width="75" height="75" /></li>
 <li><img src="images/gazou_02_s.jpg" width="75" height="75" /></li>
 <li><img src="images/gazou_03_s.jpg" width="75" height="75" /></li>
 <li><img src="images/gazou_04_s.jpg" width="75" height="75" /></li>
 <li><img src="images/gazou_05_s.jpg" width="75" height="75" /></li>
 </ul>

こんな感じです。

後は、scriptタグで、実行します。

<script type="text/javascript">
$(function(){
 $("#mycarousel").jcarousel({
 size : 5,
 scroll:1
 });
});
</script>

こんな感じです。他のプラグイン同様、連想配列形式で、パラメータを引数に持てます。パラメータについての詳細は、本サイトを確認しましょう。

で、注意点としては、まずhtmlの赤字で書いてあるクラス名ですが、使いたいskinの名前になる様です。今回は、jcarousel-skin-ie7もし、tangoを使いたかったら、クラス名はjcarousel-skin-tangoになります。その際、読み込むcssも、tangoフォルダに入っている、skin.cssを読み込もう。

次の注意点は、青字の画像のサイズです。どうやらデフォルトは、width、hight共に、75pxでcssのファイルが作られているようです。この画像をwidth、hight共に100pxにしたい場合、htmlだけじゃなくて、skin.cssの内容も変えなきゃならないっぽいです。

変えたのは、5カ所です。

まず、ie7/skin.cssの7～10行目のwidthの値

.jcarousel-skin-ie7 .jcarousel-container-horizontal {
 width: 320px;/*デフォルトでは、 245px*/
 padding: 20px 40px;
}

つぎは、18～21行目のwidthと、heightの値

.jcarousel-skin-ie7 .jcarousel-clip-horizontal {
 width:  320px;/*デフォルトでは、 245px*/
 height: 102px;/*デフォルトでは、 75px*/
}

つぎは、28～32行目のwidthと、heightの値

.jcarousel-skin-ie7 .jcarousel-item {
 width: 100px;/*デフォルトでは、 75px*/
 height: 100px;/*デフォルトでは、 75px*/
 border: 1px solid #fff;
}

とり合えず、上記の部分を直したら、きちんと表示されました。様は、表示しているところを画像サイズに合わせて広げる感じです。

後、写真自体を中央に配置したい場合は、jquery.jcarousel.cssの5行目以降の

.jcarousel-container {
 position: relative;
  }

に、

.jcarousel-container {
 position: relative;
 margin:0 auto;
}

こんな感じで、赤線のmargin:0 auto;を追加すれば、真中に表示出来ました。

他にも、本サイトのサンプルを見ると、いろいろ使い方があるみたいなので、追々触ってみようと思います。

こちらも、同名のプラグインがあるみたいだけど、今回使ってみたのは、こちらです。かなり、自由度の高い、角丸を作ってくれるプラグインです。
本サイト

使い方は、いたってシンプルで、まず、<script>で、ダウンロードしたプラグインを読み込んだら…

html

<div　class="corner">
 <h5>コーナー</h5>
 <div>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
 </div>

こんな感じで、htmlを書く。

次は、

ｊｓ

$(function(){
 $(".corner").corner();
});

こんな感じで、実行すればOK。

オプションもたくさん用意されていて、色々なタイプの角丸（角が丸くなるだけじゃないオプションもある。）が作れる。

とっても便利でしょう。

ただひとつ注意点は、このプラグインは、上記のhtmlの場合、div.cornerのバックグラウンドを角丸に変える感じに作られているらしく、背景色に、コンテンツ自体の背景色と同じ色をcssで指定していると、プラグインが適用されたかどうかがブラウザで目視しずらい。って言うか、同じ色だとわからない。プラグインを適用させたい場合は、cssで、バックグラウンドカラーを変えよう。

backgroundで、画像を指定したら、どうなるのかな？今度やってみよう。

同じような名前のプラグインがあるみたいだけど、今回試してみたのは、
こちらです。

使い方は、まず、プラグイン自体をダウンロード（っていうか、このサイトの場合はコピペ）して、実行させればオーケー。使い方自体は、他のプラグインと、たいして変わりません。

html

<div>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
...
</ul>
</div>

js

<script type="text/javascript">
$(function(){
$("div.foo").carousel();
});
</script>

こんな感じで、実装できます。オプションも追加可能です。オプションに関しての詳細は、本サイトへ。

さて、このプラグイン、実装自体は簡単だけど、なぜか一緒にくっついてくるはずの、（他のプラグインではくっついてきてた）cssのファイルが、本サイトに無い。リンクをたどると、似たようなのがあるけれど、それとは違うらしい。（違うのか？）うーん英語が解らない…。

ってことで、このプラグインを使うときは、cssは全部自前で作らなきゃならないらしい…。イメージも自分で用意しなきゃならないっぽい。firebugをフル活用でcssを組むしかないですな…。

使った感じは、やっぱり写真のスライドに使うのが無難な気がした…。テキストに充てるのは、若干面倒な感じ。

cssが、全部自前ってこともあり、汎用性はかなりあるのでは？ちょっと使いたいときには便利です。

ひとつ前に書いた記事のやり方だと、ie6でエラーが出たので、修正しました。

htmlは、<div>タグをひとつ追加

<div id="flip-tabs">
 <ul id="flip-navigation">
 <li><a href="javascript:void(0)" id="tab-0">Recent</a></li>
 <li><a href="javascript:void(0)" id="tab-1">Popular</a></li>
 <li><a href="javascript:void(0)" id="tab-2">Comments</a></li>
 </ul>
 <div id="rel">
 <div id="flip-container">
 <div>
 PutPut Content for first tab
 </div>
 <div>
 Put Content for second tab here
 </div>
 <div>
 Put Content for third tab here
 </div>
 </div>
 </div>
 </div>

cssは、一項目追加

@charset "utf-8";
#flip-tabs{
width:300px;
margin:20px auto; position:relative;
}

#rel{
position:relative;
}

#flip-navigation{
margin:0 0 10px; padding:0;
list-style:none;
}

#flip-navigation li{
display:inline;
}

#flip-navigation li a{
text-decoration:none; padding:10px;
margin-right:0px;
background:#f9f9f9;
color:#333; outline:none;
font-family:Arial; font-size:12px; text-transform:uppercase;
}

#flip-navigation li a:hover{
background:#999;
color:#f0f0f0;
}

#flip-navigation li.selected a{
background:#999;
color:#f0f0f0;
}

#flip-container{
width:300px;
font-family:Arial; font-size:13px;
}

#flip-container div{
background:#f00;
}

JSは、若干追加

$(function(){
//    initialize quickflip
 $('#flip-container').quickFlip();

 $('#flip-navigation li a').each(function(){
 $(this).click(function(){
 $('#flip-navigation li').each(function(){
 $(this).removeClass('selected');
 });
 $(this).parent().addClass('selected');
//            extract index of tab from id of the navigation item
 var flipid=$(this).attr('id').substr(4);
//            Flip to that content tab
 $('#flip-container').quickFlipper({ }, flipid, 1);
 return false;
 });
var cont_style   = $("#flip-container").attr("style");
var div_attr     = $("#flip-container div").attr("style");
var komozi       = div_attr.toLowerCase();
var div_attr_arr = komozi.split("height");
var style_tuika  = cont_style + " height " + div_attr_arr[1];
$("#flip-container").attr("style",style_tuika);
$("#rel").attr("style", "height" + div_attr_arr[1]);
});

各々、赤字の部分が変更点です。

プラグインで動的に付加してくれている、div#flip-containerのstyle属性のposition:relative;が、ie6では、無視されるらしい…

って事で、新たにdiv#relを追加して、cssで、position:relative;を指定しています。

JSの方は、なぜか、ie6の場合、style属性を取得すると、全部大文字で取得されちゃいました。（marginじゃなくてMARGIN…こんな感じでした）

なので、一度toLowerCase();で小文字に変換しています。

後、新しく追加したdiv#relに、style属性のheightを指定しています。

お願いだから、これ以上バグ出ないで…

以前このブログでメモっておいたjQueryプラグインのQuickFlip 2と、タブ切り替えをセットにしたチュートリアルがありました。
チュートリアルページ

QuickFlip 2のダウンロードページ。

で、チュートリアルページにあるソースをコピーペースト。

html

<div id="flip-tabs">
 <ul id="flip-navigation">
 <li><a href="javascript:void(0)" id="tab-0">Recent</a></li>
 <li><a href="javascript:void(0)" id="tab-1">Popular</a></li>
 <li><a href="javascript:void(0)" id="tab-2">Comments</a></li>
 </ul>
 <div id="flip-container">
 <div>
 PutPut Content for first tab
 </div>
 <div>
 Put Content for second tab here
 </div>
 <div>
 Put Content for third tab here
 </div>
 </div>
 </div>

css

@charset "utf-8";
#flip-tabs{
width:300px;
margin:20px auto; position:relative;
}

#flip-navigation{
margin:0 0 10px; padding:0;
list-style:none;
}

#flip-navigation li{
display:inline;
}

#flip-navigation li a{
text-decoration:none; padding:10px;
margin-right:0px;
background:#f9f9f9;
color:#333; outline:none;
font-family:Arial; font-size:12px; text-transform:uppercase;
}

#flip-navigation li a:hover{
background:#999;
color:#f0f0f0;
}

#flip-navigation li.selected a{
background:#999;
color:#f0f0f0;
}

#flip-container{
width:300px;
font-family:Arial; font-size:13px;
}

#flip-container div{
background:#f00;
}

JS

$(function(){
//    initialize quickflip
 $('#flip-container').quickFlip();

 $('#flip-navigation li a').each(function(){
 $(this).click(function(){
 $('#flip-navigation li').each(function(){
 $(this).removeClass('selected');
 });
 $(this).parent().addClass('selected');
//            extract index of tab from id of the navigation item
 var flipid=$(this).attr('id').substr(4);
//            Flip to that content tab
 $('#flip-container').quickFlipper({ }, flipid, 1);
 return false;
 });
 });

cssの赤字の部分のwidthで、見出しのタブの文字のwidthと合わせよう。今回は、300px。

で、上記のファイルを全部読みこむと、一応は表示されました。

ただ、htmlのid flip-containerの中の文字数。（様は、タブで切り替わる、本文の文字数）によって、若干思わぬ弊害が起こった。

ちょっと解りずらい画像だけど…タブの下にあるコンテンツにかぶってしまった。

で、いろいろ原因を探っていると、このプラグインは、htmlにstyle属性を付けてくれるんだけど、その付加されたstyle属性をちょっと変えると、

こんな感じに、一つ下のコンテンツに重ならずに表示できた。

対応の仕方ですが、

まず、firebugで、ブラウザに表示した後のhtmlを見てみると、

<div id="flip-container" style="position: relative;">

<div style="margin: 0px; padding: 0px;
position: absolute; top: 0px;
 left: 0px; width: 300px; height: 140px;">
タブの中の本文
</div>

<div style="display: none;">
</div>
<div style="display: none;">
</div>
<div style="display: none;">

こんな感じになっている。（「タブの中の本文」の所は、複数ある）

問題なのは、青文字のposition:absoluteの部分。同じdivのstyleに、height: 140pxと書いてあるけど、absoluteしてしまっているので、下のコンテンツにかぶってしまう。

で、緑文字で書いてある、一つ上の要素（親要素）である、<div id=”flip-container”>のstyle属性を、

style="position: relative;"

から、

style="position: relative; height: 140px"

としたら、下のコンテンツにかぶらず表示出来ました。

このプラグインは、テキストの量によって、自動でheightを計算して、style属性を付加する感じになっているらしく（多分ね…）、htmlに直接heightをstyle属性で書く事も出来ると思うけど、出来れば動的に処理したい。

そこで考えたのが、このコード、

var cont_style=$("#flip-container").attr("style");//その1
var div_attr=$("#flip-container div").attr("style");//その2
var div_attr_arr = div_attr.split("height");//その3
var style_tuika = cont_style + " height " + div_attr_arr[1];//その4
$("#flip-container").attr("style",style_tuika);//その5

いや、めっちゃ素人がばればれのコードな気がするが…まあ、とりあえず動くので良しとしよう。

その1：まずは、変数cont_styleにdiv#flip-containerの、style属性の値を格納。この時点では、「position: relative;」が格納されているはず。

その2：次は、変数div_attrに、div#flip-container divの、style属性の値を格納。「margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; width: 322px; height: 140px;」が格納されているはず。

その3:今取得したdiv_attrを、文字列「height」で切って、配列div_attr_arrに格納。

格納されたのは、「margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; width: 322px;」と、「: 140px;」のはず。

その4：後は、変数cont_styleと、配列div_attr_arrを使って、新たなスタイル属性を作って、変数style_tuikaに格納。「position: relative; height: 140px;」こうなっているはず。

その5：それを、div#flip-containerのstyle属性に新たに書けば完成。

………………

ホントは、もっとスマートなやり方がありそうだけど、っていうか絶対あるけど、取り換えずこのやり方で、解決できました。

<追記>

このやり方だと、ie6でバグが出ました…修正版あり。