Question

since hours i try to build my own slideshow to play around with some javascript.

i have an object $pic with all the images of my site. Thats no problem so far. My images are shown on my site as thumbs.

Now when i click .rightslide button, the script gets the next and previous image of the current image due to the slidenavi() function. That works also. But it doesn’t deep copy the object that slidenavi() function returns, so that the image that should instead be copied is taken away…so no copy at all!

What can I do?

    function slidenavi(image_src){
        $nextpic_index="";
        $prevpic_index="";
        $nextpic="";
        $prevpic="";

        $pics.each(function (index) {
            if (this.src== image_src){
                $nextpic_index=index+1;
                $prevpic_index=index-1;
            } 
        })
        nextpic=$pics.eq($nextpic_index);
        prevpic=$pics.eq($prevpic_index);
        img = {
            prev:prevpic,
            next:nextpic
        };

        return img
    }

    $('.rightslide').click(function(){
        var slidenaviobject=slidenavi($(this).parent().siblings('img').attr('src'));
        var copyimage = jQuery.extend(true, {}, slidenaviobject);
        console.log(copyimage.next);
        $('.slideshow-wrapper').append(copyimage.next);        

    }) 

Answer 1

nextpic is a reference to a (jQuery-wrapped) DOM node. You will have to .clone() the DOM node when you append it.