Advanced jQuery background image slideshow

plugin.

I was searching around teh interweb for a piece of jQueried javascript that would rotate background images for the header of a site I’m thinking of redoing.

There’s a number out there but mainly just standard carousel type things for image viewing rather than background changing. The one I kept coming back to was Marco Kuiper’s Advanced jQuery Background Slideshow (demo).

Marco’s work put all the info for stuff like the blocks of text within the .js file, while I required a plugin style where I could have info generated in the html file passed to the script. Luckily Sylvain Papet from Com-Ocean had converted Marco’s script into such a plugin. Unfortunately it still didn’t quite meet my requirements. Couldn’t find a way for it to handle the markup spat out by a WordPress widget.

Anyway the main problem to begin with was getting the plugin to work, lot of people commentating on Marco’s original post seemed to be struggling as well. So after a bit of searching round and some actual work on my part, I think I may have cracked it.

I’ve changed a few things and added a couple. You can check out and download my version from here – this is version 1.0.1 there’s a new version (see below). There are three new options.


options = jQuery.extend({
slideshowSpeed: 6000,
method : "fade", /* slide or fade, default is fade */
fadeSpeed :2000, /* how quickly one image fades/slides into the next */
contDiv : "#header", /* id or class of div you want the images to appear in. */

Method: this is how the images change from one to the next. Default is fade as in the original or you can change it to slide so the images slide out to the left, revealing the next one.

fadeSpeed: This is the speed at which the fade or slide occurs.

contDiv: This is the id or class of the containing div you want the background images, control buttons and text boxes to be in. #header in the original can be changed to what ever you want, just remember the . for class or # for id. As I’ve kept the same css as Marco’s original a different way had to be found for the plugin to add the markup.

The images and text box options have been moved from the script to the html file. So your version of the following should be added below the plugin which is below the call for jQuery.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/plugin.js"></script>

	<script type="text/javascript">
	$(function() {
	    $('headerimgs').bgimgSlideshow({photos : [{
		"title" : "Stairs",
		"image" : "images/vacation.jpg",
		"url" : "http://www.sxc.hu/photo/1271909",
		"firstline" : "Going on",
		"secondline" : "vacation?"
	}, {
		"title" : "Office Appartments",
		"image" : "images/work.jpg",
		"url" : "http://www.sxc.hu/photo/1265695",
		"firstline" : "Or still busy at",
		"secondline" : "work?"
	}, {
		"title" : "Mountainbiking",
		"image" : "images/biking.jpg",
		"url" : "http://www.sxc.hu/photo/1221065",
		"firstline" : "Get out and be",
		"secondline" : "active"
	}, {
		"title" : "Mountains Landscape",
		"image" : "images/nature.jpg",
		"url" : "http://www.sxc.hu/photo/1271915",
		"firstline" : "Take a fresh breath of",
		"secondline" : "nature"
	}, {
		"title" : "Italian pizza",
		"image" : "images/food.jpg",
		"url" : "http://www.sxc.hu/photo/1042413",
		"firstline" : "Enjoy some delicious",
		"secondline" : "food"
	}]});
	});
	</script>

The images need the path to the folder they’re in from the html file.

You can view/download my version of things here – this is version 1.0.1 there’s a new version (see below) – and check them against the original files found at Marco’s site (link above).

I’ve checked it in the latest Chrome & Firefox and IE9 and it all seems to work but chances are there’ll be bugs somewhere and would be better to move some of the options out of the plugin file.

Edit: there’s a new version of the plugin available see this post.

14 Replies to “Advanced jQuery background image slideshow”

Andy says:
April 27, 2012 at 10:07 pm
Cool, I tracked you down from the marcofolio site! Were you able to figure out how to get the text to fade in with the image?
Reply
1. Toxic Web says:
  April 28, 2012 at 12:45 pm
  As it didn’t quite do what I required I kind of stopped working on it but if you make a couple of changes to the plugin.js file it can be done.
  On line 140 where it says
```
// Hide the header text
$("#headertxt").css({"display" : "none"});
```
  Change the .css to .hide
```
// Hide the header text
$("#headertxt").hide();
```
  Then on lines 158 & 166 where it says
```
$("#headertxt").css({"display" : "block"})
```
  Again change the .css this time to .show
```
$("#headertxt").show("slow")
```
  Can either be .show("slow") or a number .show(1000).
  Text should fade in now but it’ll disappear without a fade.
  Reply
  1. Andy says:
    April 30, 2012 at 6:41 pm
    The text fades, but the headertxt div fades in on the far left of the browser, and then snaps into the correct place after the fade is complete. I’ll see if I can figure this unless you have any quick pointers.
    Reply
    1. Andy says:
      April 30, 2012 at 6:55 pm
      Ehh I put the headertxt in a wrapper in the CSS, works now. Sorry to spam your page!
      Reply
Andy says:
April 30, 2012 at 6:22 pm
Thank you! I’m a javascript novice, so I really appreciate any nudge in the right direction.
I’ll check this out.
Also thanks for digging up the old file too, seeing that it’s been 7 months since you posted.
Reply
Toxic Web says:
May 1, 2012 at 10:28 am
Not spam if it’s a legit question.
Anyway when making the changes I completely forgot the test version I had was quite a bit different from the download – js/css & html – so just checked and this could be better for you.
From the original plugin.js file on line 140 where it says
```
// Hide the header text
$("#headertxt").css({"display" : "none"});
```
Leave it like that
Then on lines 157 & 165 where it says
```
$("#headertxt").css({"display" : "block"})
```
Again change the .css this time to .fadeIn
```
$("#headertxt").fadeIn("slow")
```
Can either be .fadeIn("slow") or a time in milliseconds .fadeIn(2000).
Reply
1. Andy says:
  May 1, 2012 at 9:08 pm
  Thanks! Yes I was able to research and determine that there was a .fadeIn and replaced .show with it. Thank you for all the help.
  Reply
DanSoccer9 says:
May 31, 2012 at 7:20 pm
I just found Marco’s code a couple days ago and your plug in makes that code way more functional and the final project look much sharper. THANK YOU!!
Reply
1. Toxic Web says:
  June 1, 2012 at 12:02 pm
  Cheers
  Reply

Good afternoon, you wouldn’t happen to know how to make the background image a hyperlink?

Had a bit of trouble with this one. So not quite making the actual image a link but adding an overlay. The link is the one associated with the image.

In the plugin.js line 18


<div id="headerimg1" class="headerimg"></div>
<div id="headerimg2" class="headerimg"></div>

add the anchor…


<div id="headerimg1" class="headerimg"></div>
<div id="headerimg2" class="headerimg"></div>
<a href="#" id="full-click"></a>

Then line 147 or there abouts…


$("#pictureduri")
.attr("href", photoObject.url)
.html(photoObject.title);

add the #full-click


$("#pictureduri")
.attr("href", photoObject.url)
.html(photoObject.title);
$("#full-click")
.attr("href", photoObject.url);

Then add the css in style.css for #full-click


#full-click {
display: block;
height: 600px; /* or whatever the height of your header div is */
position: absolute;
top: 0;
left: 0;
right: 0;
z-index:0;
}

As I said quick and dirty and I’ve only tested it with Chrome, so might need a tweak here and there.

Jason says:
August 10, 2012 at 4:32 pm
Cheers for such a quick reply, this has pointed me into the right direction!! 😆
Reply
jack says:
September 5, 2012 at 4:16 pm
hi, thanks for your version of the slideshow. it’s way more functional than the original one.
only thing i’m missing is to have thumbnails (e.g 1 2 3…) added to the back/next navigation. is that somehow possible? ❓ best. jack
Reply
1. Toxic Web says:
  September 6, 2012 at 2:13 pm
  As with above, bit quick and dirty and works in Chrome, should give you a start if it’s not quite what you wanted.
  First up you need to download the new version, 1.2, which has been modified. ~~Slideshow v 1.2.~~ You can read about the changes here.
  But instead of a whole load of code changes also download version 1.2 with thumbnails then you can view the changes between the two sets of files.
  The .html, plugin.js and .css files have been changed.
  ~~v1.2 with thumbnails.~~
  Version 1.3.1 is the latest version, with all bells and whistles added.
  Reply

14 Replies to “Advanced jQuery background image slideshow”

Leave a ReplyCancel reply