Multiple pictures display, slide show of pictures

Support
#1

In CUBA, Can I embed more than one picture and show them one by one or slide show which is typically used in product catalogs?

#2

Hi,

As the simplest solution, you can use Embedded component and set new image by clicking on buttons or by a timer.

For example:


<hbox id="sliderBox" spacing="true">
    <linkButton id="prevBtn" icon="font-icon:CARET_LEFT" 
                             invoke="prevImage" align="MIDDLE_LEFT"/>
    <embedded id="image" width="480px" height="270px"/>
    <linkButton id="nextBtn" icon="font-icon:CARET_RIGHT" 
                             invoke="nexImage" align="MIDDLE_RIGHT"/>
</hbox>


@Inject
private Embedded image;

private List<String> images = Arrays.asList(
        "theme://images/1.jpg",
        "theme://images/2.jpg",
        "theme://images/3.jpg",
        "theme://images/4.jpg",
        "theme://images/5.jpg"
);

private int index = 0;

@Override
public void init(Map<String, Object> params) {
    updateImage();
}

private void updateImage() {
    image.setSource(images.get(index));
}

public void prevImage() {
    index = --index >= 0 ? index : images.size() - 1;
    updateImage();
}

public void nexImage() {
    index = ++index < images.size() ? index : 0;
    updateImage();
}

In this sample, I use images from theme resources, but with Embedded component you can use URL and FileDescriptiors.

You can use some JavaScript Slider component to show images from theme resources. Or you can use some Vaadin add-on for that purpose.

The full source code of my sample hosted on github.

Regards,

Gleb

#3

Thank you Gleb. Do you mind showing how to use image files from database in this slider?
Say for example, i have an entity name Product and image entity ProductImages that holds multiple image of the product.