Two questions about transitions

[dsiglin]

1. It appears the default transition is 'cover_left' or something like that. The new image expands in from the left. Documentation states default is fade. I tried adding transition:'fade' to list of options -

     <script type="text/javascript">
         (window).setTimeout(function() 
           {
             $(".cover_image").backstretch([
                "https://s3.amazonaws.com/davidsiglinphotography/cover4.jpg"
               , "https://s3.amazonaws.com/davidsiglinphotography/cover3.jpg"
               , "https://s3.amazonaws.com/davidsiglinphotography/cover5.jpg"
               , "https://s3.amazonaws.com/davidsiglinphotography/cover8.jpg"
               , "https://s3.amazonaws.com/davidsiglinphotography/cover9.jpg"
             ], {
                duration: 15000, 
                transitionDuration: 1000,
                transition: 'fade',
                transitionFirst: true
             });
           }, 15000);
      </script>

But no luck. Any idea what's going on.

2. For speed of loading I've set a default background image for the element that backstretch is modifying. So, there's a div called "cover_image" that has a background image set and then backstretch replaces that background image.

.cover_image {
    background-repeat: no-repeat;
    background-image: url(https://s3.amazonaws.com/davidsiglinphotography/cover9.jpg);
    background-position: center center;
    background-size: cover;
    z-index: -3;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

This works well for quickly loading initial image, however there's a problem when the first backstretch image is loaded. The default image is removed first and then the backstretch image is faded in. Is there a way to get backstretch to fade in over the default background image?

[danielgindi]

I have tested the code you supplied, and it is working well - with fade transitions :-) I don't see any problem.

Backstretch is clearing the background before working with the element - but I think this is for historical reasons, and maybe should only be done when taking the background url from the element itself. I'll look into it.

[dsiglin]

I should have mentioned I am not using the backstretch css file. Not sure if that would affect it. You can see the issue here: davidsiglinphotography.com (first page cycles).

Thank you for fixing the clearing of the background image. That's a huge help!

[danielgindi]

Well, there's no CSS file for backstretch.

The transition that you are experiencing is from your own CSS. there's a transition: all .4s ease-in-out on all img elements coming from your overlaymenu.css

[dsiglin]

How right you are. Clearly I'm my own worst enemy. :)