Skip to content

Instantly share code, notes, and snippets.

@srobbin

srobbin/gist:1978678

Last active March 25, 2018 13:00
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save srobbin/1978678 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save srobbin/1978678 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. srobbin revised this gist Mar 25, 2018. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -6,7 +6,7 @@
    // Duration is the amount of time in between slides,
    // and fade is value that determines how quickly the next image will fade in
    $.backstretch([
    "http://dl.dropbox.com/u/515046/www/outside.jpg"
    , "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg"
    , "http://dl.dropbox.com/u/515046/www/cheers.jpg"
    "images/outside.jpg"
    , "images/garfield-interior.jpg"
    , "images/cheers.jpg"
    ], {duration: 3000, fade: 750});
  2. srobbin revised this gist Sep 8, 2012. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    /*
    Here is an example of how to use Backstretch as a slideshow.
    Just pass in an array of images, and optionally a duration and fade value.
    */
    * Here is an example of how to use Backstretch as a slideshow.
    * Just pass in an array of images, and optionally a duration and fade value.
    */

    // Duration is the amount of time in between slides,
    // and fade is value that determines how quickly the next image will fade in
  3. srobbin revised this gist Sep 7, 2012. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -10,4 +10,3 @@
    , "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg"
    , "http://dl.dropbox.com/u/515046/www/cheers.jpg"
    ], {duration: 3000, fade: 750});

  4. srobbin revised this gist Sep 7, 2012. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -9,4 +9,5 @@
    "http://dl.dropbox.com/u/515046/www/outside.jpg"
    , "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg"
    , "http://dl.dropbox.com/u/515046/www/cheers.jpg"
    ], {duration: 3000, fade: 750});
    ], {duration: 3000, fade: 750});

  5. srobbin revised this gist Sep 7, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -9,4 +9,4 @@
    "http://dl.dropbox.com/u/515046/www/outside.jpg"
    , "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg"
    , "http://dl.dropbox.com/u/515046/www/cheers.jpg"
    ], {duration: 4000, fade: 750});
    ], {duration: 3000, fade: 750});
  6. srobbin revised this gist Sep 7, 2012. 1 changed file with 5 additions and 24 deletions.
    29 changes: 5 additions & 24 deletions gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,31 +1,12 @@
    /*
    Backstretch does not support slideshows out of the box (yet)
    But, it's fairly easy to set one up.
    Here is an example of how to use Backstretch as a slideshow.
    Just pass in an array of images, and optionally a duration and fade value.
    */

    var images = [
    // Duration is the amount of time in between slides,
    // and fade is value that determines how quickly the next image will fade in
    $.backstretch([
    "http://dl.dropbox.com/u/515046/www/outside.jpg"
    , "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg"
    , "http://dl.dropbox.com/u/515046/www/cheers.jpg"
    ];

    // A little script for preloading all of the images
    // It"s not necessary, but generally a good idea
    $(images).each(function(){
    $("<img/>")[0].src = this;
    });

    // The index variable will keep track of which image is currently showing
    var index = 0;

    // Call backstretch for the first time,
    // In this case, I"m settings speed of 500ms for a fadeIn effect between images.
    $.backstretch(images[index], {speed: 500});

    // Set an interval that increments the index and sets the new image
    // Note: The fadeIn speed set above will be inherited
    setInterval(function() {
    index = (index >= images.length - 1) ? 0 : index + 1;
    $.backstretch(images[index]);
    }, 5000);
    ], {duration: 4000, fade: 750});
  7. srobbin created this gist Mar 5, 2012.
    31 changes: 31 additions & 0 deletions gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    /*
    Backstretch does not support slideshows out of the box (yet)
    But, it's fairly easy to set one up.
    Here is an example of how to use Backstretch as a slideshow.
    */

    var images = [
    "http://dl.dropbox.com/u/515046/www/outside.jpg"
    , "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg"
    , "http://dl.dropbox.com/u/515046/www/cheers.jpg"
    ];

    // A little script for preloading all of the images
    // It"s not necessary, but generally a good idea
    $(images).each(function(){
    $("<img/>")[0].src = this;
    });

    // The index variable will keep track of which image is currently showing
    var index = 0;

    // Call backstretch for the first time,
    // In this case, I"m settings speed of 500ms for a fadeIn effect between images.
    $.backstretch(images[index], {speed: 500});

    // Set an interval that increments the index and sets the new image
    // Note: The fadeIn speed set above will be inherited
    setInterval(function() {
    index = (index >= images.length - 1) ? 0 : index + 1;
    $.backstretch(images[index]);
    }, 5000);