Blog

Making Views Slideshow responsive

** UPDATE **

Usability issues aside, I’ve moved away from the previous technique to using a resize function as follows:

In your theme javascript file add the following lines:

(function($) { function resizeDiv() { var vpW = $(window).width(); var vpH = $(window).height(); var slideshowObjects = '.view-slideshow, .view-slideshow .views-slideshow-cycle-main-frame'; $(slideshowObjects).css({ 'width': vpW + 'px' 'height': vpH + 'px' }); } $(window).resize(function() { resizeDiv(); }); $(document).ready(function() { resizeDiv(); }); }) (jQuery);

In this example I’m setting the slideshow to fill the viewport. Replace the variables on lines 3...