3D Carousel

Er bestaat een open source script van Hoang Tran waarbij afbeeldingen als een 3D carrousel worden voorgesteld. Misschien niet de meest praktische voorstelling (voor veel afbeeldingen), maar zeker één van de mooiste.

De script heb ik bewerkt en aangepast voor Drupal. Ze is nu multidevice en multibrowser responsive. Ik heb er geen module van gemaakt omdat het best wordt weergegeven in fullscreen. Je moet dus de onnodige blokken van je thema verbergen daarvoor. Het werkt ook met deze blokken, maar is niet zo mooi. 

Ik maak gebruik van twigs in een veld en heb daarvoor volgende modules geïnstalleerd. 

De script die ik je geef (onderaan) neemt van een bepaald inhoudstype in een bepaald afbeeldingsveld, alle afbeeldingen en linkt naar de respectievelijke nodes. Je kunt het inhoudstype en afbeeldingsveld ook rechtstreeks in de code aanbrengen. Er is ook een mogelijkheid om een tekstje in het centrum van het carrousel aan te brengen. 

 

Plak onderstaande script in een twigveld en stel de parameters in... Er zijn maar en paar zaken die je moet instellen.. De CSS kan je natuurlijk altijd ook personaliseren.

  <style>     
      /* zet achtergrond voor Adaptive Theme */
     html, #rid-content ,#main-content{
      background-color:#010b16 !important;
     }
      
     #masthead,#rid-navbar{
      display:none;
      }

      #drag-container,
      #spin-container { 
       
        /* for touch screen */
        touch-action: none;
      
        position: relative;
        top:1.5em;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin: auto;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transform: rotateX(-10deg);
        transform: rotateX(-10deg);
        z-index:99;
     
       
      }

      #drag-container img,
      #drag-container video {
    
      
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        line-height: 200px;
        font-size: 50px;
        text-align: center;
        -webkit-box-shadow: 0 0 8px #fff;
        box-shadow: 0 0 8px #fff;
        -webkit-box-reflect: below 10px
          linear-gradient(transparent, transparent, #0005);
      }

      #drag-container img:hover,
      #drag-container video:hover {
        -webkit-box-shadow: 0 0 15px #fffd;
        box-shadow: 0 0 15px #fffd;
        -webkit-box-reflect: below 10px
          linear-gradient(transparent, transparent, #0007);
      }

      #drag-container p {
        font-family: Serif;
        position: absolute;
        top: 100%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%) rotateX(90deg);
        transform: translate(-50%, -50%) rotateX(90deg);
        color: #fff;
      }

      #ground {
        width: 100%;
        height: 100%;
       
        position: absolute;
        top: 100%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%) rotateX(90deg);
        transform: translate(-50%, -50%) rotateX(90deg);
        background: -webkit-radial-gradient(
          center center,
          farthest-side,
          #9993,
          transparent
        );
      }

      
      @-webkit-keyframes spin {
        from {
          -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
        }
        to {
          -webkit-transform: rotateY(360deg);
          transform: rotateY(360deg);
        }
      }

      @keyframes spin {
        from {
          -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
        }
        to {
          -webkit-transform: rotateY(360deg);
          transform: rotateY(360deg);
        }
      }
      @-webkit-keyframes spinRevert {
        from {
          -webkit-transform: rotateY(360deg);
          transform: rotateY(360deg);
        }
        to {
          -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
        }
      }
      @keyframes spinRevert {
        from {
          -webkit-transform: rotateY(360deg);
          transform: rotateY(360deg);
        }
        to {
          -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
        }
      }
    </style>

<div style="color:white;cursor:pointer;font-size:2em;" onclick="history.back()"> &#8592; </div>
    <div id="drag-container">      
    <div id="spin-container">


{# assuming highest node id is around 500, else change. No problem with higher values #}
{% set highest_nid = 500 %}


{% set field_name = node.field_3d_carousel_view_image_fie.value|trim %}
{% set content_type = node.field_3d_carousel_view_content_t.value|trim %}


{% for nid in 0..highest_nid %}
{% set zoeknode = bamboo_load_entity('node', nid) %}
{% if zoeknode.bundle == content_type %}
{% set titel = zoeknode.title.value %}
{% set afbeeldingen = drupal_field(field_name, 'node', nid, {type: 'image_url', settings: {image_style: '3d_carousel_images'}}) %}
    
{% set x = 0 %} 
   {% for afbeelding in afbeeldingen %}
     {% if afbeeldingen[x] is not empty %}
         <img  
        style="cursor:pointer;" onclick="location.href='/node/{{nid}}'"
        alt="{{ titel }}" title="{{ titel }}" src="{{ afbeeldingen[x] }}"
        >   
    {% endif %}
    {% set x = x + 1 %}
    
   {% endfor %}
{% endif %}
{% endfor %}
     
      <!-- Text at center of ground -->
        <h2>{{ node.title.value }}</h2>
      </div>
      <div id="ground"></div>
    </div>


    <script>
      // Author: Hoang Tran (https://www.facebook.com/profile.php?id=100004848287494)
      // Github verson (1 file .html): https://github.com/HoangTran0410/3DCarousel/blob/master/index.html

      // You can change global variables here:
     
      var autoRotate = true; // auto rotate or not
      var rotateSpeed = -60; // unit: seconds/360 degrees
      
      var imgWidth = 130; // width of images (unit: px)
      var imgHeight = 170; // height of images (unit: px) 
      var radius = 350; // how big of the radius
      
      if (window.matchMedia("(max-width: 890px)").matches) { 
      var imgWidth = 90; // width of images (unit: px)
      var imgHeight = 120; // height of images (unit: px) 
      var radius = 290; // how big of the radius
      }
      
      if (window.matchMedia("(max-width: 590px)").matches) { 
      var imgWidth = 65; // width of images (unit: px)
      var imgHeight = 95; // height of images (unit: px) 
      var radius = 195; // how big of the radius
      }
      if (window.matchMedia("(max-width: 420px)").matches) {      
      var imgWidth = 50; // width of images (unit: px)
      var imgHeight = 75; // height of images (unit: px)  
       var radius = 135; // how big of the radius
      }
      
      
      
     setTimeout(init, 100);
     
      var odrag = document.getElementById("drag-container");
      var ospin = document.getElementById("spin-container");
      var aImg = ospin.getElementsByTagName("img");
      var aVid = ospin.getElementsByTagName("video");
      var aEle = [...aImg, ...aVid]; // combine 2 arrays
       
      // Size of images
      ospin.style.width = imgWidth + "px";
      ospin.style.height = imgHeight + "px";

      // Size of ground - depend on radius
      var ground = document.getElementById("ground");
      ground.style.width = radius + "px";
      ground.style.height = radius + "px";

     
      
      
      function init(delayTime) {
        for (var i = 0; i < aEle.length; i++) {
          aEle[i].style.transform =
            "rotateY(" +
            i * (360 / aEle.length) +
            "deg) translateZ(" +
            radius +
            "px)";
          aEle[i].style.transition = "transform 1s";
          aEle[i].style.transitionDelay =
            delayTime || (aEle.length - i) / 6 + "s";
        }
      }

      function applyTranform(obj) {
        // Constrain the angle of camera (between 0 and 180)
        if (tY > 180) tY = 180;
        if (tY < 0) tY = 0;

        // Apply the angle
        obj.style.transform = "rotateX(" + -tY + "deg) rotateY(" + tX + "deg)";
      }

      function playSpin(yes) {
        ospin.style.animationPlayState = yes ? "running" : "paused";
      }

      var sX,
        sY,
        nX,
        nY,
        desX = 0,
        desY = 0,
        tX = 0,
        tY = 10;

      // auto spin
      if (autoRotate) {
        var animationName = rotateSpeed > 0 ? "spin" : "spinRevert";
        ospin.style.animation = `${animationName} ${Math.abs(
          rotateSpeed
        )}s infinite linear`;
      }

      

      // setup events
      document.onpointerdown = function(e) {
        clearInterval(odrag.timer);
        e = e || window.event;
        var sX = e.clientX,
          sY = e.clientY;

        this.onpointermove = function(e) {
          e = e || window.event;
          var nX = e.clientX,
            nY = e.clientY;
          desX = nX - sX;
          desY = nY - sY;
          tX += desX * 0.1;
          tY += desY * 0.1;
          applyTranform(odrag);
          sX = nX;
          sY = nY;
        };

        this.onpointerup = function(e) {
          odrag.timer = setInterval(function() {
            desX *= 0.95;
            desY *= 0.95;
            tX += desX * 0.1;
            tY += desY * 0.1;
            applyTranform(odrag);
            playSpin(false);
            if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) {
              clearInterval(odrag.timer);
              playSpin(true);
            }
          }, 17);
          this.onpointermove = this.onpointerup = null;
        };

        return false;
      };

      document.onmousewheel = function(e) {
        e = e || window.event;
        var d = e.wheelDelta / 20 || -e.detail;
        radius += d;
        init(1);
      };
  
      
     
$(window).resize(function(){       
       
         window.location.href=window.location.href;   
  
      
     
    });
      
      
    </script>