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

Slice pandas series with elements not in the index

python pandas series slice

I have a pandas series indexed by tuples, like this:

Wordpress category not counting media attachments

wordpress count attachment category taxonomy

In Wordpress I am creating a gallery that will automatically display new images from a chosen category and its subcategories. I have set up the categories so that they will apply to media using:

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.