Make "backstretch" slideshow display images randomly

Discussion in 'Javascript' started by kennyp, Nov 8, 2019.

  1. kennyp

    kennyp

    Joined:
    Nov 8, 2019
    Messages:
    4
    Likes Received:
    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 (Text):


    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: Nov 8, 2019
    kennyp, Nov 8, 2019
    #1
    1. Advertisements

  2. kennyp

    kennyp

    Joined:
    Nov 8, 2019
    Messages:
    4
    Likes Received:
    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 (Text):
    <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 18, 2019
    #2
    1. Advertisements

  3. kennyp

    kennyp

    Joined:
    Nov 8, 2019
    Messages:
    4
    Likes Received:
    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 (Text):
    // 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
    #3
  4. kennyp

    kennyp

    Joined:
    Nov 8, 2019
    Messages:
    4
    Likes Received:
    0
    Solved. Thanks anyway.
     
    kennyp, Nov 19, 2019
    #4
    1. 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 (here). After that, you can post your question and our members will help you out.