Create jQuery coverflow with CSS 3 transitions: 2 demos
The jQuery coverflow plug-in
The coverflow plug-in, which is based on jQuery, is an easy way for creating coverflow in your website for the photographs, professional work presentation like web design, or other documents that can be viewed by using keyboard navigation, mouse click or mouse wheel, and swipe / tap.
FYI, the coverflow is a concept implemented on iTunes, as a third party add-on and later purchased by Apple. This appeared not only in iTunes but other Apple products like Max OS as well. The contents of a folder are displayed as large thumbnails that float on a background.
See the section below for creating the coverflow for your website by using the jQuery plug-in. Later, I will explain how you may set up this plug-in along with different options.
A demo of coverflow with photographs
In this example, a few images are used in the coverflow. You may navigate by using the keyboard left/right, up/down and home/end keys. You may also use the mouse click or wheel and if you are using a smart phone/mobile, try tapping to navigate:
See online demo and code
The script used for this example after including the reference files (jQuery, plug-in):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<script> $(function() { /* CD covers */ if ($.fn.reflect) { $('.image-coverflow .cover').reflect(); } $('.image-coverflow').coverflow({ easing: 'easeInQuad', duration: 600, index: 3, width: 320, height: 240, visible: 'density', selectedCss: { opacity: 0.8 }, outerCss: { opacity: .1 }, change: function(event, cover) { var img = $(cover).children().andSelf().filter('img').last(); $('#image-title').text(img.data('name') || 'unknown'); } }); }); </script> |
The markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<h1>Coverflow</h1> A demo of coverflow by using jQuery using CSS 3 transformations! <h3>Photographs</h3> <div class="image-coverflow" autofocus> <img class="cover" data-name="Mango" src="images/mango-2.jpg"/> <img class="cover" data-name="Banana" src="images/banana-2.jpg"/> <img class="cover" data-name="Aurora Borealis" src="images/aurora.jpg"/> <img class="cover" data-name="Barbecued steak" src="images/barbecue.jpg"/> <img class="cover" data-name="Black swan" src="images/strawberries-2.jpg"/> <img class="cover" data-name="Fire" src="images/fire.jpg"/> <img class="cover" data-name="Keyboard" src="images/keyboard.jpg"/> <img class="cover" data-name="Rose" src="images/rose.jpg"/> <img class="cover" data-name="Currant" src="images/currant-2.jpg"/> </div> <div id="photos-info"> <div id="image-title"></div> </div> |
The CSS is also used for styling the demo that you can see on the demo page along with the functional code.
In the script section, the following options are used for specifying the behavior of coverflow:
- The easing option is used that can be any value available from jQuery-ui here e.g. linear, swing, easeIn, easeOut etc..
- The duration specifies the speed of the animation. I have used a numeric value in milliseconds. You may use slow, normal or fast as well.
- The index specifies the item in focus as the webpage with coverflow loads.The index starts at 0.
- Similarly, a few other options like height and width are also given. You may read the full available options with details here. Also, you may download the plug-in from the given link.
A demo of using numbers in coverflow
For the demo purpose that you may use different content types in the coverflow, the numbers from 1 to 15 are used in this example.
Apart from that, a few buttons are given for certain actions like move first, last and to a specific number by clicking the respective buttons. Have a look at the demo by clicking the link or image below:
See online demo and code
The markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<h3>Number selector</h3> <div style="position:absolute;background:rgba(255,255,255,.75);z-index:1000;padding:10px"> <button id="first" class="btn-primary btn-lg">Go to 1</button> <button id="goto5" class="btn-warning btn-lg">Go to #5</button> <button id="last" class="btn-primary btn-lg">Go to 15</button> <br/><label for="keyboard"><input type="checkbox" id="keyboard" checked/>Keyboard</label> <br/><label for="click"><input type="checkbox" id="click" checked/>Click/tap</label> <br/><label for="wheel"><input type="checkbox" id="wheel" checked/>Scroll wheel</label> </div> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <div class="coverflow"> <div class="cover">1</div> <div class="cover">2</div> <div class="cover">3</div> <div class="cover">4</div> <div class="cover">5</div> <div class="cover">6</div> <div class="cover">7</div> <div class="cover">8</div> <div class="cover">9</div> <div class="cover">10</div> <div class="cover">11</div> <div class="cover">12</div> <div class="cover">13</div> <div class="cover">14</div> <div class="cover">15</div> </div> |
The script:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<script> $(function() { // Numbers $('.coverflow').coverflow(); $('#first').click(function() { $('.coverflow').coverflow('index', 0); }); $('#last').click(function() { $('.coverflow').coverflow('index', -1); }); $('#goto5').click(function() { $('.coverflow').coverflow('index', 5-1); // zero-based index! }); $('#keyboard').click(function() { $('.coverflow').coverflow('option', 'enableKeyboard', $(this).is(':checked')); }); $('#wheel').click(function() { $('.coverflow').coverflow('option', 'enableWheel', $(this).is(':checked')); }); $('#click').click(function() { $('.coverflow').coverflow('option', 'enableClick', $(this).is(':checked')); }); }); </script> |
Setting up this coverflow jQuery plug-in
After downloading the plug-in from the Github website, include the reference files as shown in the demo pages.
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.js”></script>
<!– Optional: Reflection –>
<script type=”text/javascript” src=”js/coverflow/reflection.js”></script>
<!– interpolate, depends on jQ 1.8.0+ –>
<script src=”js/coverflow/jquery.interpolate.min.js”></script>
<!– Coverflow –>
<script src=”js/coverflow/jquery.coverflow.js”></script>
Specify the options in the script section as per requirement.
Credit: vanderlee