Archive for the Category »jQuery «

写真の一覧表示に使える、写真をパネルのように貼り付けるスクリプト

jQueryやCSS3を利用したスクリプト。
写真を画面いっぱいに並べて表示できるかっこいいスクリプトです。

デモはこちら

画面の切り替え時もさりげなく広がっていく写真の数々。
豊富な写真を一目で見てもらうためには使ってみたいスクリプトですね。

Smooth Diagonal Fade Gallery with CSS3 Transitions

Smooth Diagonal Fade Gallery with CSS3 Transitions

Category: jQuery  Leave a Comment

これは使える!かっこいいトランジション効果で写真を切り替えるjQueryスライドショー

jqueryのスライドショー

様々なトランジション効果で写真を切り替えるjQueryベースのスライドショースクリプト。
切り替えのスピードからトランジション効果の設定までオプションも充実。
自動で切り替わるので、サイトのタイトルとかちょっとしたアクセントとしてスライドを入れたいときにお勧め。
取り付け方も簡単なので、ぜひ使ってみてください。

超簡単に説明。
スライドショーにさせたい画像を次のように好きなだけ配置。

<div id="container">
	<img src="image1.jpg" alt="image 1" width="500" height="250" />
	<img src="image2.jpg" alt="image 2" width="500" height="250" />
	<img src="image3.jpg" alt="image 3" width="500" height="250" />
	.
	.
	.
</div>

あと、スクリプトをページのどこかで読み込んでください。
</body>の前にでも置けばいいでしょう。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.panelgallery-2.0.0.js"></script>
<script type="text/javascript">
$(function(){
	$('#container').panelGallery();
});
</script>

それだけでとりあえずランダムなトランジションがかかったスライドショーが出来ます。
僕はPhotoshop,Illustratorチュートリアルのブログで使ってみました。

詳しい説明は控えますが、オリジナルサイト(英語)で詳しい使い方が解説されています。
※tweet数とかはてぶの数が増えそうなら詳しい説明入れようと思います。

jQuery Panel Gallery Plugin 2.0
デモはこちら、いろいろなパターンのスライドを試せます

ちなみに日本語で紹介されているページ
50以上のエフェクトから選べるベーシックなスライドギャラリーjQueryプラグイン