--- a/views_slideshow_cycle/js/views_slideshow_cycle.js +++ b/views_slideshow_cycle/js/views_slideshow_cycle.js @@ -599,4 +599,35 @@ } } } + /** + * Responsive support from + * https://www.drupal.org/node/1510526#comment-7865577 + */ + $(window).resize(function(){ + $('.views_slideshow_cycle_main').each(function(){ + var cycleMain = $(this); + var img_width = 0, + img_height = 0; + var clearCSS = {width: "auto", height: "auto"}; + var cycle = cycleMain.children('.views-slideshow-cycle-main-frame'); + cycleElements = cycle.data("cycle.opts"); + cycle.css(clearCSS); + cycleMain.find('.views-slideshow-cycle-main-frame-row').each(function(i){ + $(this).css(clearCSS); + var tmp_img_width = $(this).width(); + var tmp_img_height = $(this).height(); + if(tmp_img_width > img_width) + img_width = tmp_img_width; + if(tmp_img_height > img_height) + img_height = tmp_img_height; + cycleElements.elements[i].cycleW = tmp_img_width; + cycleElements.elements[i].cycleH = tmp_img_height; + $(this).css({width: tmp_img_width, height: tmp_img_height}); + }); + cycleMain.height(img_height); + cycle.css({width: img_width, height: img_height}); + cycle.data("cycle.opts.elements", cycleElements); + }); + }); + })(jQuery); --- a/contrib/views_slideshow_cycle/views_slideshow_cycle.css +++ b/contrib/views_slideshow_cycle/views_slideshow_cycle.css @@ -25,3 +25,27 @@ .views_slideshow_cycle_pager.numbered a.activeSlide { text-decoration: underline; } + +.views_slideshow_cycle_main { + width: 100%; + float: left; +} +.views_slideshow_cycle_main .views-slideshow-cycle-main-frame { + width: 100% !important; + height: auto; +} +.views_slideshow_cycle_main .views-slideshow-cycle-main-frame-row { + width: 100% !important; + height: auto; +} +.views_slideshow_cycle_main .field-content { + max-width: 100%; + width: 100%; +} +.views_slideshow_cycle_main .field-content img { + max-width: 100%; + width: 100%; + height: auto; + margin: 0; + padding: 0; +}