jquery循環插件 - 添加刪除圖像的週期（圖片和視頻幻燈片）

我試圖實現使用Jquery cycle plugin滑動的圖像/視頻（縮略圖）滑動。如果用戶點擊視頻的縮略圖，我會用html 5 <video>標籤替換縮略圖。所以用戶可以查看視頻。一旦完成視頻，點擊下一步將替換視頻標籤與以前的圖像。現在問題來了。循環插件不適用於此圖像。jquery循環插件 - 添加刪除圖像的週期（圖片和視頻幻燈片）

我的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' 
    });

我能夠做的圖像/視頻replcement成功。但是如何再次應用Cycle插件。

我試過這個demo。但是我想把圖像放在我刪除的相同位置上。

來源

2014-01-20 stefun

我得到了解決方案。不要刪除圖像並再次替換，只需將視頻放在圖像上方即可。一旦點擊下一個只需隱藏視頻。

要顯示視頻：

$('.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(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, 
      }); 
     },

來源

2014-01-21 04:51:11 stefun

jquery循環插件 - 添加刪除圖像的週期（圖片和視頻幻燈片）

回答

相關問題