Zoom image to full size in custom widget

[vidhya_mouli]

I have a custom widget which will display an article. This article sometime may contain images. I want to display a small size of this image and when user clicks on image, the image should pop up and display in full size. How do I do this?

HTML:

<div class="article-widget">
  <h2>{{data.article.u_title}}</h2>
  <div ng-bind-html="c.trustedHtml(data.article.u_content)"></div>
</div>

CSS:

.article-widget {
  border: 1px solid #ccc;
  padding: 10px;
}

.article-widget h2 {
  font-weight: bold;
}

.imageContainer > img:active{
  width:100%;
  height:100%;
}

Client Script:

api.controller = function($sce, $http, $location) {
  var c = this;

  // Fetching the first record from the u_articles table
  $http.get('/api/now/table/u_articles?sysparm_limit=1').then(function(response) {
    c.data = {
      article: response.data.result[0]
    };
		
		var sysId = c.data.article.sys_id;
    var currentParams = $location.search();
    currentParams.sys_id = sysId;
    $location.search(currentParams);
		
  });

  // Allowing HTML content to be rendered
  c.trustedHtml = function(html) {
    return $sce.trustAsHtml(html);
  };
	
	
	
};

Server Script:

(function() {
  data.u_title = ''; // Placeholder for the title
  data.u_content = ''; // Placeholder for the content

  var gr = new GlideRecord('u_articles');
  gr.addQuery('active', true); // Optionally, you can add more conditions here
  gr.orderBy('sys_created_on'); // Order by creation date
  gr.query();
  
  if (gr.next()) {
    data.u_title = gr.u_title.toString();
    data.u_content = gr.u_content.toString();
		data.sys_id = gr.sys_id.toString();
  }
	
	console.log("SYSID: " + input.sys_id)
	
	
})();

u_content has this line of code added to all the images:

<div class="imageContainer">

[Community Alums · Accepted solution]

Hi @vidhya_mouli ,

It looks like the primary issue is lack of event which handles for clicks on images and the absence of a modal or lightbox component to display the images in an enlarged format. The CSS provided is not sufficient to show the full image on its own.

Please follow the below steps-

1. You need to update your HTML to handle the click event on images and trigger a modal popup.

<div class="article-widget">
  <h2>{{data.article.u_title}}</h2>
  <div ng-bind-html="c.trustedHtml(data.article.u_content)" ng-click="c.openImage($event)"></div>
</div>

<!-- Modal for Image Preview -->
<div class="modal" ng-show="c.showModal">
  <div class="modal-content">
    <span class="close" ng-click="c.closeModal()">&times;</span>
    <img ng-src="{{c.currentImageSrc}}" alt="Image Preview" style="width: 100%">
  </div>
</div>

2. The CSS

.article-widget {
  border: 1px solid #ccc;
  padding: 10px;
}

.article-widget h2 {
  font-weight: bold;
}

.imageContainer img {
  width: 100%; /* Responsive width */
  cursor: pointer; /* Indicates that the image is clickable */
}

/* Modal CSS */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

3. Client Script:

api.controller = function($sce, $http, $location) {
  var c = this;
  c.showModal = false;
  c.currentImagesrc='';

  $http.get('/api/now/table/u_articles?sysparm_limit=1').then(function(response) {
    c.data = {
      article: response.data.result[0]
    };

    var sysId = c.data.article.sys_id;
    var currentParams = $location.search();
    currentParams.sys_id = sysId;
    $location.search(currentParams);
  });

  c.trustedHtml = function(html) {
    return $sce.trustAsHtml(html);
  };

  c.openImage = function(event) {
    // Check if the click is on an img element inside any div (including imageContainer)
    if (event.target.tagName === 'IMG' && event.target.parentElement.className.includes('imageContainer')) {
      c.currentImagesrc=event.target.src;
      c.showModal = true;
    }
  };

  c.closeModal = function() {
    c.showModal = false;
  };
};

4. Server Script:

(function() {
  data.u_title = '';
  data.u_content = '';

  var gr = new GlideRecord('u_articles');
  gr.addQuery('active', true);
  gr.orderBy('sys_created_on');
  gr.query();

  if (gr.next()) {
    data.u_title = gr.u_title.toString();
    data.u_content = gr.u_content.toString();
    data.sys_id = gr.sys_id.toString();
  }
})();

If my response has resolved your query, please consider giving it a thumbs up ‌‌ and marking it as the correct answer‌‌!

Thanks & Regards,

Sanjay Kumar

[vidhya_mouli]

Thank you. I made a small modification to your code and made it work.