jQuery Carousel Image Gallery with Cover-flow Effect - jqcarousel
File Size: | 2.56 MB |
---|---|
Views Total: | 25801 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

jqcarousel is a jQuery plugin for creating a 'cover flow' like image gallery with infinite rotation support. Click the 'centered' image will enlarge it in a modal box with a close button. Also comes with lots of options & methods to customize the carousel image gallery to suit for your needs.
Basic Usage:
1. Include the required jQuery & jQuery UI javascript libraries in the page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
2. Make sure to include the jqcarousel.js after jQuery library.
<script src="src/jqcarousel.js"></script>
3. Wrap the images in a wrapper.
<div id="gallery"> <img src="images/1.png" alt="" /> <img src="images/2.png" alt="" /> <img src="images/3.png" alt="" /> ... </div>
4. Call the plugin with default settings.
<script type="text/javascript"> $(window).load(function () { $('#gallery').jqcarousel(); }); </script>
5. Available options.
// Setting carousel's eccentricity. eccentricity: 0.99 // Setting carousel's focus distance. focus: 300 // Setting the duration of the images rotation. animationDuration: 700 // Setting if the opacity of the images during the rotation is going to be changed. opacity: true // Setting if the size of the images during the rotation is going to be changed. resize: true // Setting the angle of the carousel. angle: 0 // Setting the minimum opacity of the images. // This property is useful only if the opacity property is true. minOpacity: 0.2 // Setting ratio which is going to control the minimum size of the images. // This property is useful only if resize property is true. minSizeRatio: 0.3 // Setting if the keyboard navigation is enabled. keyboardNavigation: true // Setting the maximum size of the images into the carousel. imageWidth: 300 // Setting the carousel rotation direction. // Possible values are 'shortest', 'cw', 'ccw'. direction: 'shortest' // Setting the size of the enlarged image. enlargeWidth: 500 // Setting the duration of the enlargement. enlargeDuration: 200 // Setting the duration of closing the enlarged image. closeDuration: 250 // Setting the size of the close button. closeButtonSize: 30 // Setting if the image could be enlarged. enlargeEnabled: true // Setting the offset of the elnarged image. enlargedOffset: [0, 0]
Change log:
2015-01-07
- update.
This awesome jQuery plugin is developed by mgechev. For more Advanced Usages, please check the demo page or visit the official website.