Public method for instantiating iLightbox via Javascript?

adaptifyDesigns · September 27, 2017, 8:30pm

Hi, instead of using a new lightbox script, I’d like to use the iLightbox library which X Pro already uses.

On one of my custom templates I want all YouTube links to open and play in a lightbox. The links are easy to target with a jQuery selector like: var youTubeLink = $('[href*="youtube.com"]') …

So now, all I need is the public method for instantiating iLightbox on those links when clicked, and the options I need to know in order to configure the lightbox how I want it.

Can you please assign this ticket to someone on your team with a good knowledge of the X Pro iLightbox implementation?

Thanks!

adaptifyDesigns · September 27, 2017, 11:17pm

Ok, so I found the iLightbox docs (http://ilightbox.net/documentation.html#api_ilightbox_elements) so I was able to write my JS function:

$('[href*="youtube.com/watch?v="]').bind('click', function(event)
{
	event.preventDefault();

	var target      = $( this ).attr('href'),
		ytID        = getURLParameter( target, 'v' ),
		embedURL    = '//www.youtube.com/embed/' + ytID + '/?autoplay=1&rel=0';

	$.iLightBox([
	{
		URL     : embedURL,
		type    : 'iframe',
		options :
		{
			skin : 'light',
			width: 800,
			// height: 272,
			overlay :
			{
				opacity : 0.85
			},
			controls: {
				toolbar    : true,
				fullscreen : true
			}
		}
	}
	]);
});

… and this works, but I’m unable to get the ‘light’ skin to work. The resulting lightbox does not have a transparent overlay, and none of the toolbar controls are visible… how can i get my lightbox to look just like the X Pro lightbox? I’ve tried to find the global options that X Pro uses, but I haven’t been able to. Most importantly I want the lightbox to be responsive and automatically take up a certain percentage of the screen while retaining the correct aspect ratio, just like the X Pro iframe lightbox does. Can you please let me know how to achieve this.

Cheers!

adaptifyDesigns · September 28, 2017, 5:18am

Ok, another update. I have now implemented the smartRecognition option in the iLightbox settings. This option somehow makes the resulting lightbox better formatted (centered, retaining aspect ratio, etc.),

BUT my website is on a secure protocol (SSL/HTTPS), so Chrome throws an error when iLightbox attempts to make an API request to its getSource/jsonp.php file to determine the linked media type/source, and so the lightbox is not successfully launched

Here is my revised iLightbox instance:

// bind iLightbox instance to all possible video links

$videoLinks = $( '[href*="youtube.com"], [href*="vimeo.com"]' );

$videoLinks.bind( 'click', function(event)
{
	event.preventDefault();

	$.iLightBox([
	{
		URL     : $( this ).attr('href'),
		type    : 'iframe',
		options :
		{
			smartRecognition: true,
			skin : 'light',
			overlay :
			{
				opacity : 0.85
			},
		}
	}
	]);
});

My skin and opacity settings are still being ignored for some reason (perhaps they are being overwritten by default iLightbox options set by X Pro?).

But more importantly this method only worked on my staging site, which is served over http protocol. My production site is served over secure https protocol, and so the the smartRecognition feature doesn’t work.

I found the source of this issue in:
themes/pro/cornerstone/assets/dist/js/site/vendor-ilightbox.min.js on line 98, where it says …fadeIn http splitNumRegx

… if you simply add an s to make the protocol secure (i.e. https) then the call to getSource/jsonp.php doesn’t get flagged as dangerous by Chrome and Safari, and so the lightbox is successfully created.

Could you please report this to your development team and have them include this fix in the next release? Requesting the secure https:// file version will work for non secure sites as well, so it covers all your bases. No reason to use the non secure URL.

If you could please make this change as soon as possible so that my fix does not get overwritten on the next theme update. And if you could please let me know when it’s been implemented, I would really appreciate it.

Also, I would still really like some help getting the above iLightbox instance to respect the formatting options I want. I want it to look like the Integrity Light lightbox style.

Thanks!

christian · September 28, 2017, 2:17pm

Hey There,

Thanks for writing in! Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. We do have an in-house custom development team that offer paid services, who may be able to assist. They can be contacted at pinnacle@theme.co if this is of interest to you. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

adaptifyDesigns · September 28, 2017, 10:20pm

Hmm… I’m not sure I follow. This is not really a customization of the theme… I’m trying to work with the theme. The X Pro developers, in their infinite wisdom, decided to use the iLightbox plugin for all the lightbox/pop-up shortcodes, etc. So I’m simply trying to take advantage of the iLightbox script that is already present in the theme, and I’m also trying to use it in the same way that X theme uses it (i.e. same skin and styles). This should be a very simple question for your development team to answer.

My second request, that you update http to https in vendor-ilightbox.min.js is doing you a favor. Making this change will improve the compatibility of X Pro with websites that are served over HTTPS protocol. That would be an overall improvement.

Can you please just take a moment to forward this to your development team?

Thanks.

rad · September 29, 2017, 9:23am

Hi there,

The iLightbox is included as a lightbox feature of the theme for the sole purpose of a simple lightbox. We included them as part of the theme but we don’t utilize its entire feature which is why the lightbox shortcode has few options.Any customization within that library is user’s responsibility, and anyone is free to check the documentation for each respective library.

Plus, the HTTPS and HTTP issue is due to your site’s URL configuration. The code that’s responsible for that is this

wp_register_script( 'vendor-ilightbox',      $this->url( 'assets/dist/js/site/vendor-ilightbox.min.js' ), array( 'jquery' ), $this->plugin->version(), true );

This $this->url() uses the base URL supplied by Wordpress and it’s not something we added statically. All URL configurations are done and configured within Wordpress settings, it’s bad practice to include static link especially that it should be usable for both non-secured and secured sites.

And that also means that your migration from your staging to your live site is maybe incomplete. That always happens in the migration process and there are many contributing factors. If you can provide your live site’s URL and admin login credentials then I may able to check the actual issue you’re getting.

Thanks.

adaptifyDesigns · September 29, 2017, 9:35pm

Thanks @Rad.

It’s not the vendor-ilightbox.min.js script that is being served over http.

In that script, on line 98, there is a hardcoded http string which is used when the script makes a remote request to the getSource/json.php script. This script is used by iLightbox when determining the source of a media link, and automatically configuring the correct settings depending on the source (eg. for Youtube or Vimeo links).

I believe you are using an older version of the iLightbox script, because in the iLightbox forums other users have reported the http vs https issue, and the plugin author has fixed it in his latest versions.

If it is too much trouble for your development team to update the iLightbox script, then you could take my advice and simply add an s onto the end of http on line 98 of the iLightbox.min.js script. Easy as pie And now it will be compatible with both http AND https websites.

Does that make sense? I don’t know how I can be any more clear.

I guess I can understand if you don’t want to help me with my custom javascript implementation of the iLightbox instance, but it would be so easy for you to make the above change, and therefore make your iLightbox script compatible with https websites. This would allow X theme to take advantage of the smartRecognition feature in the future, which would greatly simplify the video lightbox shortcode implementation, because it auto-detects the video source based on the source domain. … and all it requires is the addition of one letter, an s, on line 98

Let me know,
Cheers!

Colin

rad · September 30, 2017, 8:59am

Hi there,

I’m not trying to ignore the issue, in fact, I want to understand what’s happening so I could forward it to our developer. Your request is about updating http to https in vendor-ilightbox.min.js with no further information about it. So I provided an answer that I think related to what I understand.

And it’s not that I don’t want to help, you have two issues here. First one is something we can’t cover/handle since it’s about a 3rd party library features. Second is about HTTP which I’m still trying to understand. But I’ll make sure your message is forwarded to our developer.

Thanks!