Showing Image Popup while clicking images in NewsFeed Webpart

Introduction

I already given some ideas about Newsfeed webpart. Now, I am going to give an idea to show image popup when we click an image in NewsFeed.

Customization

Here too we can do the customization newsfeed webpart in both Direct and Programmatic way. 

Direct

After placing Newsfeed webpart in sitepage, Then, Upload a jquery library in Site Assets. Download the plugins here Add a Script Editor webpart in same page. Edit the Script Editor and paste below script.

<script type="text/javascript" src="/SiteAssets/jquery.min.js"></script>

<script type="text/javascript" src="/SiteAssets/jquery.popupoverlay.js"></script>

<script type="text/javascript">

$('.ms-microfeed-attachmentImage').addClass('feedPopup_open'); //adding class to image

 $('#feedPopup').popup(); 

//On click method for an image

 $('.ms-microfeed-attachmentImage').click(function () {

        var image_href = $(this).attr("src"); //getting image source

        $('#divFeedDescPopup').html('<img src="' + image_href + '" />'); //appending an image with popupblock

    });

</script>

<!-- Style for popup -->

<style>
.popupContent p label {
    display: block;
    font-weight: bold;

}
.popupContent img {
    width:100%;

}
</style>

<!-- Popup block -->

<div id="feedPopup" class="popupBlock" style="width: 30%; display: none">

<div id="divFeedDescPopup" class="popupContent"> </div>

 <button class="feedPopup_close popupClose">Close</button>

</div>

That's all save the page. Popup will display for each images in newsfeed webpart.

Programmatically

Add a sitepage in your solution within module. And paste the jquery library files in _layout folder. Then, Refer those library files in sitepage. Paste the above script, style and popup block in the page. Deploy the solution and see the popup while clicking an image in Newsfeed.