View item image as popup in PDP.

Jira Code: TC-134

Display the item image as a popup in product details page in an SCA webstore.

product_details_full.tpl

Insert the following in the product_details_full.tpl

 <div id="myImmageModal" class="Immagemodal">
            <span class="Immageclose">×</span>
            <img class="Immaage-modal-content" id="defaultimg">
            <div id="Immagecaption"></div>
 </div>

<script>
setTimeout(function(){
        $('.zoomImg').addClass('MainimmageItems');
        $('.MainimmageItems').click(function(){
            var src = $(this).attr("src");
            $('#myImmageModal').css('display','block');
            $('#defaultimg').attr('src',src);
            $('.site-search-input-icon').css('display','none');
        });
        $('.Immageclose').click(function(){
            $('#myImmageModal').css('display','none');
            $('.site-search-input-icon').css('display','block');            
        });
    },2000);

</script>

_product-details-full.scss

Insert the following in the _product-details-full.scss

/* The Close Button */
.Immageclose {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.Immageclose:hover,
.Immageclose:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .Immaage-modal-content {
        width: 100%;
    }
}