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; }
  • 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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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