1

In drupal I AT themes, views with slideshow of json2 and cycle plugin. I set the options for the plugin like this : Make views slideshow responsive - remove inline styles

  • height auto , width auto , containerResize 0 , slideResize 0 , fit 0

Result: - In chrome works perfect - IE and firefox not responsive

Probably something to do with the html but how to find out where en how. Can it be sold with some CSS? Any suggestions?

1

I use this code

     $(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);
              });

        });

and it works perfectly. you can also add some css to avoid too much high height like:

@media screen and (min-width: 980px){
 .al-slideshow img{
       height: 650px !important;
   }
}

The following css code is also needed

.views_slideshow_cycle_main { width: 100% !important; }
.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; }
4
  • nice code. I never add code like this to drupal. How can I apply it? – Justme Mar 29 '15 at 7:04
  • Add this to your javascript file. you first need to define the js file in theme.info then create the js file in there. – M a m a D Mar 29 '15 at 7:05
  • don't forget to add the css code – M a m a D Mar 29 '15 at 7:10
  • Only the css was already enough. thxs – Justme Mar 29 '15 at 7:22

Not the answer you're looking for? Browse other questions tagged or ask your own question.