Skip to content

Instantly share code, notes, and snippets.

@srobbin
Created September 28, 2012 13:15
Show Gist options
  • Save srobbin/3799775 to your computer and use it in GitHub Desktop.
Save srobbin/3799775 to your computer and use it in GitHub Desktop.
Random Backstretch image
<script>
// Create an array of images that you'd like to use
var images = [
'image1.jpg'
, 'image2.jpg'
, 'image3.jpg'
];
// Get a random number between 0 and the number of images
var randomNumber = Math.floor( Math.random() * images.length );
// Use the random number to load a random image
$.backstretch(images[randomNumber]);
</script>
@BillyJC
Copy link

BillyJC commented Nov 16, 2019

@srobbin

Sorry for the wrong code above. The following is what I have so far, with which "Stan Laurel and Oliver Hardy" constantly displays over all images.

<script>	
var images = [ 

    "https://vipserve.dynu.com/images/backgrounds/l&h.jpg",
    "https://vipserve.dynu.com/images/backgrounds/sherlock-watson.jpg",
    "https://vipserve.dynu.com/images/backgrounds/powell-loy.jpg",
    "https://vipserve.dynu.com/images/backgrounds/conried-bergman-bogart.jpg",
    ];
	
$(images).each(function(){
 $("<img/>")[0].src = this;
 });

 var randomNumber = Math.floor( Math.random() * images.length );

 $.backstretch(images[randomNumber], {fade: 2000, speed: 5000});
 setInterval(function() {
 index = Math.floor( Math.random() * images.length );
 $.backstretch(images[index]);
 }, 5000);
 

  var texts = [
    "Laurel and Hardy",
    "Basil Rathbone and Nigel Bruce",
    "William Powel and Myrna Loy",
    "Paul Henreid, Ingrid Bergman and Humphrey Bogart"
];
    $(window).on("backstretch.show", function (e, instance) {
    $(".overlay").text( texts[instance.index] );
});

 </script>

 <div class="overlay" style="font-family:arial;font-size:2.5vw; font-weight:600; text-align:center;  position:fixed; bottom:0; margin-bottom:5px; text-shadow:2px 2px 2px #000000; width:100%; height:auto; overflow:hidden !important;" >
 </div>

@BillyJC
Copy link

BillyJC commented Nov 18, 2019

@srobbin

My apologies for all the non-working code I posted above. I wish I could have deleted it.

Finally, I got backstretch to work with displaying fading random images and captions. However, the first image and caption do not appear until five seconds after page load, or whatever time is set set in "setInterval(loadRandomImage, 5000, images);." Please let me know What I'm doing wrong or should be added to prevent the delay?


<script>

// Preload
$(images).each(function(){
$("<img/>")[0].src = this.url;});

var images = new Array(); //array of imgs objects

images[0] = {url: "https://vipserve.dynu.com/images/backgrounds/l&h.jpg", caption: "Stan Laurel and Oliver Hardy"};
images[1] = {url: "https://vipserve.dynu.com/images/backgrounds/sherlock-watson.jpg", caption: "Basil Rathbone and Nigel Bruce"};
images[2] = {url: "https://vipserve.dynu.com/images/backgrounds/powell-loy.jpg", caption: "William Powell and Myrna Loy"};
images[3] = {url: "https://vipserve.dynu.com/images/backgrounds/conried-bergman-bogart.jpg", caption: "Paul Heinreid, Ingrid Bergman and Humphrey Bogart"};

function loadRandomImage(imgs) {
  	var index = Math.floor(Math.random() * imgs.length);
    
    console.log("loadRandomImages(): index = "+ index);
    
    $.backstretch(imgs[index].url, {fade: 1500, speed: 5000}); 
	 
    $("#caption").html(imgs[index].caption);
}

// Change images every 6 seconds
setInterval(loadRandomImage, 5000, images);

</script>

    <div id="caption" style="font-family:arial;background:rgba(255,0,0,0);font-size:3vw; font-weight:600; text-align:center;  position:fixed;
    bottom:0; margin-bottom:5px; text-shadow:2px 2px 2px #000000; width:100%; height:auto; overflow:hidden !important;" >
    </div>

@srobbin
Copy link
Author

srobbin commented Nov 18, 2019

@BillyJC: I'm sorry, I don't think I'll be able to help you with this. I'd recommend posting on Stack Overflow, and see if someone there can help you out. Best of luck.

@BillyJC
Copy link

BillyJC commented Nov 18, 2019

@srobbin:

With all due respect, because so many requests have been made for these features, it would be desirable to simply post or have a new release of Backstretch with the options of having a randomizer and captions, instead of having these people continue to grapple for a solution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment