plugin version 1.2.
Since posting about Marco Kuiper’s Advanced jQuery Background Slideshow, and the modifications I made to it it’s garnered a bit of interest and a few requests for various additions as you can see in the comments.
Well I’ve changed a couple of things since that first version, to make things a bit easier to use.
First up there’s the latest version of jQuery, 1.8.1, so it works with that – I’ve only checked it with Chrome, so other browsers may require some finessing, or dropping down a version of jQuery.
All the options have been moved from the plugin.js file to the .html file, as it really should be, with some new additions.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="js/plugin.js"></script>
<script type="text/javascript">
$(function() {
$('headerimgs').bgimgSlideshow({
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. */
imgDir : "images/",
markup1 : '<div id="headerimgs">\
<div id="headerimg1" class="headerimg"></div>\
<div id="headerimg2" class="headerimg"></div>\
</div>',
markup2 :'<div id="headernav-outer">\
<div id="headernav">\
<div id="back" class="btn"></div>\
<div id="control" class="btn"></div>\
<div id="next" class="btn"></div>\
</div>\
</div>\
<div id="headertxt">\
<p class="caption">\
<span id="firstline"></span>\
<a href="#" id="secondline"></a>\
</p>\
<p class="pictured">\
Pictured:\
<a href="#" id="pictureduri"></a>\
</p>\
</div>',
photos : [{
"title" : "Stairs",
"image" : "vacation.jpg",
"url" : "http://www.sxc.hu/photo/1271909",
"firstline" : "Going on",
"secondline" : "vacation?"
}, {
"title" : "Office Appartments",
"image" : "work.jpg",
"url" : "http://www.sxc.hu/photo/1265695",
"firstline" : "Or still busy at",
"secondline" : "work?"
}, {
"title" : "Mountainbiking",
"image" : "biking.jpg",
"url" : "http://www.sxc.hu/photo/1221065",
"firstline" : "Get out and be",
"secondline" : "active"
}, {
"title" : "Mountains Landscape",
"image" : "nature.jpg",
"url" : "http://www.sxc.hu/photo/1271915",
"firstline" : "Take a fresh breath of",
"secondline" : "nature"
}, {
"title" : "Italian pizza",
"image" : "food.jpg",
"url" : "http://www.sxc.hu/photo/1042413",
"firstline" : "Enjoy some delicious",
"secondline" : "food"
}]});
});
</script>
The images are now just the name of the image file and doesn’t include the folder path to the file, that’s part of the options imgDir. The value of this needs changed to reflect where the images are in relation to the .html file.
The plugin.js file has also been altered to reflect the image directory path option.
Download version 1.2 – version 1.0.1 is still available, so you can view the changes – there’s also a version 1.2 with thumbnails that was requested v1.2 thumbs.
The latest version is v1.3.1. It has added options for randomising, as asked about below in the comments, along with the thumbnails, which have been made better. And the whole thing has been cleaned up to come up error free when checked with JSHint and checked with the latest version of jQuery (1.9.1)
Great work with this, thanks very much.
I’m transferring from Marco’s original script to yours. I’d already made some customization’s such as having a quote instead of the ‘first line, second line’ and being able to control it’s position for each photo which is all working well with a few changes to your plugin. The one problem I’m stuck on is how to randomize the order of the array?
Had it working fine with Marco’s using
On the ‘photo’s’ array. But now you’ve got the array in the function call I just can’t work out how to do it. Any ideas? Thanks again…
Using your code snippet if you change…
…to…
And place that after…
Should randomise it for you.
I’ve added a random option in the latest version – download link – along with thumbnail option and cleaned the thumbnails so they work better. Also added active class to the thumbnails.