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

ghost commented Apr 8, 2013

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

@minethisis
Copy link

Thanks srobbin!
It worked perfectly for me.

@scperry19
Copy link

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?

@odera89
Copy link

odera89 commented Sep 2, 2014

Thanks.

@Siddharta11
Copy link

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?

Copy link

ghost commented Sep 17, 2014

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});

@BillyJC
Copy link

BillyJC commented Nov 8, 2019

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

@srobbin
Copy link
Author

srobbin commented Nov 9, 2019

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

@BillyJC
Copy link

BillyJC commented Nov 9, 2019

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]

@BillyJC
Copy link

BillyJC commented Nov 9, 2019

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

@BillyJC
Copy link

BillyJC commented Nov 16, 2019

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

@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