A light weight jQuery plugin to implement flick gallery for smart phone.
Main features of this plugin are:
- Light weight. (3.4k)
- Designer friendly. (HTML based)
This plugin cannot do:
- Vertical flick scroll (who ever wants?)
- Auto scrolling with timer. This will need a lot of options that I don't like.
Here is a quick demo.
http://stakam.net/jquery/flickgal/demo
Tested on iOS Safari and Android 4.0. PC browsers? Yeah. IE? Na.
Right click on this link or you can just clone this project.
Only 3 steps!
<div class="yourElement"><!-- Main container -->
<div class="container"><!-- Flickable elements container (required) -->
<div class="containerInner"><!-- (required) -->
<div id="sea01" class="item"><img alt="" src="images/sea/01.jpg" /></div><!-- must have `item' for class name -->
<div id="sea02" class="item"><img alt="" src="images/sea/02.jpg" /></div>
<div id="sea03" class="item"><img alt="" src="images/sea/03.jpg" /></div>
</div>
</div>
<div class="nav"><!-- Tab, indicator or something like that (optional) -->
<ul>
<li class="sea01"><a href="#sea01">・</a></li>
<li class="sea02"><a href="#sea02">・</a></li>
<li class="sea03"><a href="#sea03">・</a></li>
</ul>
</div>
<div class="arrows"><!-- Next and prev buttons (optional) -->
<span class="prev">Previous</span><!-- must have `prev' for className -->
<span class="next">Next</span><!-- must have `next' for className -->
</div>
</div>.yourElement .item { width: 200px } /* This is required if you have <img> element in .item element. */
.yourElement .moving {
/* You can change transition-duration of course. */
transition: transform .2s ease-out;
-webkit-transition: -webkit-transform .2s ease-out;
-moz-transition: -moz-transform .2s ease-out;
}<script src="./javascripts/jquery-1.4.3.min.js"></script>
<script src="./javascripts/jquery.flickgal.js"></script>
<script>
$(function(){
$(".yourElement").flickGal();
});
</script>$(function(){
$(".yourElement").flickGal({
infinitCarousel : false,
lockScroll : true
});
});| Options | Default value | Description |
|---|---|---|
| infinitCarousel | false | If true and you have prev/next elements, the last item slides to the first item and vise versa. |
| lockScroll | true | Lock horizontal scroll while sliding. If you have large images in .item element, you may want this fasle. |
FlickGal provides 3 custom events.
$(function(){
$(".yourElement").flickGal()
.on('fg_flickstart', function (e, index) {
// Emitted when a user starts flicking.
}).on('fg_flickend', function (e, index) {
// Emitted when a user ends flicking.
}).on('fg_change', function (e, index) {
// Emitted when the item on center changed.
});
});Copyright (c) 2012 Soichi Takamura (http://stakam.net/)
Dual licensed under the MIT and GPL licenses:
http://www.opensource.org/licenses/mit-license.php
http://www.gnu.org/licenses/gpl.html