How to set delay before append slideshow?

I want to append "image slideshow" on mouse hover image. It works, but I want to set delay on the beginning slideshow. When I set delay by queue, it stops working... Why ? How to fix it ?

Working jsFidlle example without delay

Wrong jsFiddle example with delay and queue

HTML

<ul>
    <li>
        <a href="http://cargocollective.com/jaimemartinez/" data-galeria="http://cssglobe.com/lab/tooltip/02/1.jpg,http://cssglobe.com/lab/tooltip/02/2.jpg,http://cssglobe.com/lab/tooltip/02/3.jpg,http://cssglobe.com/lab/tooltip/02/4.jpg"   class="preview">
            <img src="http://cssglobe.com/lab/tooltip/02/1.jpg" alt="gallery thumbnail"/>
        </a>
    </li>
</ul>

jQuery

this.imagePreview = function(){ 
        xOffset = 10;
        yOffset = 30;
        var i = 0;
        var interval = null;

    $("a.preview").hover(function(e){
        data_galeria = $(this).data('galeria');
        images = [];
        images = data_galeria.split(",");
        var hreff = images[0];

        $("body").append("<p id='preview'><img id='preview_img' src='"+ hreff +"' alt='Image preview' /></p>");


        intervalID = setInterval(function () {
                i = (i < 2) ? i + 1 : 0;
                var image_src = images[i];
                $('#preview_img').fadeOut("fast", function(){
                   $('#preview_img').attr("src", image_src).hide();
                   $('#preview_img').fadeIn("slow");
                });
        }, 1800); 
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset ) + "px")
            .fadeIn();                        
    },
    function(){
        clearInterval(intervalID);
        $("#preview").remove();
    }); 
    $("a.preview").mousemove(function(e){
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });         
};

$(function() {
                imagePreview();
});

CSS

#preview{
    position:absolute;
    border:1px solid #ccc;
    background:#333;
    padding:5px;
    display:none;
    color:#fff;
}

Answers


OK, I found solution and mistake in my code...

jsFiddle working example

jQuery

this.imagePreview = function(){ 
        xOffset = 10;
        yOffset = 30;
        var i = 0;
        var interval = null;

    $("a.preview").hover(function(e){
        data_galeria = $(this).data('galeria');
        images = [];
        images = data_galeria.split(",");
        var hreff = images[0];

        $("body").append("<p id='preview'><img id='preview_img' src='"+ hreff +"' alt='Image preview' /></p>");


        intervalID = setInterval(function () {
                i = (i < 2) ? i + 1 : 0;
                var image_src = images[i];
                $('#preview_img').fadeOut("fast", function(){
                   $('#preview_img').attr("src", image_src).hide();
                   $('#preview_img').fadeIn("slow");
                });
        }, 1800); 
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset ) + "px")
            .hide().delay(700).fadeIn();                        
    },
    function(){
        clearInterval(intervalID);
        $("#preview").remove();
    }); 
    $("a.preview").mousemove(function(e){
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });         
};
$(function() {
                imagePreview();
});

Need Your Help

What is really stored in Session in ASP.NET?

asp.net session persistence postback

We are trying to decide how to handle object persistence accross postbacks, to avoid getting the data from the database in every request, and I'm leaning towards using Session (it's an intranet

update attribute that is html

javascript jquery html rel

I have a anchor &lt;a&gt;&lt;/a&gt; with an attribute rel. in the rel value there is html, such as &lt;a rel="html=&lt;div&gt;This is a test&lt;/div&gt;. I want to update html inside of rel value, ...

How to get the installation directory in C# after deploying dll's

c# deployment interop

Is there some smart way to retreive the installation path when working within a dll (C#) which will be called from an application in a different folder?