Flip Effect

  1. Maak een afbeeldingsstijl aan:

flip

  1. Maak een nieuw overzicht aan die de werkmaterialen weergeeft.
    1. Onopgemaakte lijst van velden
    2. Pagina maken
    3. Menulink leggen
    4. Geen paginering
    5. Alle items weergeven
  2. De velden:

velden

  1. Download deze code en plak in een nieuwe JS-regel. (JS-REGEL 1)

JS1

  1. Download deze code en plak in een nieuwe JS-regel. (JS-REGEL 2)

JS2

  1. Kopieer DEZE CSS-code en plak in een nieuwe CSS-regel

CSS

  1. Maak een nieuwe blok aan, volledige HTML en switch naar broncode. Onderstaande code plak je hierin. Dit blok geven we nu een plaats op de pagina van ons overzicht, in de content bijvoorbeeld. Dit blok is nodig om te bepalen of we moeten klikken of hoveren om de image te flippen.
<script>
$(function(){
    $(".flip-horizontaal").flip({
        trigger: 'click',
     });
});
$(function(){
    $(".flip-verticaal").flip({
        trigger: 'click',
        axis: 'x'
    });
});
</script>

flip blok

  1. Ga naar jouw View. Herschrijf het veld van de afbeelding met deze code. Controleer of je dezelfde tokens hanteert. Hieronder heb je ook de keuze om horizontaal of verticaal te flippen. Je kiest maar.
<div class="flip-horizontaal"> 
    <div class="front"> 
        {{ field_image2 }}
    </div> 
    <div class="back">
        <h3 class="fliptitel">{{ title }}</h3><h4>{{ title }} </h4><h5>{{ field_brand }}</h5>{{ field_categorie }}</br>
    </div> 
</div>

OF

<div class="flip-verticaal"> 
    <div class="front"> 
        {{ field_image2 }}
    </div> 
    <div class="back">
        <h3 class="fliptitel">{{ title }}</h3><h4>{{ title }} </h4><h5>{{ field_brand }}</h5>{{ field_categorie }}</br>
    </div> 
</div>