Coverflow Add-on
Animated coverflow-style image gallery component
The Coverflow component is an animated image gallery which uses CSS3 3D effects of the jQuery Flipster Addon (https://github.com/drien/jquery-flipster).
Features:
- 3D CSS effects
- imageSelectionListener fires in every client-side navigation
- adjust max image size
- this add-on loads jquery-1.11.2.min.js
Known issues:
- The CoverFlow#maxSize() method accepts values bigger than the actual available space of the element on client side. This causes the images to be that large that the images are (a) larger than the coverflow component itself and (b) navigation may not be possible because the main image covers the next right image. It is planned to change this behavior in a future release.
- Mixing images with different aspect ratios may also cause space and navigation problems so far
Roadmap:
- set the selected image element from server side
- add image click listener
- optimize rendering size of the images (maybe automate it to a percentage value)
Sample code
// create url list final List<String> imgUrls = new ArrayList<String>(); // fill list with http URLs // Initialize the coverflow final CoverFlow coverFlow = new CoverFlow(imgUrls); coverFlow.setCoverflowStyle(CoverflowStyle.CAROUSEL); coverFlow.setMaxImageSize(300); layout.addComponent(coverFlow);
// add image selection listener coverFlow.addImageSelectionListener( new ImageSelectionListener() { @Override public void onImageSelection(final ImageSelectionEvent event) { Notification.show("Selected Element: " + event.getSelectedIndex() + " " + event.getUrl()); } }; );
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Initial version
- Released
- 2015-04-25
- Maturity
- BETA
- License
- MIT License
Compatibility
- Framework
- Vaadin 7.4+
- Browser
- Firefox
- Opera
- Safari
- Google Chrome
- Internet Explorer
- Internet Explorer
- Internet Explorer
Coverflow Add-on - Vaadin Add-on Directory
Animated coverflow-style image gallery componentThe Coverflow component is an animated image gallery which uses CSS3 3D effects of the jQuery Flipster Addon (https://github.com/drien/jquery-flipster).
Features:
- 3D CSS effects
- imageSelectionListener fires in every client-side navigation
- adjust max image size
- this add-on loads jquery-1.11.2.min.js
Known issues:
- The CoverFlow#maxSize() method accepts values bigger than the actual available space of the element on client side. This causes the images to be that large that the images are (a) larger than the coverflow component itself and (b) navigation may not be possible because the main image covers the next right image. It is planned to change this behavior in a future release.
- Mixing images with different aspect ratios may also cause space and navigation problems so far
Roadmap:
- set the selected image element from server side
- add image click listener
- optimize rendering size of the images (maybe automate it to a percentage value)
Author HomepageIssue Tracker
Source Code
Online Demo
Coverflow Add-on version 1.0.0
Initial version