Jquery cycle plugin - adding removed image to the cycle (Image & Video slide )

Question

I was trying to implement Image/Video(Thumbnail) sliding using Jquery cycle plugin . if user clicked on thumbnail of video I’ll replace thumbnail with html 5 <video> tag.So user can view video. Once video is done clicking on next will replace video tag with previous image. Now problem comes here. Cycle plugin not applied for this image.

My js :

    $('.slides_container').cycle({ 
        fx:     'fade', 
        speed:  'slow', 
        timeout: 0, 
        slideResize: 0 ,
        containerResize: 0,
        after: function(curr, next, opts) {          
            callGalleryDetails($(next).attr('id'));
            $('.number').html(opts.currSlide + 1  +"/"+opts.slideCount) ;
        },
        before:function(curr,next,opts){
             console.log(opts.nextSlide + 1);
             var index= opts.nextSlide + 1;
//********************************************************************************
             //replacing video with image from hidden field
             if($(".video video").length) { 
                 var classes = $(".video video").parent().attr('class').split(' ');
                 $('.is_video.'+classes[1]+'').val(1);
                 $('.video.'+classes[1]+'').html($('.video_hidden.'+classes[1]+'').html());
                 $('.video.'+classes[1]+'').children('img').css('display','none');
                 $('.video.'+classes[1]+'').children('img').css('opacity','0');
             }

//**********************************************************************************
             var $slide = $(next);
             var w = $slide.outerWidth();
             var h = $slide.outerHeight();
             $slide.css({
            marginTop: ($('.graphics_container').height() - h) / 2,
            marginLeft: ($('.graphics_container').width()- w) / 2,
             });
        },

        next:   '.slides-right', 
        prev:   '.slides-left' ,
        center : 1,
        fit: 1  ,
        startingSlide: $('#starting_index').val(),
        slideExpr: 'img'
    });

I'm able to do replcement for image/video successfully. But how to apply Cycle plug-in again.

I have tried this demo. But I want to place image on same position from which I have removed.

Answer 1

I got the solution. Instead of removing image and replacing again back, just place video above image. Once click on next just hide the video.

To display video:

 $('.video').on('click',function(e){
         if($(".video img").length) { 

         var classes = $(this).attr('class').split(' ');
                $('.is_video.'+classes[1]+'').val(1);
                $('.video_src.'+classes[1]+'').find('video').css('display','block');
                $('.video_src_1.'+classes[1]+'').attr('autoplay','autoplay');
                var $video = $('.video_src_1.'+classes[1]+'');
                $video[0].currentTime = 0;
                $video[0].play();
                var w = $video.outerWidth();
                var h = $video.outerHeight();
                $video.css({
                    marginTop: ($('.graphics_container').height() - h) / 2,
                    marginLeft: ($('.graphics_container').width()- w) / 2,
                });
         }
     }) ;

Before function in cycle:

 before:function(curr,next,opts){
            $('.video_src').find('video').css('display','none');
            $('.video_src_1').attr('autoplay','false');
            var $vidoe = $('.video_src_1');
            $vidoe[0].pause();

            var $slide = $(next);
            var w = $slide.outerWidth();
            var h = $slide.outerHeight();
            $slide.css({
                marginTop: ($('.graphics_container').height() - h) / 2,
                marginLeft: ($('.graphics_container').width()- w) / 2,
            });
         },