Menu
I have 2 scripts, first a jquery backstretch slideshow, second enquire.register for a media query to destroy backstretch for all devices smaller than 1024px.
This works fine for the first img, or when I have only 1 bstretch-img respectively, but the following slides are being called again by backstrecth.
Looks like a minor problem, but i’m kind of lost how to combine these two. Help is much appreciated!
[code]
<script>
// Create an array of images that you’d like to use
var images = [“http://pascalgruenenfelder.ch/wp-content/uploads/bg/BGfyo.jpg”,
];
// A little script for preloading all of the images
// It’s not necessary, but generally a good idea
$(images).each(function(){
$(‘<img/>’)[0].src = this;
});
// The index variable will keep track of which image is currently showing
var index = 0;
// Call backstretch for the first time,
// Here was the first backstretch-instance
// Set an interval that increments the index and sets the new image
// Note: The fadeIn speed set above will be inherited
setInterval(function() {
index = (index >= images.length – 1) ? 0 : index + 1;
$.backstretch(images[index], {speed: 2000});
}, 10000);
</script>
<script>
enquire.register(‘screen and (min-width: 1024px)’, {
match: function() {
$.backstretch(images[index], {speed: 1});
},
unmatch: function() {
$.backstretch(‘destroy’);
}
});
</script>