Create A Fullscreen Image Background Slideshow Using jQuery And HTML For Website

Share:

Create A Full screen Image Background Slideshow Using jQuery And HTML For Website. Still discussing about the slideshow, in this post we will discuss how to create a website with fullscreen image background slideshow. Although actually a image background can slow the loading of a website but a image background that has a positive side in helping to beautify the look of a website and may even provide a more in-depth description than a text.
Create A Full screen Image Background Slideshow Using jQuery And HTML For WebsiteFull image background slideshow can be implemented on a photography website, tourism website, gallery website, fashion website and other websites including your personal website. An example is the following website: formentini.it, and tom-edwards.fr. Both of these websites can be our inspiration in creating websites with fullscreen image background slideshow effects.

Create A Full screen Image Background Slideshow Using jQuery And HTML For Website

Now, if you are wondering how to create a full image background with slideshow effect ? Follow the tutorial below ..

Download Now Create A Full screen Image Background Slideshow Using jQuery And HTML For Website

Create HTML Code For Full Image Background Slideshow
In the body tag you can fill with any html code without the need to create an html image slideshow because the image will be displayed using the jQuery script. As an example we will fill the page with the following html code :

<div class="wrapper">
	<div class="container">
		<h1><span style="font-size:29px;"><small>~ Indonesian Mountains ~</small></span> Make An Exciting Adventures</h1>
		<p>Adventures in nature will make sensation for you. Visiting exotic mountains and feel a thrilling adventure here, only in the mountains of Indonesia</p>
	    <img src="http://4.bp.blogspot.com/-73yPZN2w2aM/UnNFGgbFbUI/AAAAAAAABJc/9ZO0InAHFBo/s1600/Create+A+Fullscreen+Image+Background+Slideshow+Using+jQuery+And+HTML+For+Website+7.jpg" width="320px" height="230px"/>
	</div>
	<div class="footer">
		<p style="font-size:14px;">&copy; copyright <a href="http://tutorial.world.edu">Tutorial.World.Edu</a></p>
	</div>
</div>

Create CSS Code For Full Image Background Slideshow
Css code would be needed to beautify html code. And the following css code to beautify html code above :

<style type="text/css">
	h1 {font-size:37px;color:black; text-align:center; margin-top:0;font-family: Garamond, EB Garamond, Georgia, serif;}
	h1 a {text-decoration: none;color:black; text-align:center;}
	p {color:#fff; text-align:center;font-family: 'Segoe UI', Tahoma, Arial, Helvetica, Sans-Serif;}
	p a {text-decoration: none;color:#fff;}
	body {background: #f4f4f4;}
	.wrapper {width:400px; margin: 0 auto; padding: 20px;float:left;}
	.container {
	    opacity:0.7;
        background-color:orange;
		border-radius: 5px;
		box-shadow: 0px 0px 10px rgba(0,0,0,.5);
		padding:40px;
		margin:10px auto 0px auto;
	}
	.footer{
        background-color:#000;
		border-radius: 5px;
		box-shadow: 0px 0px 10px rgba(0,0,0,.5);
		padding:5px;
		margin:0px auto 0px auto;	
	}
</style>

Create jQuery Script For Full Image Background Slideshow
For some cases, the slideshow can be made โ€‹โ€‹using only some of the effects of css code, but for this case we will be easier to use jquery script. More detail, follows several scripts …
jquery.js

/*! Backstretch - v2.0.3 - 2012-11-30
* http://srobbin.com/jquery-plugins/backstretch/
* Copyright (c) 2012 Scott Robbin; Licensed MIT */

;(function ($, window, undefined) {
  'use strict';

  /* PLUGIN DEFINITION
   * ========================= */

  $.fn.backstretch = function (images, options) {
    // We need at least one image
    if (images === undefined || images.length === 0) {
      $.error("No images were supplied for Backstretch");
    }

    /*
     * Scroll the page one pixel to get the right window height on iOS
     * Pretty harmless for everyone else
    */
    if ($(window).scrollTop() === 0 ) {
      window.scrollTo(0, 0);
    }

    return this.each(function () {
      var $this = $(this)
        , obj = $this.data('backstretch');

      // If we've already attached Backstretch to this element, remove the old instance.
      if (obj) {
        // Merge the old options with the new
        options = $.extend(obj.options, options);

        // Remove the old instance
        obj.destroy(true);
      }

      obj = new Backstretch(this, images, options);
      $this.data('backstretch', obj);
    });
  };

  // If no element is supplied, we'll attach to body
  $.backstretch = function (images, options) {
    // Return the instance
    return $('body')
            .backstretch(images, options)
            .data('backstretch');
  };

  // Custom selector
  $.expr[':'].backstretch = function(elem) {
    return $(elem).data('backstretch') !== undefined;
  };

  /* DEFAULTS
   * ========================= */

  $.fn.backstretch.defaults = {
      centeredX: true   // Should we center the image on the X axis?
    , centeredY: true   // Should we center the image on the Y axis?
    , duration: 5000    // Amount of time in between slides (if slideshow)
    , fade: 0           // Speed of fade transition between slides
  };

  /* STYLES
   * 
   * Baked-in styles that we'll apply to our elements.
   * In an effort to keep the plugin simple, these are not exposed as options.
   * That said, anyone can override these in their own stylesheet.
   * ========================= */
  var styles = {
      wrap: {
          left: 0
        , top: 0
        , overflow: 'hidden'
        , margin: 0
        , padding: 0
        , height: '100%'
        , width: '100%'
        , zIndex: -999999
      }
    , img: {
          position: 'absolute'
        , display: 'none'
        , margin: 0
        , padding: 0
        , border: 'none'
        , width: 'auto'
        , height: 'auto'
        , maxWidth: 'none'
        , zIndex: -999999
      }
  };

  /* CLASS DEFINITION
   * ========================= */
  var Backstretch = function (container, images, options) {
    this.options = $.extend({}, $.fn.backstretch.defaults, options || {});

    /* In its simplest form, we allow Backstretch to be called on an image path.
     * e.g. $.backstretch('/path/to/image.jpg')
     * So, we need to turn this back into an array.
     */
    this.images = $.isArray(images) ? images : [images];

    // Preload images
    $.each(this.images, function () {
      $('<img />')[0].src = this;
    });    

    // Convenience reference to know if the container is body.
    this.isBody = container === document.body;

    /* We're keeping track of a few different elements
     *
     * Container: the element that Backstretch was called on.
     * Wrap: a DIV that we place the image into, so we can hide the overflow.
     * Root: Convenience reference to help calculate the correct height.
     */
    this.$container = $(container);
    this.$wrap = $('<div class="backstretch"></div>').css(styles.wrap).appendTo(this.$container);
    this.$root = this.isBody ? supportsFixedPosition ? $(window) : $(document) : this.$container;

    // Non-body elements need some style adjustments
    if (!this.isBody) {
      // If the container is statically positioned, we need to make it relative,
      // and if no zIndex is defined, we should set it to zero.
      var position = this.$container.css('position')
        , zIndex = this.$container.css('zIndex');

      this.$container.css({
          position: position === 'static' ? 'relative' : position
        , zIndex: zIndex === 'auto' ? 0 : zIndex
        , background: 'none'
      });
      
      // Needs a higher z-index
      this.$wrap.css({zIndex: -999998});
    }

    // Fixed or absolute positioning?
    this.$wrap.css({
      position: this.isBody && supportsFixedPosition ? 'fixed' : 'absolute'
    });

    // Set the first image
    this.index = 0;
    this.show(this.index);

    // Listen for resize
    $(window).on('resize.backstretch', $.proxy(this.resize, this))
             .on('orientationchange.backstretch', $.proxy(function () {
                // Need to do this in order to get the right window height
                if (this.isBody && window.pageYOffset === 0) {
                  window.scrollTo(0, 1);
                  this.resize();
                }
             }, this));
  };

  /* PUBLIC METHODS
   * ========================= */
  Backstretch.prototype = {
      resize: function () {
        try {
          var bgCSS = {left: 0, top: 0}
            , rootWidth = this.isBody ? this.$root.width() : this.$root.innerWidth()
            , bgWidth = rootWidth
            , rootHeight = this.isBody ? ( window.innerHeight ? window.innerHeight : this.$root.height() ) : this.$root.innerHeight()
            , bgHeight = bgWidth / this.$img.data('ratio')
            , bgOffset;

            // Make adjustments based on image ratio
            if (bgHeight >= rootHeight) {
                bgOffset = (bgHeight - rootHeight) / 2;
                if(this.options.centeredY) {
                  bgCSS.top = '-' + bgOffset + 'px';
                }
            } else {
                bgHeight = rootHeight;
                bgWidth = bgHeight * this.$img.data('ratio');
                bgOffset = (bgWidth - rootWidth) / 2;
                if(this.options.centeredX) {
                  bgCSS.left = '-' + bgOffset + 'px';
                }
            }

            this.$wrap.css({width: rootWidth, height: rootHeight})
                      .find('img:not(.deleteable)').css({width: bgWidth, height: bgHeight}).css(bgCSS);
        } catch(err) {
            // IE7 seems to trigger resize before the image is loaded.
            // This try/catch block is a hack to let it fail gracefully.
        }

        return this;
      }

      // Show the slide at a certain position
    , show: function (index) {
        // Validate index
        if (Math.abs(index) > this.images.length - 1) {
          return;
        } else {
          this.index = index;
        }

        // Vars
        var self = this
          , oldImage = self.$wrap.find('img').addClass('deleteable')
          , evt = $.Event('backstretch.show', {
              relatedTarget: self.$container[0]
            });

        // Pause the slideshow
        clearInterval(self.interval);

        // New image
        self.$img = $('<img />')
                      .css(styles.img)
                      .bind('load', function (e) {
                        var imgWidth = this.width || $(e.target).width()
                          , imgHeight = this.height || $(e.target).height();
                        
                        // Save the ratio
                        $(this).data('ratio', imgWidth / imgHeight);

                        // Show the image, then delete the old one
                        // "speed" option has been deprecated, but we want backwards compatibilty
                        $(this).fadeIn(self.options.speed || self.options.fade, function () {
                          oldImage.remove();

                          // Resume the slideshow
                          if (!self.paused) {
                            self.cycle();
                          }

                          // Trigger the event
                          self.$container.trigger(evt, self);
                        });

                        // Resize
                        self.resize();
                      })
                      .appendTo(self.$wrap);

        // Hack for IE img onload event
        self.$img.attr('src', self.images[index]);
        return self;
      }

    , next: function () {
        // Next slide
        return this.show(this.index < this.images.length - 1 ? this.index + 1 : 0);
      }

    , prev: function () {
        // Previous slide
        return this.show(this.index === 0 ? this.images.length - 1 : this.index - 1);
      }

    , pause: function () {
        // Pause the slideshow
        this.paused = true;
        return this;
      }

    , resume: function () {
        // Resume the slideshow
        this.paused = false;
        this.next();
        return this;
      }

    , cycle: function () {
        // Start/resume the slideshow
        if(this.images.length > 1) {
          // Clear the interval, just in case
          clearInterval(this.interval);

          this.interval = setInterval($.proxy(function () {
            // Check for paused slideshow
            if (!this.paused) {
              this.next();
            }
          }, this), this.options.duration);
        }
        return this;
      }

    , destroy: function (preserveBackground) {
        // Stop the resize events
        $(window).off('resize.backstretch orientationchange.backstretch');

        // Clear the interval
        clearInterval(this.interval);

        // Remove Backstretch
        if(!preserveBackground) {
          this.$wrap.remove();          
        }
        this.$container.removeData('backstretch');
      }
  };

  /* SUPPORTS FIXED POSITION?
   *
   * Based on code from jQuery Mobile 1.1.0
   * http://jquerymobile.com/
   *
   * In a nutshell, we need to figure out if fixed positioning is supported.
   * Unfortunately, this is very difficult to do on iOS, and usually involves
   * injecting content, scrolling the page, etc.. It's ugly.
   * jQuery Mobile uses this workaround. It's not ideal, but works.
   *
   * Modified to detect IE6
   * ========================= */

  var supportsFixedPosition = (function () {
    var ua = navigator.userAgent
      , platform = navigator.platform
        // Rendering engine is Webkit, and capture major version
      , wkmatch = ua.match( /AppleWebKit\/([0-9]+)/ )
      , wkversion = !!wkmatch && wkmatch[ 1 ]
      , ffmatch = ua.match( /Fennec\/([0-9]+)/ )
      , ffversion = !!ffmatch && ffmatch[ 1 ]
      , operammobilematch = ua.match( /Opera Mobi\/([0-9]+)/ )
      , omversion = !!operammobilematch && operammobilematch[ 1 ]
      , iematch = ua.match( /MSIE ([0-9]+)/ )
      , ieversion = !!iematch && iematch[ 1 ];

    return !(
      // iOS 4.3 and older : Platform is iPhone/Pad/Touch and Webkit version is less than 534 (ios5)
      ((platform.indexOf( "iPhone" ) > -1 || platform.indexOf( "iPad" ) > -1  || platform.indexOf( "iPod" ) > -1 ) && wkversion && wkversion < 534) ||
      
      // Opera Mini
      (window.operamini && ({}).toString.call( window.operamini ) === "[object OperaMini]") ||
      (operammobilematch && omversion < 7458) ||
      
      //Android lte 2.1: Platform is Android and Webkit version is less than 533 (Android 2.2)
      (ua.indexOf( "Android" ) > -1 && wkversion && wkversion < 533) ||
      
      // Firefox Mobile before 6.0 -
      (ffversion && ffversion < 6) ||
      
      // WebOS less than 3
      ("palmGetResource" in window && wkversion && wkversion < 534) ||
      
      // MeeGo
      (ua.indexOf( "MeeGo" ) > -1 && ua.indexOf( "NokiaBrowser/8.5.0" ) > -1) ||
      
      // IE6
      (ieversion && ieversion <= 6)
    );
  }());

}(jQuery, window));

Place the external links from this jquery script just above the external jquery file below. Save at the head tag of your website.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Don’t forget to add this jquery script on your web page.

<script>
    $.backstretch([
      "http://1.bp.blogspot.com/--cTos5C-ru4/UnNASEMETYI/AAAAAAAABIg/By9m5Ic1Tr8/s1600/bromo+Create+A+Fullscreen+Image+Background+Slideshow+Using+jQuery+And+HTML+For+Website+1.jpg",
      "http://3.bp.blogspot.com/-FkhojYM458U/UnNAizX39SI/AAAAAAAABIo/jc_an6f4RjQ/s1600/Kelimutu+Create+A+Fullscreen+Image+Background+Slideshow+Using+jQuery+And+HTML+For+Website+2.jpg",
      "http://4.bp.blogspot.com/-yjRpkzaujpM/UnNAzARpPyI/AAAAAAAABIw/lT2FrM5RZKU/s1600/River+Create+A+Fullscreen+Image+Background+Slideshow+Using+jQuery+And+HTML+For+Website+3.jpg",
      "http://4.bp.blogspot.com/-kcn7Bx-Crvg/UnNBH9znY-I/AAAAAAAABI4/pGv2L2jQvVw/s1600/sunrise+Create+A+Fullscreen+Image+Background+Slideshow+Using+jQuery+And+HTML+For+Website+4.jpg",
      "http://2.bp.blogspot.com/-M_E8qKA5r0w/UnNB4sNvHII/AAAAAAAABJE/CqwKghP76_s/s1600/Rinjani+Create+A+Fullscreen+Image+Background+Slideshow+Using+jQuery+And+HTML+For+Website+5.jpg",
      "http://2.bp.blogspot.com/-i8e0S93qY_w/UnND6sJNv9I/AAAAAAAABJQ/oOyzLPzsV1o/s1600/lavender+flower+of+bromo+Create+A+Fullscreen+Image+Background+Slideshow+Using+jQuery+And+HTML+For+Website+6.jpg"	  
    ], {
    	fade: 750,		//Speed of Fade
    	duration: 2000 	//Time of image display
    });
</script>

Put this jquery script in the body tag and replace the image url in the backstretch with your own image url.

Learn more, example page from fullscreen background image slideshow below
Full-Image-Background-Slideshow.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Create A Fullscreen Image Background Slideshow Using jQuery And HTML For Website </title>
<meta name="viewport" content="width=980">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.js"></script>
<style type="text/css">
	h1 {font-size:37px;color:black; text-align:center; margin-top:0;font-family: Garamond, EB Garamond, Georgia, serif;}
	h1 a {text-decoration: none;color:black; text-align:center;}
	p {color:#fff; text-align:center;font-family: 'Segoe UI', Tahoma, Arial, Helvetica, Sans-Serif;}
	p a {text-decoration: none;color:#fff;}
	body {background: #f4f4f4;}
	.wrapper {width:400px; margin: 0 auto; padding: 20px;float:left;}
	.container {
	    opacity:0.7;
        background-color:orange;
		border-radius: 5px;
		box-shadow: 0px 0px 10px rgba(0,0,0,.5);
		padding:40px;
		margin:10px auto 0px auto;
	}
	.footer{
        background-color:#000;
		border-radius: 5px;
		box-shadow: 0px 0px 10px rgba(0,0,0,.5);
		padding:5px;
		margin:0px auto 0px auto;	
	}
</style>
</head>
<body>
<script>
    $.backstretch([
      "http://1.bp.blogspot.com/--cTos5C-ru4/UnNASEMETYI/AAAAAAAABIg/By9m5Ic1Tr8/s1600/bromo+Create+A+Fullscreen+Image+Background+Slideshow+Using+jQuery+And+HTML+For+Website+1.jpg",
      "http://3.bp.blogspot.com/-FkhojYM458U/UnNAizX39SI/AAAAAAAABIo/jc_an6f4RjQ/s1600/Kelimutu+Create+A+Fullscreen+Image+Background+Slideshow+Using+jQuery+And+HTML+For+Website+2.jpg",
      "http://4.bp.blogspot.com/-yjRpkzaujpM/UnNAzARpPyI/AAAAAAAABIw/lT2FrM5RZKU/s1600/River+Create+A+Fullscreen+Image+Background+Slideshow+Using+jQuery+And+HTML+For+Website+3.jpg",
      "http://4.bp.blogspot.com/-kcn7Bx-Crvg/UnNBH9znY-I/AAAAAAAABI4/pGv2L2jQvVw/s1600/sunrise+Create+A+Fullscreen+Image+Background+Slideshow+Using+jQuery+And+HTML+For+Website+4.jpg",
      "http://2.bp.blogspot.com/-M_E8qKA5r0w/UnNB4sNvHII/AAAAAAAABJE/CqwKghP76_s/s1600/Rinjani+Create+A+Fullscreen+Image+Background+Slideshow+Using+jQuery+And+HTML+For+Website+5.jpg",
      "http://2.bp.blogspot.com/-i8e0S93qY_w/UnND6sJNv9I/AAAAAAAABJQ/oOyzLPzsV1o/s1600/lavender+flower+of+bromo+Create+A+Fullscreen+Image+Background+Slideshow+Using+jQuery+And+HTML+For+Website+6.jpg"	  
    ], {
    	fade: 750,		//Speed of Fade
    	duration: 2000 	//Time of image display
    });
</script>
<div class="wrapper">
	<div class="container">
		<h1><span style="font-size:29px;"><small>~ Indonesian Mountains ~</small></span> Make An Exciting Adventures</h1>
		<p>Adventures in nature will make sensation for you. Visiting exotic mountains and feel a thrilling adventure here, only in the mountains of Indonesia</p>
	    <img src="http://4.bp.blogspot.com/-73yPZN2w2aM/UnNFGgbFbUI/AAAAAAAABJc/9ZO0InAHFBo/s1600/Create+A+Fullscreen+Image+Background+Slideshow+Using+jQuery+And+HTML+For+Website+7.jpg" width="320px" height="230px"/>
	</div>
	<div class="footer">
		<p style="font-size:14px;">&copy; copyright <a href="http://tutorial.world.edu">Tutorial.World.Edu</a></p>
	</div>
</div>
</body>	
</body>

If you look through the browser, will appear as follows:
Create A Fullscreen Image Background Slideshow Using jQuery And HTML For WebsiteWell, now you can create a image background with own slideshow effect, please try and good luck ๐Ÿ™‚
Thanks for reading Create A Fullscreen Image Background Slideshow Using jQuery And HTML For Website

[Tutorial.World.Edu]

2 thoughts on “Create A Fullscreen Image Background Slideshow Using jQuery And HTML For Website

Leave a Reply

Your email address will not be published. Required fields are marked *