Advanced QGIS: Image Slideshows in a Map Tip

on

 


 I started exploring this after a comment I got in my map tip styling post, which asked how can he have a slideshow of multiple images associated with feature. I was pretty sure it can't be done, since Javascript functions don't work very well in map tips.

I soon realized that while JavaScript wasn't an option, there are ways to make CSS do the heavy lifting, and while I'm not very proficient with CSS, I am rather good at finding solutions online.
So the resulting map tip I'm attaching below is a combination of two tutorials:

1. How to create an image slider with just CSS (still needed user interaction by clicking on the buttons, didn't work on its own)

2. Automatic image slideshow with CSS (Gave me the missing link for making the images change on their own)

So I just pasted the result in the HTML map tip window and got the result you see in the video below (which is the original version of the GIF above before I sped it up).


This is the complete code that works in video. You can (and probably should) play around with the timing of the image switching and of course replace the image URLs with feature attributes. You can also add other elements above the images such as a title, attributes or whatever else you want to add to your map tips, you can go back to my first post about styling them to get ideas.

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>QGIS Map Tip CSS slideshow</title>
  <style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.container{
		width: 500px;
        height: 300px;
        background-color: yellow;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0px;
        text-align: center;
        overflow: hidden;
}
.slowFade {
    display: flex;
    align-items: flex-start;
    background: #fff;
    height: 100vh;
    overflow: hidden;
    position: relative;
}
.slowFade .slide img {
    position: absolute;
    width: 100%;
    height: 100%;
    
    background: #000;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    opacity: 0;
    transform: scale(1.5) rotate(15deg);
    -webkit-animation: slowFade 8s infinite;
            animation: slowFade 8s infinite;
}
.slowFade .slide:nth-child(3) img {
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
}
.slowFade .slide:nth-child(2) img {
    -webkit-animation-delay: 4s;
            animation-delay: 4s;
}
.slowFade .slide:nth-child(1) img {
    -webkit-animation-delay: 6s;
            animation-delay: 6s;
}
@keyframes slowFade {
    25% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
    40% {
        opacity: 0;
    }
}

@-webkit-keyframes slowFade {
    25% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
    40% {
        opacity: 0;
    }
}
  </style>
  </head>
<body>
<div class="container">
  <div class="slides slowFade">
        <div class="slide">
            <img src="https://www.w3docs.com/uploads/media/default/0001/03/66cf5094908491e69d8187bcf934050a4800b37f.jpeg" alt="img"/>
        </div>
        <div class="slide">
            <img src="https://www.w3docs.com/uploads/media/default/0001/03/b7d624354d5fa22e38b0ab1f9b905fb08ccc6a05.jpeg" alt="img"/>
        </div>
        <div class="slide">
            <img src="https://www.w3docs.com/uploads/media/default/0001/03/5bfad15a7fd24d448a48605baf52655a5bbe5a71.jpeg" alt="img"/>
        </div>
    </div>
</div>
</body>
</html>
 


Comments

Post a Comment