A light weight jQuery plugin to implement flick gallery for smart phone.
Main features of this plugin are:
- Light weight. (3.2k)
- Designer friendry. (HTML based)
This plugin cannot do:
- Vertical flick scroll (who ever wants?)
- Auto scroll 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 download this project.
Only 3 steps!
<div class="yourElement"><!-- Main container -->
<div class="container"><!-- Flickable element (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 others (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 element (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. |
lockDirection | false | When you start dragging on one axis the other is locked and you can keep dragging only in two directions (up/down or left/right). (refer to: iScroll) |
scrollMargin | 0 | untile you drag this pix size, scroll does not start. If you use lockDirection, set this option. |
vsnap | false | set true to snap to container element vertically. |
Dual licensed under the MIT and GPL licenses:
http://www.opensource.org/licenses/mit-license.php
http://www.gnu.org/licenses/gpl.html