Adding a 3d slideshow to your drupal 8 website

Our goal is to create a block with an image 3d effect integrated view, so we can easily filter which images will be displayed. I chose cloud9carousel because it had the style we were looking for. You can check the default outlook here. 

The first step is creating the view with the name carousel3d. There is no need to change a lot. Just the fields, where I remove everything and add the field 'Image'. In the field-settings, I choose 'medium' as image style. This is optional and can be changed later on. Now I add a block and give it the machine name 'block3d'.

Done. I can place this block everywhere on the website that displays all kinds of images. Lastly I use Features to export the view carousel3d.

The next step is creating the custom module. I name it slideshow and it contains a slideshow.module, slideshow.libraries.yml, slideshow.info.yml a folder 'js' and a folder 'config'. The config folder contains a folder 'install' and there I put the views.view.carousel3d.yml that I exported via Features. When my module is installed, drupal will scan for the install folder and install everything in it automatically.

I need to add the js sources to the js folder. It contains the jquery.cloud9carousel.js from cloud9carousel and another js file slideshow.js.

slideshow.libraries.yml must define the js files that are included in this module. (I also included reflection.js because it adds reflections to the slideshow. But this is totally optional and is explained on cloud9carousel.)

slideshow:
  version: VERSION
  js:
    js/slideshow.js: {}
    js/jquery.cloud9carousel.js: {}
    js/reflection.js: {}
  dependencies:
    - core/jquery
    - core/jquery.once
    - core/drupal

slideshow.module must add the js from the library to the page. I use the hook page_attachments_alter. The path is 'modulename/libraryname'. Which are the same in this case.

function slideshow_page_attachments_alter(array &$attachments){

            $attachments['#attached']['library'][] = 'slideshow/slideshow';

}

Ive created the view, I've declared the js and added it to the website. Now I have to connect the two. This happens in the slideshow.js. I need to jquery the block that is created by drupal. The id begins with block-views-block-VIEWNAME-BLOCKNAME. Then I add a few cloud9carousel options including the itemClass. There I have to use 'field-content>img' to get images regardless of the resolution that is defined in carousel3d view. (The key 'mirror' belongs to the reflection.js and is optional.)

jQuery(document).ready(function ($) {
    var height = 150;
    var width = 600;
    var $block = $("[id^=block-views-block-carousel3d-block3d]");
    $block.css('visibility', 'hidden').Cloud9Carousel({
        autoPlay: 1,
        // bringToFront: true,
        itemClass: "field-content>img",
        farScale: 0.5,
        xRadius: width,
        yRadius: height,
        mirror: {
            gap: 12, /* 12 pixel gap between item and reflection */
            height: 0.2, /* 20% of item height */
            opacity: 0.4 /* 40% opacity at the top */
        },
        onLoaded: function () {
            // Show carousel
            $block.css('visibility', 'visible');
            $block.height(3 * height);
            $block.width(2 * width);
        }

    });
});

Now everything is done. After module installation, I can go to block layout and place my block carousel3d on where ever I like.

Programmer
Janis Bullert

Add new comment