Random Backstretch image

gistfile1.html

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

Thanks very much for your reply.
Sorry my web server can't be accessed by external PCs. I'm trying to find a solution.
As for keeping the slideshow with captions and making it random, I currently have the following script, but I don't know how to apply the random changes. Please show me how it's done?

[code]
jQuery(document).ready(function($){

	var items = [
		
                    { img: "images/backgrounds/karloff-frankenstein.jpg", caption: "Boris Karloff"},
		
		{ img: "images/backgrounds/bride-of-frankenstein.jpg", caption: "Elsa Lanchester and Boris Karloff"},
			
		{ img: "images/backgrounds/bela-lugosi.jpg", caption: "Bela Lugosi"},
		
		{ img: "images/backgrounds/karloff-bela.jpg", caption: "Boris Karloff and Bela Lugosi"},
		
		{ img: "images/backgrounds/orlok-in-bremen.jpg", caption: "Max Schreck"},

    ];
    var options = {
        fade: 2000,
        duration: 6000,
		
    };

    var images = $.map(items, function(i) { return i.img; });
    var slideshow = $.backstretch(images,options);

    $(window).on("backstretch.show", function(e, instance) {

        var theCaption = items[instance.index].caption;
        var theLink = items[instance.index].link;
        if (theLink) {
        	$(".backstretch-caption").html('<a href="'+theLink+'">'+theCaption+'</a>').show().addClass('animated fadeInUp');
        } else {
        	$(".backstretch-caption").text(theCaption).show().addClass('animated fadeInUp');
			
        }
    });
    $(window).on("backstretch.before", function(e, instance) {
    	$(".backstretch-caption").hide();
    });

});
[/CODE]

@srobbin
I believe the server/site is now accessible.

@srobbin

I managed to get the script below to successfully display random images - www.vipserve.dynu.com

With the additional code you also suggested, I'm attempting to add captions, but as it is below, one the first caption, "Laurel and Hardy" displays over every image, rather than the correct caption. What am I doing wrong?

<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"
    ];
    $(window).on("backstretch.show", function (e, instance) {
    $(".overlay-2").text( texts[instance.index] );
});
    $(window).on("backstretch.show", function (e, instance) {
    $(".overlay-2").text( texts[instance.index] );
});

$(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;background:rgba(255,0,0,.3);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>

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

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

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

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