2011年05月30日

jQuery:画像やテキストが自動で切り替わるプラグイン、InnerFade

ポップアップでスライドショーとかはよくあるのですが、だただた、画像やテキストが切り替わるものを探していたらちょうどいいのがあったので。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.innerfade.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
$('#list').innerfade({
animationtype: 'slide',
speed: 750,
timeout: 2000,
type: 'random',
containerheight: '1em'
});
}
);
</script>
<style type="text/css" media="screen, projection">
@import url(css/jq_fade.css);
</style>        


<ul id="list">
<li>
<a href="#n1">りんご</a>
</li>
<li>
<a href="#n2">みかん</a>
</li>
<li>
<a href="#n3">パイナップル</a>
</li>
</ul>

参考URL:
http://medienfreunde.com/lab/innerfade/
2011年05月26日

jQuery:live関数について

jQueryのlive関数はjQuery1.3からの機能で、登録されたイベントは、現在および将来的にも、セレクタにマッチする全ての要素に適用されます。
ですので、動的に後から追加されたlist等の要素に対してイベントを適用することが可能です。

○指定可能イベント
click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup

○サンプル

$("#item").live("click", function(){
 $(this).after("sample");
});

参考サイト:http://semooh.jp/jquery/api/events/live/type,+fn/
2011年05月19日

jQuery:様々なサイズの要素をfloatさせて整列させるプラグインjQuery Masonry

様々なサイズの要素をfloatさせて整列させることの出来るプラグイン「jQuery Masonry」を使ってみました。
今回、色々なサイズの画像を詰めて並べたいと思ったらこんなプラグインがありました!
導入も簡単なので使いやすかったです。

参考にさせていただいたページはこちら。
http://desandro.com/demo/masonry/docs/

まず、jquery.jsとjquery.masonry.jsをダウンローし、下記のように読み込みます。
そして、main.jsに導入用のソースを書きます。

・index,htmlの内容

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.masonry.js"></script>
<script type="text/javascript" src="js/main.js"></script>

・・・

<div id="item" class="wrap">
 <div class="box col1">
  <img src="'img_thumb.jpg'" alt="" width="150" />
 </div>
 <div class="box col1">
  <img src="'img_thumb.jpg'" alt="" width="150" />
 </div>
</div>

・style.cssの内容

.wrap {
    margin-bottom: 20px;
    clear: both;
}

.box {
    position: absolute;
    float: left;
}

.col1 {
    width: 150px;
    margin: 0 0 0 7px;
    padding: 0 0 10px 0;
}

.col1 img {
    max-width: 150px;
}

.wrap:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

・main.jsの内容

$(function(){
 columnMasonry();
});

function columnMasonry(){
 $('#item').masonry({
  columnWidth: 163,
  singleMode: true,
  animate: true
 });
}