Canvas Support

Blank template for using on ajax calls with lightbox (magnific popup)

6 replies · opened Jun 7, 2019

EEnriqueJun 7, 2019

Hi

I've seen in lightbox.html that the ajax load is done to shop-item.html

Is there a blank html template I could use for the data-lightbox="ajax" to work ?

The css classes in shop-item.html are all related to product and need to build a custom one

Thanks

EEnriqueJun 7, 2019

Also

How could I put a tabs component in the lightbox ? I've tried without success... should I include plugins.js and functions.js again in the to-be-loaded lightbox's html file ?

Thanks

SSemicolon WebSTAFFJun 10, 2019

Hello,

You do not have to include the JS/CSS Linkings in the AJAX Page codes. You can simply use the Elements, Classes and DIVs used from the Default Templates as the Styling is taken automatically from the Main Page. Example, you can consider using the following code: 


	
		

			.. Your Content

And for the Tabs to work in the AJAX Modals, simply add the following JS code at the bottom of the Page just after the js/functions.js JS File Linking: 


	jQuery('[data-lightbox="ajax"]').on( 'mfpOpen', function(e) {
		SEMICOLON.widget.tabs();
		SEMICOLON.widget.tabsResponsive();
		SEMICOLON.widget.tabsResponsiveResize();
	});

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

EEnriqueJun 11, 2019

Hi

I've replaced with the code for the lightbox container and now the lightbox opens at full width.
Is there a way to set a fixed width (px or %) for the opened lightbox ?

Also, I've added the initialization code for having tabs working on lightbox. Tried adding after functions.js include, didn't work. Tried adding the code before functions.js but got a console error (attached). I mean, the tabs are generated, built. But the clicking event doesn't toggle the corresponding panels, etc.

Thanks again

SSemicolon WebSTAFFJun 13, 2019

Hello,

  1. You can simply consider adding the style="max-width: 500px;" Attribute on the .ajax-modal-inner Element, or can also control the Width using CSS Codes added to the css/custom.css referring the .ajax-modal-inner Class.

  2. This appears to be a weird error. Can you please provide us with a Live URL so that we can check out the exact issue and provide you with more assistance on this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

EEnriqueJun 20, 2019

Hi
Sorry for late response

  1. By setting the .ajax-modal-inner max width does not work, because there's an overlay behind this container, and/or another containers like mfp-wrap that keeps full width in screen.

  2. I'm working at localhost, don't have nothing online yet

SSemicolon WebSTAFFJun 20, 2019

Hello,

For both the errors you are facing, we will need a Live URL to debug the errors as we cannot provide you with a Solution based on theoretical information. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard