Description
- generate image on button click
- view demo – password: abc
#1. Install code
#1.1. First you need to add a Gallery Block
Next, choose Grid
#1.2. Next, hover on top right of section > Click Edit Section
At Anchor Link, enter word: img-generator
#1.3. Hover on page where you use Gallery Block > Click Gear icon
Click Advanced > Paste this code
<script>
window.imgGenConfig = {
buttonText: "Click Me Now!"
};
</script>
<style>
:root {
--img-generator-max-width: 400px;
}
#img-generator .img-generator-wrap{position:relative;width:100%;display:flex;flex-direction:column;align-items:center}#img-generator .text-generator{position:relative;z-index:2}#img-generator .img-generator-out{margin-top:18px;width:100%;display:flex;justify-content:center;opacity:0;transform:translateY(-4px);transition:opacity .18s ease,transform .18s ease}#img-generator .img-generator-out.is-on{opacity:1;transform:translateY(0)}#img-generator .img-generator-out img{display:block;width:100%;height:auto;max-width:var(--img-generator-max-width)}@media(max-width:767px){#img-generator .img-generator-out img{width:100%}}#img-generator .img-generator-hidden{display:none!important}
</style>
<script src="https://code.beaverhero.com/galleryblock/imggenerator.js"></script>
#2. Customize
#2.1. To change button text, change this line
#2.2. To change image size, change this line
