faeb35

Hi Leonard

Thank you for your reply!

It’s not that the gyroscopic feature is missing on my android/browser. It’s related to the fact that the gyroscopic event seem to be only accessable by HTTPS according to the notes in the console.

I guess that you’re totaly right, that it’s not the best option to edit the jquery.paver.min.js. So I choosed now the way to add it to jquery.init.js. But I think this would be overwritten when you update the plugin as well, right? What do you think would be the best option to add it to the plugin instead of the paver files?

Here’s my current solution (jquery.init.js file).

(function($){
  $( document ).ready(function() {
    // Shortcode init
    $('.easy-panorama').paver({
      gracefulFailure: easyPanorama_localize_init_var.panorama.gracefulFailure,
      failureMessage: easyPanorama_localize_init_var.panorama.failureMessage,
      failureMessageInsert: easyPanorama_localize_init_var.panorama.failureMessageInsert,
      meta: easyPanorama_localize_init_var.panorama.meta,
      minimumOverflow: easyPanorama_localize_init_var.panorama.minimumOverflow,
      startPosition: easyPanorama_localize_init_var.panorama.startPosition
    });
	
	//by https://stackoverflow.com/questions/19401633/how-to-fire-an-event-on-class-change-using-jquery/19401707
	var $paverBlock = $('.easy-panorama-block');
	if ($paverBlock.length > 0) {
		var observer = new MutationObserver(function(mutations) {
		  mutations.forEach(function(mutation) {
			if (mutation.attributeName === 'class') {
			  var attributeValue = $(mutation.target).prop(mutation.attributeName);
			  if (attributeValue.indexOf('paver--fallback') > -1) {
					console.log('Paver is in fallbackend!');
					
					$paverTarget = $(mutation.target);			  
					$paverTarget.css('overflow-x', 'scroll');
					$paverTarget.find('img').css('height', '100%');
					$paverTarget.find('img').css('max-width', 'none');
					$paverTarget.find('img').attr('srcset', '');
					$paverTarget.parent().find('.paver__fallbackMessage').css('font-size', 'x-small');
					$paverTarget.parent().find('.paver__fallbackMessage').css('font-weight', 'bold');
					$paverTarget.parent().append('<figcaption>' + $paverTarget.find('img').attr('title') + '</figcaption>').css('text-align', 'center');
				  
			  }
			}
		  });
		});

		for (var i=0; i<$paverBlock.length; i++) {
			observer.observe($paverBlock[i], {
			  attributes: true
			});
		}		
	}	
	
	// Block init
    $('.easy-panorama-block').paver();
	
  });
})(jQuery);

Initially I wanted to listen to the fallbackend.paver from paver event. But somehow I was not able to, if someone could help me out here, you’re more then welcome:-) So as workaround I added the mutation listener for mutation of the css attribute (adding of the class ‘paver–fallback’).

All the best,

Fabian

I got the solution by myself. By using the Samsung Internet Browser and debugging tools I got the following warning:

[Deprecation] The deviceorientation event is deprecated on insecure origins, and support will be removed in the future. You should consider switching your application to a secure origin, such as HTTPS.

The issue was, that I was using HTTP instead of HTTPS!