※2012/04/17 リンク先のサイトが関係ないサイトになっていましたので、リンクを外しています。
CSSとｊQueryで画像のスライダーを作れる「Automatic Image Slider」のご紹介です。
以下のようなスクリプトを設置する事で動作するようです。
//Show the paging and activate its first link
$(".paging").show();
$(".paging a:first").addClass("active");
//Get size of the image, how many images there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
iPadなどのFlashをサポートしないデバイスが登場してくると、HTMLのみのギャラリーが増えそうですよね。
サイトにはチュートリアルが紹介されているので、興味のある方はご覧になってみてください。
Showcaseは画像のスライドショーが作成できるjQueryのプラグインです。
軽量で動作し、組み込みも簡単なようです。
以下のようなコードで動作するようですね。
$(function() {
$("#showcase").showcase({
css: { width: "566px", height: "168px" },
animation: { type: "fade" },
images: [
{ url:"images/showcase-home-1.jpg",
description:"approx. 16kb of javascript" },
{ url:"images/showcase-home-2.jpg",
description:"just select a target and a list of images" },
{ url:"images/showcase-home-3.jpg",
description:"css or json objects, you choose. Define everything (nearly)" },
{ url:"images/showcase-home-4.jpg",
description:"you can define your own ease function" }],
navigator: {
position:"top-left",
orientation:"vertical",
css: {
padding:"6px",
margin:"25px 0px 0px 0px" }
},
titleBar: { css: { height:"25px" } }
});
});
サポートブラウザ
以下のブラウザで動作確認がされているようです。
- Firefox 3.5+
- Safari 4.0.4
- Opera 10.10
- IE 7 & 8
- Chrome 3.0.195
jQuery Masonryはオープンソースのレイアウト用プラグインです。垂直方向の高低差を最小限にする事ができるようで,
雑誌風のレイアウトを作る際に便利かもしれません。
以下のようなコードで簡単に設置できます。
<script>
$('#wrapper').masonry({ singleMode: true });
</script>
ただし、画像ファイルを表示する際には以下のような指定をいれなければいけないとの事。
<script>
$('window').load(function(){
$('#wrapper').masonry({ columnWidth: 200 });
});
</script>
横幅の指定方法などの各種オプションを設定する事で見栄えを調整する事ができるそうです。
divを複数並べるだけで見栄えをそろえてくれるため、使い方によっては非常に便利なのではないでしょうか。
ライセンスはGPL と MITのデュアルライセンスとの事。興味のある方はぜひ使ってみてください。
Animate CSS Rotation and Scaleを使用すると、どんなHTMLでも回転させる事ができるようになります。
って、どこで使うんだろう。誰かのヒントになればって事でご紹介。
使い方
まずは、jQueryとプラグインを読み込みます。
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-css-transform.js" type="text/javascript"></script>
<script src="jquery-animate-css-rotate-scale.js" type="text/javascript"></script>
その後に、プラグインを有効化すれば動作するようです。
<script>
setInterval(
function () {
$('#at_ex1').animate({rotate: '+=10deg'}, 0);
},
200
);
$('#at_ex1').click(
function () {
$(this).animate({scale: '+=0.33'}, {queue: false, duration: 1000});
}
);
</script>
Google Mapを回転させる
このプラグインを使ってGoogleMapを回転させている方がいました。
デモはこちら
‘L’と’R'キーを使用して、地図を回転させる事ができます。
こんな事もできるんですね。
jQuery GPSはGoogle Map上でナビをしてくれるプラグインです。
サイトにはデモがあるのでそちらを見てもらって方が早いかもしれません。
詳しい道案内を表示
例えば出発地に「Tokyo」、到着地に「Kanagawa」と入力すると移動方法を案内してくれます。
まだ出発、到着地置の日本語入力には対応していないようです。これからが楽しみなプラグインですね。
Uniformはセクシーなフォームが作れるjQuery用のプラグインです。
チェックボックス、ドロップダウンメニュー、ラジオボタン、ファイルアップロードフォームの見た目を変える事が可能になっています。
特に画像アップロードはiPhone風でかっこよいですね。
詳しくは以下
Formwizardはウィザード形式のフォームが作れるjQueryのプラグインです。
アンケートフォームなどで、複数のフォームを何度も入力させるパターンを作るのに便利そうです。
「次へ」ボタンを押した際に入力チェックを行う事も可能になっているため、サーバーサイドの作り込みが楽になると思います。
ウィザード形式のフォームを作られている方、一度ためしてみてはいかがでしょうか。
Meerkatはページ内に広告を挿入する際に使えるjQueryのプラグインです。
ページを表示した際に、トップかフッターに広告を表示する事が可能になってます。Cookieを使用する事で2回目以降は表示しないなどの調整もできるとの事。
サイトにはデモがあるので、興味のある方は確認してみてください。
スプラッシュページのような使い方もできるようです。
TipTipはシンプルでスタイリッシュなToolTipを表示する事ができるjQueryのプラグインです。
要素にマウスオーバーした際にToolTipを表示する事ができ、表示位置を上下左右から指定する事もできるようです。
ツールチップのデザインはすべてCSSで指定されているようですので、カスタマイズも簡単にできそうです。
詳しくは以下
Brosho Pluginはサイト上でCSSの設定を変更して、一瞬で変更内容を確認できるjQueryのプラグインです。
Firebugのような機能をイメージしてもらうとわかりやすいかと思います。エディタとブラウザを交互に表示する必要が無くなるので、コーディングする際に便利かもしれません。
サイトにはデモがあるので動きを確認する事ができます。
画面の文字にマウスオーバーすると赤い枠線が表示され、クリックすると画面下部のフォームでCSSを編集する事が可能です。
こういったプラグインで開発がスピードアップできると良いですね。
自社CMSに組み込んで使ってもおもしろそうです。
0