4

I'm working on a slideshow on Drupal 7 with Views Slideshow. The only issue I have right now is to make the Frame "Height"(not the image) responsive when resizing the browser. I found many articles, questions and answers about how to make Views Slideshow responsive, but none of them work properly. I believe the "Frame" is causing this.

These articles I found does not really fix the height of Views Slideshow. Maybe I missing something.
- Make views slideshow responsive - remove inline styles
- Can't remove the height/width of the slide container

----- updated for @Patrick Ryan

I got some error from google chrome web browser after adding these js

enter image description here

----- updated on Aug. 20, 2014 @ 9:46am
I found the following script also fix the height. Its from drupal.org issue views Slideshow for Responsive design on #26

$(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);
  });
});
  • RE: js error - how/where did you add the js? Try changing $ to jQuery – Patrick Ryan Aug 15 '14 at 20:46
  • i just realize i need to add the "(function($){" before and "})(jQuery);" after your code lol. Now, its working!!! Many thanks @Patrick Ryan – CocoSkin Aug 15 '14 at 20:48
4

I normally take care of the height with javascript. First I make sure that I am handling the width properly with CSS:

.views-slideshow-cycle-main-frame,
.views-slideshow-cycle-main-frame-row,
.views-slideshow-cycle-main-frame-row img {
  width: 100% !important;
}

Then I create a function that sets the height. This will take whatever container your slideshow is in as a parameter and find the slideshow within it.

/* Slideshow resize function */
Drupal.theme.prototype.slideshowResizer = function (target){
  var slideheight = 0;
  $(target + ' .views-slideshow-cycle-main-frame-row').each(function(){
    slideheight = $(this).find('.views-slideshow-cycle-main-frame-row-item').innerHeight();
    if(slideheight != 0){
      $(target + ' .views-slideshow-cycle-main-frame').css('height',slideheight+'px');
      $(target + ' .views-slideshow-cycle-main-frame-row').css('height',slideheight+'px');
      return false;
    }
  });
};

And finally I call the function on the window resize event:

Drupal.behaviors.slideshowResize = {
  attach: function (context, settings) {            
    $('.your-slideshow-container', context).once('processed', function () {
      Drupal.theme('slideshowResizer', '.your-slideshow-container');
    });

    $(window).resize( function() {
      Drupal.theme('slideshowResizer', '.your-slideshow-container');
    });         
  }
}; 

Also, make sure your base img tag has height: auto;

  • Thanks for the reply. If I adding the first js on .info. where should I add the calling function? – CocoSkin Aug 15 '14 at 19:22
  • Both function and calling the function can be in the same JS document. I usually just drop them into my main JS file. – Patrick Ryan Aug 15 '14 at 19:26
  • tried few times still dont know what should i replace with ".your-slideshow-container". :( – CocoSkin Aug 15 '14 at 19:46
  • If your slideshow is in a block, you can use the blocks class. Or you can use any selector that wraps around .views-slideshow-cycle-main-frame-row. – Patrick Ryan Aug 15 '14 at 19:48
  • hmmm.... i replacing it with ".views-slideshow-cycle-main-frame", which is the container. Nothing happen on the slideshow but my theme changed. – CocoSkin Aug 15 '14 at 19:56

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.