[Drupal] How to Create Resizable and Full Screen Slideshows?

By using Views Slideshow module we could simplify the procedure of developing a slideshow in Drupal. As per the requirement I have found one feature lacking, i.e, a full screen option. I like to introduce a script that would turn slideshow images to the size of browser window. That is, it would turn image or html element to the measure of view port maintaining the content quality. This would be useful for setting an image as background of a page, so that entire viewing area would be covered.

For the purpose, I suggest adding this code into a resize.js file, which could be found inside Drupal theme folder. To load the script in our site, add the file name to the theme's settings (.info) file so that changes would be applied on all pages. Note: Need to set 'slides' var to particular element.

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

      $(document).ready(function() { 

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

        slides.each(resize_slide_content);

        $(document).resize(function() {
           slides.each( resize_slide_content );
         });

        // Resize function for the content.
        function resize_slide_content() {
          var document_width = $(document).width(); // using $(window).width(),could be an alternative.
          var document_height = $(document).height(); // using $(window).height(), could be an alternative.

          var img_width = $(this).width();
          var img_height = $(this).height();

          var img_ratio = img_width/img_height;

          var new_content_width = document_width;
          var new_content_height = Math.round(new_content_width/img_ratio);

          $(this).width(new_content_width);
          $(this).height(new_content_height);
          $(this).removeAttr('width').removeAttr('height');
          if (new_content_height < document_height) {
            new_content_height = document_height;
            new_content_width = Math.round(new_content_height*img_ratio);

            $(this).width(new_content_width);
            $(this).height(new_content_height);
            var width_offset_value = Math.round((new_content_width-document_width)/2);

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

Hope this information is useful.