Creating a full screen, resizable slideshow in Drupal

The Views Slideshow module makes the process of creating a slideshow in Drupal extremely easy, but I've always found one important feature to be missing: a fullscreen setting.

Here is a script that take a slide image (or any HTML element for that matter) and set it to be the size of the viewer's browser window (preserving the aspect ratio). This works with single elements or a set of elements. It's particularly useful if you'd like to set an image to be the background of a given page-- this will ensure that the image always covers the entire viewport.

I'd recommend dropping this code into a resize.js file located in your Drupal theme's folder. From there, just add the filename to your theme's .info file, and it will be loaded into every page of your site (if that's what you're going for).

Be sure to set the 'slides' variable to the appropriate target element, and you should be all set! (function ($) {

Drupal.behaviors.yourTheme = { attach: function (context, settings) {

  $(document).ready(function() { 

    // Define the target element(s)
    var slides = $("#views_slideshow_cycle_main_front_slide-block_1 .views-field img", context);

    // Resize on page load.
    slides.each( resize_slide );

    // Trigger resize of element on window resize.
    $(window).resize(function() {
       slides.each( resize_slide );
     });

    // Define resize function.
    function resize_slide() {
      var doc_width = $(window).width(); // can also use $(document).width(), which makes resizing faster
      var doc_height = $(window).height(); // can also use $(document).height(), which makes resizing faster

      var image_width = $(this).width();
      var image_height = $(this).height();

      var image_ratio = image_width/image_height;

      var new_width = doc_width;
      var new_height = Math.round(new_width/image_ratio);

      $(this).width(new_width);
      $(this).height(new_height);
      $(this).removeAttr('width').removeAttr('height');
      if (new_height<doc_height) {
        new_height = doc_height;
        new_width = Math.round(new_height*image_ratio);

        $(this).width(new_width);
        $(this).height(new_height);
        var width_offset = Math.round((new_width-doc_width)/2);

        $(this).css("left","-"+width_offset+"px");
      }
    }

  // End $(document).ready
  });
}

};

}(jQuery));

Hi madmatter23, first of all thanks for the script, I think this is what I have been going after for the last weeks! However, would like to ask you two questions about it, wonder if you can help me:
- would this work on D6? any changes needed?
- and, where/how do you state the resize.js file to be loaded in the .info file? Could you provide an example?

Thanks a lot!

In reply to by Zalakain

This should work on Drupal 6. The only change you'll have to make related to the way that you attach the JS to the drupal.behaviors object. The actual resizing bit should work fine with any recent version of jQuery.

Hi! This script works right when window/screen is horizontal, but it has problems with vertical devices -like smartphones, for example-. Problems only happen with Safari and Safari mobile -I think, I'm not sure- when web is loaded. If it's you who resizes the window, image fits perfect.

Do you have any idea?

Thanks in advance.

In reply to by mellamoanton

I haven't experienced that issue with this script myself. If I had to guess, I'd say that $(document).ready() may not be firing as expected. You could artificially fire a resize event after a short delay, maybe that would help?

In reply to by Anonymous

You can apply this to any grouping of images, whether they're generated by the Views Slideshow module or not. I also haven't written any snippets for adding this as a true Views plugin or display style. Feel free to modify the code and submit it if you would like.

I've set up this script, but the images are all distorted on my screen. When I output some of the values to firebug console I'm seeing an image height of '0', which then knocks on to give a distorted ratio, etc.

My javascript is a bit rudimentary and I tried to change it to "$(document).load" instead of .ready but it seemed to simply stop the script.

Any ideas?

In reply to by Hotrocksi

ok I noticed my error, changed the script to $(window.load) and the script fires fine, but the image heights are still returning 0. I'm using Drupal 7.12 with jQuery 1.4.4 if thats any use

Hi! First of all, thanks for this code, it works really weel, except for a tiny problem - if i resize my browser window, the image starts stretching vertically, no matter if i'm minimizing or enlarging the browser window. I'm not that familiar with jQuery, so could you please help me with this issue?

thanks in advance :)

i've been after this for the better part of 2 weeks and its been killing me. i basically start most if not all of my projects using the zen theme (html5 responsive) and creating sub themes. anyway, i found that once the window was stretched beyond the '#views_slideshow_cycle_teaser_section_' div height and size, the image simply exploded in height. it would not expand beyond that and not size proportionally. after much searching i found that normalize.css had all img tags at `max-width: 100%, height:auto`. i simply commented those out and the resizing was flawless. still needs a little centering rework but this works well.

Hi madmatter23, with this your js script can I get the same effect of this drupal theme http://themeforest.net/item/inspiro-b-premium-responsive-theme-for-drupal-7/full_screen_preview/3854468 ???
thanks for reply !

Hi madmatter23, I've been looking for a snippet like this for a lot of time!!! I think this would work for me, but it would really help me to see this snippet in accion in some webs, specially when the images are used as backgrounds. May you give me any link to some example, please?

Thanks in advance!!

Hey - I loaded the js fine, but still not effecting my slideshow. Not sure how to trouble shoot. I think my selector is correct. But cycle js loads after this. does that matter?

how to exactly do this? im stuck at "Be sure to set the 'slides' variable to the appropriate target element, and you should be all set!"

Add new comment

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.