website images preview in odoo

 

In This blog we will explain how to create website images preview in odoo as popup zoom out view just as in the image above , so

First : we have to create the the images view for example 

<t t-foreach="image_ids" t-as="image">
    <img t-att-src="image.attachment_url" class="asset_img_01" alt="Asset"/>
    <div id="myModal" class="modal">
        <span class="close">
            <i class="fa fa-window-close" style="background-color:#ffffff;color:#ff4000;"/>
        </span>
        <img class="modal-content" id="img01"/>
        <div id="caption"></div>
    </div>
</t>

Second : add JS script to add the popup preview for each image which is work when we click on the image , as bellow 

<script>
    var modal = document.getElementById("myModal");

    var imgs = document.getElementsByClassName("asset_img_01");
    var modalImg = document.getElementById("img01");
    var captionText = document.getElementById("caption");
    for (i = 0; i &lt; imgs.length; i++) {
        imgs[i].onclick = function(){
            modal.style.display = "block";
            modalImg.src = this.src;
            captionText.innerHTML = this.alt;
        }
    }

    var span = document.getElementsByClassName("close")[0];

    span.onclick = function() {
      modal.style.display = "none";
    }
</script>

# note : the script must be inside the for loop body after the "myModal div"