Creating a full screen, resizable slideshow in Drupal

Submitted by madmatter23 on Sat, 12/03/2011 - 19:39

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));

Tags:

Drupal Version Compatibility:

Comments

Zalakain

Mon, 03/05/2012 - 03:16

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!

Zalakain

Mon, 03/05/2012 - 03:53

Forget it, found the answer here:
http://drupal.org/node/304255

Thanks.

madmatter23

Wed, 03/07/2012 - 20:51

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.

mellamoanton

Fri, 06/08/2012 - 05:00

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.

madmatter23

Mon, 08/20/2012 - 13:40

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?

Anonymous

Tue, 07/24/2012 - 13:01

Why add this as a blog post and not submit a ticket to the actual project?

madmatter23

Mon, 08/20/2012 - 13:39

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.

Hotrocksi

Wed, 08/22/2012 - 02:21

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?

Hotrocksi

Wed, 08/22/2012 - 03:38

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

madmatter23

Thu, 08/23/2012 - 20:37

Are you attaching the resize function to the "img" tag? Also, which height returns as 0, and when? doc_height? image_height? new_height? Try to figure out line of the script first encounters and unexpected value.

brunopbarbosa

Tue, 01/29/2013 - 14:56

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 :)

seven3two

Sat, 02/23/2013 - 15:11

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.

Sabino

Thu, 04/18/2013 - 08:39

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-drupa... ???
thanks for reply !

Add new comment

More information about text formats

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.