Make "backstretch" slideshow display images randomly


Joined
Nov 8, 2019
Messages
11
Reaction score
0
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();
        });
});
 
Last edited:
Ad

Advertisements

Joined
Nov 8, 2019
Messages
11
Reaction score
0
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]
 
Joined
Nov 8, 2019
Messages
11
Reaction score
0
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>
 
Ad

Advertisements


Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top