Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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>
@ghost

This comment has been minimized.

Copy link

@ghost ghost commented Apr 8, 2013

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

@minethisis

This comment has been minimized.

Copy link

@minethisis minethisis commented May 10, 2013

Thanks srobbin!
It worked perfectly for me.

@scperry19

This comment has been minimized.

Copy link

@scperry19 scperry19 commented Aug 14, 2014

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

This comment has been minimized.

Copy link

@odera89 odera89 commented Sep 2, 2014

Thanks.

@Siddharta11

This comment has been minimized.

Copy link

@Siddharta11 Siddharta11 commented Sep 10, 2014

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?

@ghost

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link
Owner Author

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

@BillyJC BillyJC commented Nov 9, 2019

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

@BillyJC

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link
Owner Author

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

This comment has been minimized.

Copy link

@BillyJC 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
You can’t perform that action at this time.