Deze uiteenzetting is gebaseerd op de handleiding https://www.ostraining.com/blog/coding/jquery-flip/ en werd volledig herwerkt naar Drupal 8. Ik heb ook het omdraai-effect dubbel toegepast. Voor elke even of oneven afbeelding pas ik een andere 'flip' toe.

De view presenteert ook knap bij smartphones en tablets. IE toont de velden wel aan de achterkant bij klikken maar heeft geen flip effect.

Draaien rond de X-as

Bij de volgende figuur... draaien rond de Y-as.

De view

Maak eerst je view waarbij je minstens één afbeelding hebt en ook alle velden die je aan de achterkant wilt tonen. Ik heb hier ook nog een PHP veld toegevoegd (Views PHP module). Voorlopig is die niet nodig. Uitleg volgt straks.

Jacascript

1) Ga naar https://github.com/nnattawat/flip en haal er enkel de jquery.flip.min.js uit. Kopieer de code naar de JS injector (onderdeel van de Asset injector module). Beperk desnoods deze Javacript tot de overzichtspagina.

2) Ga naar https:https://code.jquery.com/jquery-2.1.4.min.js Kopieer dit naar de JS injector (onderdeel van de Asset injector module).  Beperk desnoods deze Javacript tot de overzichtspagina.

Merk op dat we deze keer ook de JQuery mee laden. Daarnet hadden we dit niet gedaan. We moeten dit maar 1 X laden op de pagina natuurlijk.

Je hebt nu 2 bestanden staan in je JS injector.

CSS

Met de CSS injector ga je nu ook de CSS aan de pagina toekennen. Deze CSS wordt toegepast, zoals je ziet, op de horizontale en verticale flip. Hier stel je dus ook de afmetingen in van je figuur. Ik heb een afbeeldingsstijl aangemaakt die ook deze afmetingen heeft. Zo kan je beter je afbeeldingen beheren bij het bijsnijden met focal point.

.flip-verticaal, .flip-horizontaal{
    height: 250px;
    width: 250px;
    float:left;
    margin:4px;
    
}
.flip-verticaal img ,.flip-horizontaal img{
    width: 250px;
    height: auto;
}
.flip-verticaal .back ,.flip-horizontaal .back{
    background: #d7dbe2;
    text-align: center;
    padding:10px;
    overflow:auto;
    box-shadow: 5px 5px 5px grey;
}
.back a{
  color:#35373a;
  text-decoration:none;
}
.back img{
  width:80px;
  height:auto;
}
.fliptitel a{
  color:orange;
  font-weight:bold;
  text-shadow: 2px 2px 4px #000000;
}

Blokken

We hebben de keuze tussen draaien als we met de muis over de afbeelding gaan 'hover' of 'click'. We kunnen ook bepalen rond welke as we draaien. Deze keuze moet boven de view worden aangebracht. Dit doen we door een blok boven de view te plaatsen.

Maak een blok aan in volledige HTML, kies broncode en plaats dit blok bvb bij de inhoud van de pagina. Het komt e rop neer dat de CSS klasse flip-horizontaal en flip-verticaal een ander JS effect gaan geven. Ik kies hier voor 'click', maar je kunt evengoed 'hover' kiezen.

<script>
$(function(){
    $(".flip-horizontaal").flip({
        trigger: 'click',
     });
});
$(function(){
    $(".flip-verticaal").flip({
        trigger: 'click',
        axis: 'x'
    });
});
</script>

Instellingen View

Ik kies voor onopgemaakte lijst.

ik zet alle velden onzichtbaar behalve de laatste. Dit veld herschrijf ik. Ik gebruik natuurlijk de tokens van mijn velden. Je moet ze aanpassen naar de tokens van jouw veldnamen.

<div class="flip-horizontaal"> 
    <div class="front"> 
        {{ field_foto_afbeelding }}
    </div> 
    <div class="back">
        <h3 class="fliptitel">{{ field_fotograaf }}</h3><h4>{{ title }} </h4><h5>{{ field_categorie }}</h5>{{ field_foto_toestel }}</br>{{ field_fototoestel_afb }}
    </div> 
</div>

Kies je voor een verticale flip dan wordt dit zo:

<div class="flip-verticaal"> 
    <div class="front"> 
        {{ field_foto_afbeelding }}
    </div> 
    <div class="back">
        <h3 class="fliptitel">{{ field_fotograaf }}</h3><h4>{{ title }} </h4><h5>{{ field_categorie }}</h5>{{ field_foto_toestel }}</br>{{ field_fototoestel_afb }}
    </div> 
</div>

Je view zou nu moeten werken en bij klikken (of hoveren) draait de afbeelding om worden de andere velden zichtbaar.

Wil je net zoals ik een alternerend effect (horizontaal en verticaal afwisselend)?

Dan moet je ook no een view php veld gebruiken met de volgende outputcode. Hier geef ik de afbeelding een volgnummer en kijk of het even of oneven is. De waarde horizontaal of verticaal wordt nu met het veld meegegeven.

<?php
global $counter;
$counter++;
if ($counter==2*(int)($counter/2)){
$value="verticaal";
}
else{
$value="horizontaal";
}
echo $value;
?>

Het herschrijven wordt dan.. Merk de {{php}} variabele op bij de naam van de klasse. Deze wordt nu automatisch herschreven.

<div class="flip-{{ php }}"> 
    <div class="front"> 
        {{ field_foto_afbeelding }}
    </div> 
    <div class="back">
        <h3 class="fliptitel">{{ field_fotograaf }}</h3><h4>{{ title }} </h4><h5>{{ field_categorie }}</h5>{{ field_foto_toestel }}</br>{{ field_fototoestel_afb }}
    </div> 
</div>