Unite Gallery Loading Issue

[sidjustsid]

Hi @OlivierCC Firstly Thank you so much for this beautiful piece of work. I am using News Carousel web part in one of my classic pages. It is working fine. But Sometimes it is giving me Uncaught (in promise) TypeError: h(...).unitegallery is not a function Error. After few refreshes it is loading again. Could you please help me in this .

Many Thanks Siddhartha

[OlivierCC]

Hi @sidjustsid,

This can happened when you are using two different WebParts on the same page that include a JQuery plugin. In fact the SPFx will reload JQuery and randomly the JQuery plugin will fail to load.

Today the only dirty fix that I found is to use the custom version of JQuery included in the latest 1.0.3 package or at this address: http://spfx40fantastics.azureedge.net/spfx40fantastics/jquery_510295b52d8a7cc774bf4fb013893d1e.js

Regards,

Olivier

[kmarwen]

Hi @OlivierCC would you please tell us what's the prob with Jquery and it's plugins in those webparts ? I'm cloning your webparts and facing same problems with jquery merci

[kmarwen]

I see the diff with jquery you added

if (window.jQuery)
		return;

that correct the behavior of jquery plugins ?

[kmosti]

I followed @OlivierCC advice, and replaced the jquery minified file at node_modules/jquery/dist/jquery.min.js - which solved the loading issue.

However, this exposed a different (unrelated?) issue, unitegallery does not seem to handle loading different themes on the same page.

To reproduce:

1. Replace the jQuery file
2. Add two web parts using the unitegallery library (I used Grid gallery and Tiles Menu)
3. First load might seem OK:
4. Subsequent reload of the page exposes the issue:

Fix:

1. Replace the jQuery file per @OlivierCC instructions
2. Set the theme in the unitegallery options, for my use case, that meant modifying the options (line 114) of TilesMenuWebPart.ts:

private renderContents(): void {
      ($ as any)("#" + this.guid + "-gallery").unitegallery({
        gallery_theme: "tiles",
        tile_as_link: true,
        tiles_type: this.properties.justified === true ? "justified": '',
        tile_enable_icons: this.properties.enableIcons,
        tile_enable_textpanel: this.properties.textPanelEnable,
        tile_textpanel_always_on: this.properties.textPanelAlwaysOnTop,
        tile_textpanel_position: this.properties.textPanelPosition,
        tile_textpanel_bg_opacity: this.properties.textPanelOpacity,
        tile_textpanel_bg_color: this.properties.textPanelBackgroundColor,
        tile_textpanel_title_font_family: this.properties.textPanelFont,
        tile_textpanel_title_font_size: this.properties.textPanelFontSize != null ? this.properties.textPanelFontSize.replace("px", "") : '',
        tile_textpanel_title_text_align: this.properties.textPanelAlign,
        tile_textpanel_title_color: this.properties.textPanelFontColor,
        tiles_space_between_cols: this.properties.spaceBetweenCols,
        tile_enable_border: this.properties.enableBorder,
        tile_border_width: this.properties.border,
        tile_border_color: this.properties.borderColor,
        tile_enable_shadow: this.properties.enableShadow
      });
  }

[kmarwen]

Hi @kmosti try adding another webparts (tiles, animated text, ...) and reload many times the page you'll see js errors in console till today I don't understand the cause of this issue with jquery

[kmosti]

I'll give it a try, but for now my web parts are a little bit healthier so that makes me happy :)

What kinds of errors are you seeing in the console?