Make "backstretch" slideshow display images randomly

kennyp · Nov 8, 2019

Hi:

The following "backstretch" script is working well as a slideshow with captions.

Can you please tell me what needs to be added to the script so that all images will display randomly?

Thanks

Code:

jQuery(document).ready(function($){
 
  var items = [
  
     
{ img: "images/backgrounds/karloff-frankenstein.jpg", caption: "Boris Karloff"},

    { img: "images/backgrounds/lon-chaney.jpg", caption: "Lon Chaney"},

    { img: "images/backgrounds/karloff-mummy.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/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();
        });
});

kennyp · Nov 18, 2019

The following Backstretch script now works displaying fading random images and captions.
However, the first image and caption appear only after a five seconds delay after page load,
or whatever time is set in "setInterval(loadRandomImage, 5000, images);" as if it were "setInterval."

Please let me know What I'm doing wrong or should be added to prevent the delay of the first image display?

Code:

<script src="/js/jquery-1.7.2.min.js"></script>
  <script src="/js/jquery.backstretch.js"></script>  
  <script src="/js/jquery.backstretch.captionjs"></script>

<script>

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

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

images[0] = {url: "/images/backgrounds/l&h.jpg", caption: "Stan Laurel and Oliver Hardy"};
images[1] = {url: "/images/backgrounds/sherlock-watson.jpg", caption: "Basil Rathbone and Nigel Bruce"};
images[2] = {url: "/images/backgrounds/powell-loy.jpg", caption: "William Powell and Myrna Loy"};
images[3] = {url: "/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>

<HTML>
<div id="caption">
</div>
[/HTML]

kennyp · Nov 19, 2019

I got the code to display fading random images immediately on page load, but the caption still does not display over the first image.
It displays with a five second delay, over the second image and thereafter. Do you know why?

Code:

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

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

images[0] = {url: "/images/backgrounds/l&h.jpg", caption: "Stan Laurel and Oliver Hardy"};
images[1] = {url: "/images/backgrounds/sherlock-watson.jpg", caption: "Basil Rathbone and Nigel Bruce"};
images[2] = {url: "/images/backgrounds/powell-loy.jpg", caption: "William Powell and Myrna Loy"};
images[3] = {url: "/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);
}


// we run the function once at the beginning.
loadRandomImage(images);

// Change images every 5 seconds
setInterval(loadRandomImage, 5000, images);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
<div id="caption"></div>

kennyp · Nov 19, 2019

Solved. Thanks anyway.

Slideshow not working properly	2	Jan 7, 2023
Survey details won't go through using php, ajax, Mysql	0	Oct 26, 2023
How to disable vertical image centering?	0	Jan 16, 2009
Add randomizing function to fade-effect slideshow?	2	Dec 18, 2003
Display of the image from JavaScript	3	Nov 14, 2008
Maintain div display between pages	2	Mar 26, 2007
Javascript breaks when images added	2	Oct 21, 2003
Help with 2 level tab menu	1	Jun 17, 2008

Make "backstretch" slideshow display images randomly

kennyp

kennyp

kennyp

kennyp

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads