jGlycy:JavaScriptを記述せずjQueryのプラグインやエフェクトを実装させてみる



巷にある様々なjQueryプラグインをJavaScriptの記述をする必要なく、
htmlタグだけで実装できるフレームワーク?みたいです。

1.読み込むJs

今回はjglycy-1.0.js以外に、
画像の切り替わりと切り替わりの際にイージングを実装させるため、
jquery.cycle.all.jsとjquery.easing.min.jsを読み込んでます。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="jglycy-1.0.js"></script>
<script src="jquery.cycle.all.js"></script>
<script src="jquery.easing.min.js"></script>

2.HTMLの記述例

フェードイン/フェードアウトとズームインで画像を切り替えてみます。

<!--フェードイン/フェードアウトで画像を切り替え-->
<div style="height: 300px; width: 300px; padding: 0; margin: 0; float:left;" jg="cycle">
<img src="i1.jpg" width="300" height="300" />
<img src="i2.jpg" width="300" height="300" style="display:none;" />
<img src="i3.jpg" width="300" height="300" style="display:none;" />
</div>

<!--ズームインで画像を切り替え-->
<div style="height: 300px; width: 300px; padding: 0; margin: 0; float:left;" jg="cycle" jg:cycle="fx:'zoom',delay:-2000">
<img src="i1.jpg" width="300" height="300" />
<img src="i2.jpg" width="300" height="300" style="display:none;" />
<img src="i3.jpg" width="300" height="300" style="display:none;" />
</div>

JavaScriptを記述せずjQueryのプラグインやエフェクトを実装させたデモページ

ソース元:Be happy with jGlycy [jGlycy]

細かい部分で色々調整と融通が効けば、
JavaScriptが得意で無い人にとって良いですよね。