Cover-flow Effect with Image Reflection Effect Using jQuery and jQuery UI - qpcoverflow

qpcoverflow is a simple jQuery & jQuery UI component that replicates the familiar cover flow effect with image reflection to scroll through an array of images.

How to use it:

1. Include the latest jQuery javascript library and jQuery UI in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

2. Include jQuery qpcoverflow plugin after jQuery library.

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

3. Create a container for the cover flow component.

<div id="coverflow"></div>

4. Initialize the plugin and add an array of images in the javascript.

<script type="text/javascript">
$(function(){
$('#coverflow').qpCoverflow({
items: 3,
width: 400,
images: [
'1.jpg', '2.jpg', '3.gif', '4.jpg', '5.gif',
'1.jpg', '2.jpg', '3.gif', '4.jpg', '5.gif',
'1.jpg', '2.jpg', '3.gif', '4.jpg', '5.gif',
]
});
});
</script>

5. Configurations.

<script type="text/javascript">
$(function(){
$('#coverflow').qpCoverflow({
start: 'auto',      // Index of the image that should be initial in the center (auto = Number of Pictures / 2) Default: 'auto'
width: "auto",      // Width of the cover flow (eg 400, '90% ',' auto ') Default:' auto '
height: 300,        // Height of Cover Flow (> = 50) Default: 300
items: 3,           // 2 - 10. Default: 3
itemMargin: 5,      // Distance between the images (0 .. 20) Default: 5
angle: 60,          // 0 - 75 degrees. Default: 60
grid: 5,            // 1 - 20. Default: 5
images: [ // array of image sources
'1.jpg', '2.jpg', '3.gif', '4.jpg', '5.gif',
'1.jpg', '2.jpg', '3.gif', '4.jpg', '5.gif',
'1.jpg', '2.jpg', '3.gif', '4.jpg', '5.gif',
]
});
});
</script>

---

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