Tiny jQuery Image Gallery Plugin For Mobile Devices - imageFlip

imageFlip is a jQuery and jQuery mobile based plugin that enables you to create a simple image gallery that supports Swipe, Gesture, and button navigation. It is specifically designed for mobile devices but can also work on desktop. Please resize the window of your browser to see it in action.

Related plugins:

• Touch Friendly Mobile Gallery Plugin with jQuery and CSS3 - touchTouch
• Image Gallery For Mobile Devices - PhotoSwipe

How to use it:

1. Include required jQuery library, jQuery mobile and jQuery imageFlip on the page

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="js/imageflip.mini.js"></script>

2. The HTML

<div data-role="page" id="home" data-theme="c" data-title="imageFlip Demo">
<div data-role="header" data-theme="d" id="header">
</div>
<div data-role="content" id="content">
<div class="content-primary">
<ul id="iGallery">
<li><a href="images/4f7d341e82ba1.jpg"><img src="images/_4f7d341e82ba1.jpg" /></a></li>
<li><a title="Add Image discription to Title Attribe of A tag to display in here" href="images/4f7d363cb2236.jpg"><img src="images/_4f7d363cb2236.jpg" /></a></li>
<li><a href="images/4f7d386046e12.jpg"><img src="images/_4f7d386046e12.jpg" /></a></li>
<li><a href="images/4f506f7a8ef30.jpg"><img src="images/_4f506f7a8ef30.jpg" /></a></li>
<li><a href="images/4f975e2862141.jpg"><img src="images/_4f975e2862141.jpg" /></a></li>
<li><a href="images/4f85120f97815.jpg"><img src="images/_4f85120f97815.jpg" /></a></li>
<li><a href="images/4f85134ae2c05.jpg"><img src="images/_4f85134ae2c05.jpg" /></a></li>
<li><a href="images/4f828774366b1.jpg"><img src="images/_4f828774366b1.jpg" /></a></li>
<li><a href="images/4fce4e99213b5.jpg"><img src="images/_4fce4e99213b5.jpg" /></a></li>
</ul>
</div>
</div>
</div>

3. The CSS

#imageflippage {
background-color: #000;
margin: 0px;
padding: 0px;
border: none;
height: 100%;
width: 100%
}
#tadcontent {
padding: 0px;
margin: 0px;
position: relative;
background: #000;
height: 100%;
width: 100%;
}
#imageflipimg {
vertical-align: middle;
height: 100%;
width: 100%;
z-index: 98;
background-position: center;
background-size: contain;
text-align: center;
background-repeat: no-repeat
}
#imagefliper {
width: 100%;
top: 45px;
bottom: 0px;
position: absolute;
z-index: 99
}
#tadnavi {
position: fixed;
top: 0px;
z-index: 100;
width: 100%;
opacity: 0.7;
display: none
}
#tadinfo {
position: fixed;
display: none;
bottom: 0px;
width: 100%;
padding: 5px;
background-color: #333333;
opacity: 0.7;
color: #FFFFFF;
text-align: center;
font-size: small;
font-family: Verdana, Geneva, sans-serif
}

4. Call the plugin

<script type="text/javascript">
$( document ).delegate("#home", "pageinit", function() {
	$('#iGallery').imageflip()
})
</script>

---

This awesome jQuery plugin is developed by cflove. For more Advanced Usages, please check the demo page or visit the official website.