Make "backstretch" slideshow display images randomly

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

  1. kennyp

    kennyp

    Joined:
    Nov 8, 2019
    Messages:
    1
    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

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.