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()"> ← </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>