1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

[progress News] [progress Openedge Abl] Easy Image Carousels With Rollbase And Kendo Ui

Discussion in 'Progress Blog' started by Thierry Ciot, Feb 16, 2017.

Thread Status:
Not open for further replies.
  1. Thierry Ciot

    Thierry Ciot Guest

    Learn how to use the Rollbase Kendo UI built-in image carousel without any programming, and then how to customize the carousel's data source to provide images from any location.

    Get Your No-code Carousel


    It's easy to get a carousel on your page with Rollbase. Simply configure a couple of image fields in your object; Rollbase will automatically group the images into an image carousel. The carousel is rendered where you have dragged the first image field on the page.

    The carousel is automatically responsive on any mobile devices. On desktop, you can configure it to have a fixed size or to be responsive; when responsive, you can even specify a maximum width beyond which the carousel will not expand.

    Finally, the height of the carousel is automatically computed based on the first image's aspect ratio (or proportions).

    Here is an example for a travel application:

    [​IMG]

    Creating a Custom Carousel




    What if you want to render images from other sources than image fields in your object?

    Well, with a minimum of standard JavaScript programming, you can instantiate the Rollbase carousel object with your own data source containing an array of URLs for the images to render on carousel. This gives you complete control of what to render—and how to render. Let’s look at the few lines of code you will need to go about it:

    Creating the data source:

    01.
    function createCarouselDataSource(){
    02.
    var allImages = [];
    03.
    var baseUrl = "http://www.comoestaeso.com/cams/cam7cee/marias000";
    04.
    var postFix = ".jpg";
    05.
    for ( var i=1; i<=nbrImg; i++ ) {
    06.
    var oneImg = {};
    07.
    oneImg['imageURL'] = baseUrl + i + postFix;
    08.
    allImages[i-1] = oneImg;
    09.
    }
    10.
    var dataSource = {
    12.
    isResponsive: true,
    13.
    maxWidth: "650px",
    14.
    fieldName: "myCustomCarousel1",
    15.
    allImgs: allImages
    16.
    };
    17.
    return dataSource;
    19.
    }


    The data source lets you control the list of images you want to render (See lines 5 to 9). You can also control the responsive behavior on desktop and, when responsive, the max width to expand to (line 12 and 13).

    Note: if you actually use this code, the images are from a live web cam and depending on your time zone you may get a black image because it's night time there :).


    The second step consists of instantiating the carousel:

    1.
    var dataSource = createCarouselDataSource();
    2.
    var carouselContainerEl = $("#imgCarouselContainerId");
    3.
    var carousel = rb.newui.sections.ImageCarouselGenerator();
    4.
    carousel.append(null, dataSource, carouselContainerEl);


    You simply create the object (line 2) and then render it with the data source as well as the jQuery container element in which we want the carousel to appear.

    That’s all there is to it. Here is how it renders on desktop:


    [​IMG]


    Here's how it renders on a smartphone:


    [​IMG]

    Add and Customize a Carousel in Minutes


    In conclusion, as you could see, it is very easy to add an image carousel with just point and click configuration. Rollbase also provides a high control solution where with a few lines of JavaScript you can program images carousels with images from anywhere.

    PS: If you want to try these carousels in a Rollbase app, feel free to post a comment or send a note and I'll send you a complete and installable Rollbase app. Or if you have access to eap.rollbase.com, you can pick it up from the marketplace.

    New to Rollbase and want to find out more? You can learn more about Rollbase here, or start a free trial below.


    Try Rollbase Now

    Continue reading...
     
  2.  
Thread Status:
Not open for further replies.

Share This Page