Update 2013.04.26: we have published the jQuery version of this plugin, please see it if you prefer to use jQuery.
There are plenty of image slider and gallery scripts out there, but recently we had a pretty specific goal – to switch backgrounds of a website, and couldn’t find a good MooTools solution to accomplish it, so we had to create our own MooTools Class.
Here are the basic requirements:
- Only the first one has to be loaded, the rest must “wait for their turn” and load as needed. After all the images are loaded they just switch. That’s the unobtrusive part so that we can use a lot of heavy background images without having to worry about load times.
- The image has to be preloaded and only shown after the load is completed.
- It has to support responsive full screen background feature without breaking the image’s proportions on any screen/window size.
- As with all the scripts it has to be lightweight and play well with other front end features.
So here it is:
- Demo fixed size
- Demo full screen
- Download the latest version of the package with example pictures and working demos
- Visit GitHub repository
Full screen functionality uses both JavaScript and CSS so if you want the full screen option to work, download the whole package and see our bare bones style.css. The CSS part is based on Perfect Full Page Background Image / CSS-Only Technique #2 from css-tricks.
Images used in this demo are copyrighted and only intended for this demo.
Further information, usage and options:
It is pretty easy to use this script, just include bcat-bgswitcher.js as well as MooTools framework and initiate it like this:
<script type="text/javascript">
// array with image paths
// you can hide it within the scope
// and use your back end system to generate it
var srcBgArray = [
"/path/to/image1.jpg",
"/path/to/image2.jpg",
"/path/to/image3.jpg"
];
window.addEvent('domready', function(){
new BgSwitcher(
srcBgArray,
{alt: 'Alt text', wrapperId: 'some-id'}
);
});
</script>
First parameter is required and contains a JavaScript array with image URLs that is used to load and switch images. Second parameter is an options object that is optional itself. The class instance can be customized with following options:
- wrapperId – string id of the wrapper element to put images into, defaults to ‘bg-body’
- startIndex – integer array element to start with, defaults to 0
- timeout – integer timeout in milliseconds, defaults to 12000
- alt – string text to fill the alt attribute of each image, defaults to ‘Picture’,
- fullscreen – boolean telling if the images are stretched full screen – will remove the width and height attributes, the rest is done by CSS, defaults to false
The class works with MooTools 1.3 and 1.4 including the latest version at the time. It uses Asset.image from MooTools More to preload images but we load generic MooTools More package in the demo.
Browser support: IE8+ and other browsers that are not too old.
If you like this script please place a link to this post or our website, it’s not a requirement, just something that would make us a little happier 🙂
Hi,
This is a great piece of code !
Do you have any idea if it’s possible to make this work with Mootools 1.2.x ?
I’m stuck with this version and it seems that it’s not working with it.
Best
Renaud
Hi Renauld, thanks for your feedback. It should be possible to make it work in 1.2 but as you probably know, version compatibility is not the strongest point of MooTools so you’ll have to look into console and swap some functions per hand.
Here is what I had to do to make it work in 1.4 after it was written for 1.3:
– swap tween with fade calls to animate all properties
– new image style: ‘visibility: hidden; opacity: 0;’ or vise versa
So the initial image states and animation methods had to be changed, maybe it will be of some help. Post your test url if you’re stuck, I’ll look into it.
Yuriy
https://github.com/mootools/mootools-core/wiki/Upgrade-from-1.2-to-1.3
Thanks a lot
Why don’t you add it to forge?
hi Dirar, thanks for feedback 🙂 About the forge – It’s a good question. Actually I did try to do that and not once, they have some weird bug in their git scrapper that keeps rejecting the new stuff. I then registered and posted the bug, seen other people post it, came back after some time and eventually got tired. All in all it seems that MooTools is not as alive and well as it used to be
Yuriy
just out of curiosity tried again:
https://github.com/bcat-eu/moo-bgswitcher
“A “How to Use” section is required in your README.md”
“A description is required in your README.md”
they both are there and were copied from the guideline just to make sure, so the forge is still on hold
Thanks so much! Very elegant and straightforward compared to most of the others out there. I appreciate your good work.
Hi David, thanks a lot, nice to hear 🙂
Thankyou so much ! Wonderfull work ! Simple and perfect.
How about scaling images to adapt to navigator window size in fullscreen mode ?
thanks a lot !!!
Milazzo
Hi Milazzo, thanks for the feedback! Images are already being scaled (while retaining proportions and filling the viewport so some crop is inevitable).
What you might have noticed in the demo is the size of #wrapper element getting in a way of making viewport smaller. You can just drop it in your project or make it relative / responsive/ whatevs, you only need #bg-body and #bg-body img rules.
See the CSS-Only Technique #2 at css tricks ( http://css-tricks.com/perfect-full-page-background-image/ ) for the styles that we used here as well as their explanation.
Regards,
Yuriy
Yuriy, thanks for quick reply, but not working yet. An image smaller than navigator window strech perfectly, but bigger images are not shrinked (some images shrink a little bit), only cropped..
best regards,
Milazzo
Hey Milazzo, if you excluded container / wrapper styles and still need the images to scale differently, you might have to style these two selectors specifically for your project (or just pick another technique from the same css tricks article).
Regards,
Yuriy