Image Flip effect in Views

Rating

This tutorial is based on the manual  https://www.ostraining.com/blog/coding/jquery-flip/ and was completely adapted for Drupal 8. I also used the flip effect twice. For every odd or even image I apply another flip.

The view also presents good in smartphones and tablets. IE shows the fields at the back when you click but does not show the flip effect.

Turning around the X-axis

Screen001600.png

In the following figure ... rotate around the Y-axis.


Screen001601.png

the view

First create your view whit at least one picture field and all the fields you want to display on the back. I have also added a PHP field (Views PHP module). For now, that is not necessary. Explanation will follow.

Screen001620.png

Jacascript

1) Go to https://github.com/nnattawat/flip and select only the  jquery.flip.min.jsCopy the code to the JS injector (part of the Asset injector module). If necessary limit this Javacript to the overview page.


Screen001623.png
Screen001622.png

2) Go to  https:https://code.jquery.com/jquery-2.1.4.min.js  and copy it to the JS injector (part of the Asset injector module). If necessary limit this Javacript to the overview page.

Screen001624.png

Note that, this time, we also load JQuery. Untill now we had not done this. We need this only 1X load on the page of course.


Screen001625.png

You now have two files in your JS injector.

Screen001621.png

CSS

In the CSS injector assign the CSS on the page. The CSS uses, as you can see, the horizontal and vertical flip. Here you can also set the dimensions of your image. I have created an Drupal image style which has these same dimensions. So you can better manage your images by cropping with 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;

}

Blocks

We have the choice as we go over the image with the mouse 'hover' or 'click '. We do this by placing a block above the view.

Create a block in full HTML, select source and place this block above the content of the page. The classes flip-horizontally and flip-vertically will give a different effect JS. I choose ' click' , but you can just as well ' hover ' .

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

</script>

View settings

I put all fields invisible except the last. I rewrote this field. Of course I use the tokens of my fields. You have to change them to the tokens of your field names.

<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>

Or choose a vertical flip:

<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>

Your view should now work and a click (or hover) turns the image, to reveal the other fields.

Would you like an alternating effect (alternating horizontal and vertical)?

Then you should also use a view php field with the following output code. Here I give the image a number and see if it is even or odd. The value is now being displayed in the field, horizontally or vertically.

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

Rewriting is then .. Note the {{php}} variable in the name of the class. This will now be automatically rewritten.

<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>

Externe film