Results 1 to 2 of 2

Thread: Make "backstretch" slideshow display images randomly

  1. #1
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    230
    Thanks
    158
    Thanked 1 Time in 1 Post

    Default Make "backstretch" slideshow display images randomly

    Hi:

    The following "backstretch" script works well as a rotating 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 by KennyP; 11-08-2019 at 06:52 PM.

  2. #2
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    230
    Thanks
    158
    Thanked 1 Time in 1 Post

    Default Prevent Delay of First Image Display

    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]
    Last edited by KennyP; Yesterday at 06:49 PM.

Similar Threads

  1. Resolved "Backstretch" Background-Fader/Randomizer/Preloader
    By KennyP in forum JavaScript
    Replies: 0
    Last Post: 01-10-2015, 12:18 PM
  2. Flip Book "Images"... does NOT show up, on "newly" hosted Web Site
    By ggmoss in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 01-10-2013, 01:06 AM
  3. Make your "Simple Controls Gallery v1.4" Stretch Images to Fit
    By Enmanuel Soria in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 01-25-2012, 06:22 AM
  4. style.display=="none") ? "block" : "none";
    By lucavizzi in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 10-17-2007, 01:52 PM
  5. Replies: 1
    Last Post: 06-22-2007, 06:36 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •