0

I have created a web-part which search the images from library and shows the result. when I click on image it should show in the popup as preview however it shows withing the iframe only instead of with entire window. How do I show image preview popup in full window?

enter image description here

// Here is the .ts file code

import { Version } from '@microsoft/sp-core-library';

import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';

import { escape } from '@microsoft/sp-lodash-subset';

import styles from './ImageLibrarySearchWebPart.module.scss';

import * as strings from 'ImageLibrarySearchWebPartStrings';

import { SPComponentLoader } from '@microsoft/sp-loader';

import { sp, Web, ListEnsureResult ,ItemAddResult} from 'sp-pnp-js';

import { CurrentUser } from 'sp-pnp-js/lib/sharepoint/siteusers';

import 'jquery';

export interface IImageLibrarySearchWebPartProps {

description: string;

}

export default class ImageLibrarySearchWebPart extends BaseClientSideWebPart {

constructor() { super();

SPComponentLoader.loadCss("https://appsforoffice.microsoft.com/fabric/2.2.0/fabric.components.min.css");

SPComponentLoader.loadCss('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css');

}

private getSPData(): void {

sp.web.currentUser.get().then((r: CurrentUser) => {

  const htmlElement = this.domElement.querySelector("#userId");

  htmlElement.innerHTML = r['Id'];

});

}

private logDownloadHistory(showName,userId,internalOrExternal){

sp.web.lists.getByTitle("DownloadActivity").items.add({
    UserNameId: userId,
    InternalOrExternal:internalOrExternal
}).then((iar: ItemAddResult) => {
    console.log(iar);
});

} public render(): void {

this.domElement.innerHTML = `
 <div id="dvProcess" class="loadersmall"></div>
 <span id="userId" style="display:none;"></span>
  <div id="dvMain" class="${ styles.imageLibrarySearch}">
    <div class="${ styles.container}">
      <div class="${ styles.row}">
        <div>
          <div class="ms-TextField">
            <input class="ms-TextField-field" type="text" value="" placeholder="Search for images and videos by show name, client name, line of business or keyword
            " id="txtSearch">
          </div>
        <div id="dvSelectedFilter"></div>
        <div id="dvDownloadPanel" style="display:none;">
              <a  id="btnDownload">
              <i class="fa fa-download" aria-hidden="true">   Download</i>
              </a>
          </div>
        <div class="${ styles.column90}">

          <div id="dvImages">                
          </div>

        </div>
        <div class="${ styles.column10}">
            <button class="collapsible active">Line of Business <i class="fa fa-angle-up" aria-hidden="true"></i></button>
            <div class="content " id="dvLineOfBusiness" style="display:block;">
            </div>

            <button class="collapsible">Industry Type <i class="fa fa-angle-down" aria-hidden="true"></i></button>
            <div class="content" id="dvIndustryType">
            </div>
        </div>
        </div>
      </div>
    </div>
    <div id="myModal" class="modal">
      <span class="close">&times;</span>
      <img class="modal-content" id="img01">
      <div id="caption"></div>
    </div>

    <div id="dialogDownload" class="modal">

    <div class="dialogContent">
        <span class="close">&times;</span>

        <div class="dialogInnerContent">
        <label class="pure-material-checkbox">
          <input  type="checkbox" id="chkIsAgree" class="ms-CheckBox-input">
          <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</span>  
        </label>
        <br/>

        <button class="ms-Button ms-Button--primary is-disabled" id="btnDownloadInternalApproved">
            <span class="ms-Button-label">Download</span> 
        </button>
        </div>
    </div>
    </div>

  </div>`;
this.getSPData();
require('../ImageSearch.css');
require('../Search.js');

}

protected get dataVersion(): Version { return Version.parse('1.0'); }

}

//HERE IS JS FILE CODE

import { sp, Web, ListEnsureResult } from 'sp-pnp-js';

var oWebRelativeURL = "/sites/ImageLibraryDev";

var listImage = "/Image%20Library";

var listLOB = "/Lists/LOB";

var listInstryType = "/Lists/Industry%20Type";

var filterLOBId = "Line_x0020_of_x0020_BusinessId";

var filterITType = "Industry_x0020_Type";

import { ImageLibrarySearchWebPart } from './imageLibrarySearch/ImageLibrarySearchWebPart'

$(document).ready(function() {

startLoading();
getFilterData();
getFilterIndustryType()
getImages();

});

function renderImages(data) {

$('#dvImages').empty();

if (data.length > 0) {

    data.forEach(element => {
        var isInternalApproved = element.ApprovalId == 2 ? true : false;
        var toolTip = element.Title;
        var label="",termGUID="",wssid="";
        if(element.Event_x0020_Name_x0020_or_x0020_Show_x0020_Name){

label=element.Event_x0020_Name_x0020_or_x0020_Show_x0020_Name.Label;

termGUID=element.Event_x0020_Name_x0020_or_x0020_Show_x0020_Name.TermGuid;

wssid=element.Event_x0020_Name_x0020_or_x0020_Show_x0020_Name.WssId;

        }

        var strHTML = `<div class="div-download"><a  data-name="` + element.LinkFilename + `" href="` + element.FileRef + `" target="_blank"><Image data-url="` + element.FileRef + `" class="images" src="` + element.EncodedAbsThumbnailUrl + `" alt="Image"/></a>
                        <label class="pure-material-checkbox chk-download"  data-title="` + toolTip + `">
                        <input data-label="`+label+`" data-termguid="`+termGUID+`" data-wssid="`+wssid+`" data-internal-aprpoved="` + isInternalApproved + `" tabindex="-1" type="checkbox" class="ms-CheckBox-input">
                        <span ></span>  
                        </label></div>`;

        $('#dvImages').append(strHTML)
    });

}

endLoading();

}

//PACKAGE_SOLUTION.JSON FILE

{

"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",

"solution": { "name": "Image Search V1", "id": "52dd7d77-fb0a-4ac9-a5bf-007d586c4bd8", "version": "2.0.2.7", "includeClientSideAssets": true, "skipFeatureDeployment": false, "isDomainIsolated":false },

"paths": { "zippedPackage": "solution/image-search-v1.sppkg" }

}

  • How do you display the popup? How are width & height detected? – Nils May 14 at 7:34
  • Shows the popup like this w3schools.com/w3css/w3css_modal.asp – Ramesh May 14 at 7:36
  • Can you give a bit more info.. Which IFrame is showing? If your popup is "inside" an iframe, I fear you can only use the size the iframe gives you. – Nils May 14 at 8:05
  • I added the spfx web-part in the page. the whole part loads in the ifram tab in html. that's why this popup belongs the to that Iframe, do you know any way in which we can render webpart in normal div tag instead of Iframe? – Ramesh May 14 at 8:37
  • Neither classic, nor modern pages render SPFx webparts using iframes. Can you share the code of your WebPart? – Nils May 14 at 19:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.