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.

Post Meta

ShareThis

Tweet This Facebook This Yahoo This Digg This Delicious This StumbleUpon This Email ShareThis

14 Comments

  1. Andy's gravatar Andy

    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?

    • 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.

      • Andy's gravatar Andy

        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.

  2. Andy's gravatar Andy

    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.

  3. 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).

    • Andy's gravatar Andy

      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.

  4. DanSoccer9's gravatar DanSoccer9

    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!!

  5. Jason's gravatar Jason

    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.

  6. Jason's gravatar Jason

    Cheers for such a quick reply, this has pointed me into the right direction!! :lol:

  7. jack's gravatar jack

    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

    • 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.

Leave a Reply

Your email is never published nor shared. Required fields are marked *

*

*

:twisted: :evil: :oops: :roll: :cry: :lol: :cool: :shock: :sad: :smile: :???: :grin: :razz: :eek: :mad: :neutral: :wink: :?:

Comment Policy