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