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>

Thank you! I used this and It helped out quite a bit!

Thanks srobbin!
It worked perfectly for me.

How would you do it if you have 1 single image that you want to appear a random number of multiple times? As in, click, randomly shows 1-5 of the same image?

Thanks.

Thanks. I get a random image on every refresh. But the slidefunction doesn't work anymore.
With the code beneath I get a nice fade in, but there's no transition/ slide to the next image in the array.

 // Use the random number to load a random image
$.backstretch(images[randomNumber], {
            fade: 850,
            duration: 7000
        });

How can I get a slideshow with a randomly selected image at the start?

Here is how I made a slideshow from a directory of images with random start/order:

PHP code:

function getImagesFromDir($path) {
    $files = glob($path.'*.jpg');
    shuffle($files); 
    $images = "[";
    foreach ($files as $slide) {
        $images .= "'$slide',";
    }
    return substr($images,0,strlen($images)-1) . "]";
}

$.backstretch(, {duration: 3000, fade: 2000});

To srobbin:

Thank you for backstretch. I'm using it successfully with jquery.backstretch.caption.js on my webserver, www.vipserve.dynu.com .
I would like to also add the random feature to it, but I haven't been able to get it to work. Please tell me how it can it be added?

Thanks

@BillyJC I'm not able to access your website, so I can't answer specifically, but I imagine you'll want to follow a pattern similar to the example above. However, instead of creating an array of image locations, you'll likely want to create an array of objects which reference the image/caption/etc.

var images = [
  { img: 'image1.jpg', caption: 'Caption 1' },
  { img: 'image2.jpg', caption: 'Caption 2' },
  { img: 'image3.jpg', caption: 'Caption 3' }
];

// Get a random number between 0 and the number of images
var randomNumber = Math.floor( Math.random() * images.length );

// Use the random object from the images array
var randomImage = images[randomNumber];

// Call the caption plugin and backstretch
$.whateverTheCaptionFunctionIs(randomImage.caption);
$.backstretch(randomImage.img);

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.