img01 img02 img03 img04 img05 img06 img07 img08 img09 img010 img011 img012

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.stalactite.min.js"></script>
<script>
	$(window).load(function(){
		$('#stalactite .start').on('click', function(){
			$('#stalactiteDemo img').removeAttr('style');
			$('#stalactite .btn').text('むぅ..');
			$('#stalactiteDemo').stalactite({
				duration: 350,                        // Duration of animation.
				easing: 'swing',                      // Easing method.
				cssPrefix: '.stalactite',             // The css naming convention.
				cssPrep: true,                        // Should stalactite structurally modify css of children?
				fluid: true,                          // Should stalactite recalculate on window resize?
				complete: function(){
					$('#stalactite .btn').text('もう一度、ここを押してみたらどうだ?');
				}
			});
			$('#stalactiteDemo').fadeIn();
		}); 
	});
</script>
<button class="start yellow">ここを押してみたらどうだ!?</button>
<p id="stalactiteDemo">
	<img src="<PATH>/imgd01.jpg" alt="img01" />
	<img src="<PATH>/imgd02.jpg" alt="img02" />
	<img src="<PATH>/imgd03.jpg" alt="img03" />
	<img src="<PATH>/imgd04.jpg" alt="img04" />
	<img src="<PATH>/imgd05.jpg" alt="img05" />
	<img src="<PATH>/imgd06.jpg" alt="img06" />
	<img src="<PATH>/imgd07.jpg" alt="img07" />
	<img src="<PATH>/imgd08.jpg" alt="img08" />
	<img src="<PATH>/imgd09.jpg" alt="img09" />
	<img src="<PATH>/imgd10.jpg" alt="img010" />
	<img src="<PATH>/imgd11.jpg" alt="img011" />
	<img src="<PATH>/imgd12.jpg" alt="img012" />
</p>

stalactiteについて

stalactiteは、画像をジョジョに読み込んでいきながらタイル状に並べてくれるプラグインです。
見てるだけでもなかなか面白いプラグインです。ギャラリーサイトなどにどうでしょうか?
ちなみに、stalactiteとは、(鍾乳洞で上からつらら状にできる)鍾乳石という意味。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスApache v2
対応ブラウザ

関連するjQueryプラグイン

  • ImageLens

    ImageLens

    画像を虫眼鏡で見ているように拡大することができる

  • LazyLoad

    LazyLoad

    ページ内の画像読み込みを遅延させる

  • jQZoom

    jQZoom

    色々な方法で拡大画像を表示できる

  • simplyScroll

    simplyScroll

    シンプルな画像ギャラリーを設置できる

  • ImageScroller

    ImageScroller

    サムネイルをドラッグすることで大きな画像を見ることができる