bgStretcher jQuery Plugin Allows to Add Background Image to Page and Proportionally Resize it to Fill Entire Window Area.

Framework: jQuery Listed in: Effects

Description

bgStretcher 2011 (Background Stretcher) is a jQuery plug-in which allows you to add a large image (or a set of images) to the background of your web page and will proportionally resize the image(s) to fill the entire window area. The plug-in will work as a slideshow if multiple images mode is used (the speed and duration for the slideshow is configurable).
bgStretcher 2011 has tons of new features suggested by our users. We appreciate all your feedback, and you will see below that we have implemented many new features and functions requested. Please continue to help us improve it by leaving suggestions in our comments area or you may contact us directly.

Features

Unobtrusive script, simple to setup
Works with all modern browsers
Supports single and multiple images

How to Use

1. Download bgStretcher script. The package already contains the jQuery framework.

2. Add the following code to your <head>…</head> tag to connect jQuery framework, bgStretcher plugin and CSS. (Make sure paths to files are correct.)

{code type=html}
<script type=”text/javascript” src=”../jquery-1.5.2.min.js”></script>
<script type=”text/javascript” src=”../bgstretcher.js”></script>
<link rel=”stylesheet” href=”../bgstretcher.css” />
{/code}

3. Use the following code to initialize the bgStretcher (see Options section below for details):

{code type=php}
<script type=”text/javascript”>
$(document).ready(function(){
// Initialize Backgound Stretcher
$(’BODY’).bgStretcher({
images: ['images/sample-1.jpg', 'images/sample-2.jpg', 'images/sample-3.jpg', 'images/sample-4.jpg'], imageWidth: 1024, imageHeight: 768
});
});
</script>
{/code}

And if you want to initialize plugin for custom div use next:
{code type=php}
<script type=”text/javascript”>
$(document).ready(function(){
// Initialize Backgound Stretcher
$(’.classname-of-div’).bgStretcher({
images: ['images/sample-1.jpg', 'images/sample-2.jpg', 'images/sample-3.jpg', 'images/sample-4.jpg'], imageWidth: 1024, imageHeight: 768
});
});
</script>
{/code}

4. Insert content of your page inside BODY or custom DIV:

{code type=html}
<body>
<div class=”classname-of-div”>
Your content goes here…
</div>
</body>
{/code}

That’s it ;) Click the Demo button to see it in action.

Options

Configuration Option	Default Value	Description
imageContainer	bgstretcher	bgStretcher will automatically build structure for the images list in a DOM tree. This parameter is ID for the images holder. Try inspecting the tree with a FireBug to get an idea how it’s constructed.
resizeProportionally	true	Indicates if background image(s) will be resized proportionally or not.
resizeAnimate	false	Indicates if background image(s) will be resized with animation. (Be careful, this may slow down some PCs if your images are large.)
images	empty	An array containing list of images to be displayed on page’s background.
imageWidth	1024	Original image’s width.
imageHeight	768	Original image’s height.
maxWidth	auto	Maximum image’s width.
maxHeight	auto	Maximum image’s height.
nextSlideDelay	3000 (3 seconds)	Numeric value in milliseconds. The parameter sets delay until next slide should start.
slideShowSpeed	normal	Numeric value in milliseconds or jQuery string value (’fast’, ‘normal’, ’slow’). The parameter sets the speed of transition between images.
slideShow	true	Allows or disallows slideshow functionality.
transitionEffect	fade	Transition effect (use also: none, simpleSlide, superSlide).
slideDirection	N	Slide Diraction: N – north, S – south, W – west, E – East (if transitionEffect = superSlide use also: NW, NE, SW, SE).
sequenceMode	normal	Sequence mode (use also: back, random)
buttonPrev	empty	Previous button CSS selector
buttonNext	empty	Next button CSS selector
pagination	empty	CSS selector for pagination
anchoring	‘left top’	Anchoring bgStrtcher area regarding window
anchoringImg	‘left top’	Anchoring images regarding window
preloadImg	false	For Preload images use true
stratElementIndex	0	Start element index
callbackfunction	null	Name of callback function

Methods

Method Name	Description
$(objID).bgStretcher.play()	Resume background slideshow
$(objID).bgStretcher.pause()	Pause background slideshow
$(objID).bgStretcher.sliderDestroy()	Destroy background slideshow

Browser Compatibility

Tested in:

MS Internet Explorer 6, 7, 8, 9
Mozilla Firefox 2, 3, 4
Opera 9+
Apple Safari
Google Chrome

Leave a Comment

Kristoffer

June 19, 2012

Hey
I’m having a problem with the start and pause function.
When I start the slideshow on this site http://www.eyesindk.com/ i skips the first image, and goes to the second image. I shows a quick fadein/fadeout with image #1 and then on to #2

Julian Moreno

June 19, 2012

Hi:

After installig and working well for a time, the Chrome console is showing me an error which I read the next in the bgStrecher.js file:

Uncaught TypeError: Cannot call method ’split’ of undefined (line 212).

I read that in the line 617 it is site to ‘left top’, so I don’t understand.

Any body can help me?

Casey – ajaxBlender

June 20, 2012

Hello Julian,

Unfortunately we were unable to recreate the issue you are describing. Would it be possible for you to provide a link to the site where you have installed the script? We can take a look at it and see if there is a simple solution. Please post the link here or email us at support@htmlblender.com

Thank you,

Casey

Scott

June 21, 2012

Could you make the startElementIndex controlling even in random mode? I mean so you always start with the index you pick like 0 and then start randomly from there?

Otherwise, great script!

Juergen

June 22, 2012

Hi, i would also like to know, if it is possible to add thumbnails or coins, which show the user, which picture he is watching right now.

Casey – ajaxBlender

June 22, 2012

Hello Scott,

When set to random, the script will randomly select a starting image, therefore setting startElementIndex will have no effect. If you would like this functionality, please contact us at support@ajaxblender.com and we can arrange a project to add this functionality for you.

Thank you,

Casey

Casey – ajaxBlender

June 23, 2012

Hello Juergen,

Unfortunately the functionality you are describing is not a part of the bgStretcher II script. If you would like this functionality, please contact us at support@ajaxblender.com and we can arrange a project to add this functionality for you.

Thank you,

Casey

Nicola Elvin

June 25, 2012

Hi, is it possible to choose an image to go to once the slide show has started? I want the user to click one of 4 boxes that correspond with one of 4 background Images. When they click that element, I want the background stretcher to use the image I associate with that.

Casey – ajaxBlender

June 26, 2012

Hello Nicola,

Thank you,

Casey

Jeremy Carlson

June 27, 2012

I’m using a custom div for the stretcher, rather than the body tag. So my content is within .bgstrecher-page. My content looks like it is on top of the slider, but nothing is clickable anymore. Almost like a clear div is on top of my content. What do I need to do to change that.

Abhilash Raj R.S

June 30, 2012

Is this script free to use in commercial projects or not?

Casey – ajaxBlender

June 30, 2012

Hello Jeremy,

Unfortunately we were unable to recreate the issue you are describing, but it sounds like a z-index issue. Would it be possible for you to provide a link to the site where you have installed the script? We can take a look at it and see if there is a simple solution. Please post the link here or email us at support@htmlblender.com

Thank you,

Casey

Casey – ajaxBlender

July 2, 2012

Hello Abhilash,

Any scripts on our site which are listed as created by ajaxBlender are free and available under GPL3:
http://www.gnu.org/copyleft/gpl.html

I hope that answers your question, but please let us know if you need any further clarification.

Thank you,

Casey

Kashif Munir

July 25, 2012

Really nice Plugin. i am going to use this. need to know some thing id this plugin supported with ipad and iPhone???

Kristoffer Eriksen

August 3, 2012

Hey
I’m still having problems with the issue written above

“Hey
I’m having a problem with the start and pause function.
When I start the slideshow on this site http://www.eyesindk.com/ i skips the first image, and goes to the second image. I shows a quick fadein/fadeout with image #1 and then on to #2″
Any help or suggestions would be appriciated

Best Regards
Kristoffer

Casey – ajaxBlender

August 8, 2012

Hello Kristoffer,

We took a look at the link you provided, however there does not seem to be a simple solution. If you would like further assistance with configuring this script on your site, please contact us at support@ajaxblender.com

Thank you,

Casey

Dejan

August 9, 2012

Hey, when i try to set some different “transitionEffect” it just breaks the plugin? Even if i set it to default “transitionEffect: fade” it’s not working. It only works when i completely remove it. any idea?
Thanks

Casey – ajaxBlender

August 11, 2012

Hello Dejan,

Thank you,

Casey

Kim Williams

August 20, 2012

The background is not stretching in IE or AOL. It works great in Firefox.

Ken

August 24, 2012

Hey Casey,
If I want to add a link for each background images,what am I gonna do?

Look forward to you help.

Thanks.

John

August 27, 2012

I’m Still having difficulties getting the bgstretcher to stop on last step.

I ‘know’ that I have 3 images (although it would be great to work with any number of images) and am using the following code:

slideShow: true, callbackfunction:function () { if ($('.bgs-current').index() == 2) { $('body').bgstretcher.pause;}}

In Firefox it seems to work, but in ie it stops the page from loading. It then also (in FF) gives the following error:

TypeError: $("body").bgstretcher is undefined

It is included in the page like so:

$('body').bgStretcher({

Does anyone have any suggestions what I’m doing wrong?

Many thanks,

John

ajaxBlender.com

August 28, 2012

John,

$('body').bgstretcher.pause;

should be:

$('body').bgstretcher.pause();

Let me know if that doesn’t work for you.

Thanks!

Travis

john

August 29, 2012

Hi, Thanks for that, i tried it and got the same error…

ajaxBlender.com

August 31, 2012

John,

There could be problem with case sensitivity (bgStretcher instead of bgstretcher) or a problem with linking the bgStretcher script.

Could you please provide (or email) the URL to us and we will inspect the source code. This should not take too long to review. With access to it, we will be able to tell you exactly where the issue is.

Thanks,

Travis

Andre

September 13, 2012

Hey! Great plugin. I want to display #prev en #next with more than 1 image and hide them if I have only one image. How can I do that?

Steve

September 27, 2012

Is it possible to have the slideshow pause when clicking on an image (link)? Thanks!

ajaxBlender.com

October 2, 2012

Hi Steve,

There is pause and resume functionality in the slider, by default. This is in the documentation, But from the demo page, you can review the JavaScript for it, and apply this to the image, instead of a link. Also, see the comment by Darren on 08-28-2011. Hope this helps.

Thanks!

Travis

Bruce

October 18, 2012

Sorry guys, but this tool doesn’t work in IE ;( Check my website in IE web-producties.nl and you will see. But in Chrome and Firefox it works great!

ajaxBlender.com

October 18, 2012

Bruce,

I checked in IE9 and can’t recreate the issue. What version of IE are you using? And what is your screen resolution?

Thanks,

Travis

Denis

October 23, 2012

Great script.
I have a question: is it possible to stop the animation automatically at the end of the fade?

Denis

November 6, 2012

Sorry, i’m idiot. The solution (pause the animation with callback function) was already written in the previous comments and I had not noticed.

Ajay

January 21, 2013

How do you set original image height and width?

Casey – ajaxBlender

January 22, 2013

Anjay, you can use the imageHeight and imageWidth properties to set the original image height and width.

Nick, it appears that bgStretcher II is using a function that has been removed from jQuery 1.9.0 (the latest version). We will be updating bgStretcher soon, but for the time being, you can user an older version of jQuery. Unfortunately I cannot provide a better solution than this right now, but we will be updating the plugin soon. Thanks for catching the error and letting us know!

Nick

February 1, 2013

I have used bgstretcher successfully on a few project, thank you for your plugin.

However I am having a strange issue on my latest site, when I try to call bgstretcher on the body tag:

$(’body’).bgStretcher

Timestamp: 2/1/13 4:17:37 PM
Error: TypeError: $.browser is undefined
Source File: http://stage2.curran-connors.com/anderson/js/bgstretcher.js
Line: 159

Any idea why this would be happening?

greg

February 6, 2013

Can’t have 2 bgstretchers on one page?

May 16, 2013

Having trouble implementing this and getting it to work. The only thing I changed in the code is the image name and the size, and its not working at all.

here is my code:

$(document).ready(function(){
// Initialize Backgound Stretcher
$(’BODY’).bgStretcher({
images: ['images/cubed-background.png'], imageWidth: 1080, imageHeight: 810
});
});