When moving to Drupal 8 I replaced the more default views slideshow for this module. I like it very much so far. However, I need the (basic) functionality from the Supersized JQuery library for Flexslider. I don't want to add yet another library so I searched for a more minimalistic approach by adding the basic JQuery in a theme .js file (which was sitting there already).

The following code does enough to have flexslider images fit to window size whilst maintaining aspect ratios:

.flexslider .slides img {
	width: auto;
	height: auto;
}

(You might want to add some ID to make this CSS more specific).

Drupal.behaviors.<yourthemename> = {
    attach: function supersize(context) {
      var slideObjects = $(context).find( "ul.slides li img" );
      var windowHeight = $( window ).height();
      var windowWidth = $( window ).width();
      var windowRatio = $( window ).height() / $( window ).width();

      slideObjects.each(function( index ) {
        var slideHeight = $( this ).context.naturalHeight;
        var slideWidth = $( this ).context.naturalWidth;
        var slideRatio = slideHeight / slideWidth;

        if (slideRatio < windowRatio) {
          var displayWidth = (windowHeight / slideHeight) * slideWidth;
          var marginLeft = (displayWidth - windowWidth) / -2;

          $( this ).css({ 'width': displayWidth, 'height': windowHeight, 'margin-left': marginLeft });
        } else {
          var displayHeight = (windowWidth / slideWidth) * slideHeight;
          var marginTop = (displayHeight - windowHeight ) / -2;

          $( this ).css({'width': windowWidth, 'height': displayHeight, 'margin-top': marginTop });
        }
      })
    }
  };

This works when loading the window initially. However, the code should be triggered also on a window.resize event. But I can't find a way to add this extra event unless duplicating all of the logic. Help is much appreciated.

Kind regards,
Eric

Comments

solide-echt created an issue.