Geek Answers Handbook

The jQuery Cycle "destroy" command (and all other commands) is ignored

I have a problem with jQuery loop just ignoring all commands (destory, stop, etc.). There are many other things on this page that might be useful, but I'm not sure how many code examples are too many.

In a nutshell, I have two simultaneous slide shows that are initialized when the page loads, and when ".video-trigger" is clicked, the loop instances must be destroyed. But when pressed, the loop continues cyclically (and closes the video, which should replace it).

I tried every possible script that I can come up with to try to find the source - delete all the other javascript (only the loop and destroy the click event), just try to call and destroy one of the two slide shows (instead of both), calling their individual wrappers. I even deleted both of these instances of the loop and made a super-simple “test” loop and click event in a completely different part of the page, and that too could not be destroyed. Not sure what I am missing.

Another jQuery plugin used here is videojs, if that matters.

This is all a script, except for the unrelated fancybox to the video. If this helps to include everything, let me know, but I think I can include too much already.

jQuery(document).ready(function($){ /// fading background images and video trigger $('#background-image-wrapper,#trigger-fade').cycle(); // handle videos $('.video-trigger').click(function() { $('#background-image-wrapper,#trigger-fade').cycle('destroy'); var vidName = $(this).attr('id'); var vidID = 'video_' + vidName; $('#background-image-wrapper').append('<div id="vid-cont" class="video-container"></div>'); $('#vid-cont').append('<video id="' + vidID + '" class="video-js vjs-default-skin" preload="auto" data-setup="{}">' + '<source src="http://domain.com/wp-content/themes/sapporo/v/sapporo-'+ vidName +'.mp4" type="video/mp4">' + '<source src="http://domain.com/wp-content/themes/sapporo/v/sapporo-'+ vidName +'.ogv" type="video/ogg">' + '<source src="http://domain.com/wp-content/themes/sapporo/v/sapporo-'+ vidName +'.webm" type="video/webm">' + '</video>'); //alert(vidID); _V_(vidID).ready(function(){ var myPlayer = this; var aspectRatio = 9/16; function resizeVideoJS(){ //var width = document.getElementById(myPlayer.id).parentElement.offsetWidth; // Get the parent element actual width -- this wasn't working with lower versions of FF var width = document.getElementById('vid-cont').offsetWidth; // Get the parent element actual width myPlayer.width(width).height( width * aspectRatio ); // Set width to fill parent element, Set height } resizeVideoJS(); // Initialize the function window.onresize = resizeVideoJS; // Call the function on resize $('#trigger-fade').fadeOut(); $('#video-controls').fadeIn(); $('.video-container').css('left', '0'); myPlayer.volume(0); myPlayer.play(); //start playing the video var endedEvent = function(){ $('#video-controls').fadeOut(function(){ $('#trigger-fade').fadeIn(); }); $('.video-container').css('left', '-9999em'); $('.background-image').fadeIn('slow'); }; myPlayer.addEvent("ended", endedEvent); $('#pause-video').click(function(){ myPlayer.pause(); $(this).fadeOut(function(){ $('#play-video').fadeIn(); }); }); $('#play-video').click(function(){ myPlayer.play(); $(this).fadeOut(function() { $('#pause-video').fadeIn(); }); }); $('#mute-video').click(function(){ myPlayer.volume(0); $(this).fadeOut(function(){ $('#unmute-video').fadeIn(); }); }); $('#unmute-video').click(function(){ myPlayer.volume(.7); $(this).fadeOut(function() { $('#mute-video').fadeIn(); }); }); $('#close-video').click(function(){ myPlayer.pause(); $('#video-controls').fadeOut(function(){ $('#trigger-fade').fadeIn(); }); $('.video-container').css('left', '-9999em'); $('.background-image').fadeIn('slow'); }); }); }); });

UPDATE : I did not get closer to solving the problem (and this happens regardless of whether I use Cycle or Cycle2). I implemented a workaround that I am not happy with (I just hide the slide show while it still works while playing the video). But what I noticed, after the user set up the cycle, and then tried to pause the same slide show in another click event, this is when the command is launched, the command is not executed, but all the user parameters that I previously set for loop overwritten.

i.e. If I start with:

  $('#background-image-wrapper,#trigger-fade').cycle({{timeout: 4000, speed: 7000}});

Then use this on the click event:

  $('#background-image-wrapper,#trigger-fade').cycle('destroy');

or

  $('#background-image-wrapper,#trigger-fade').cycle('pause');

Then, instead of destroying or pausing, it simply starts a new instance of the loop, as if "destroy / pause" did not exist.

+4
source share
2 answers

I have the same problem. The destroy command seems to be completely ignored here:

http://brianleatart-art.com/

I only need one slide show, but since the destroy command does not work, it continues to hide the slide show.

0
source

I had a similar problem, and for me the solution was to save the loop in a variable and call this variable to destroy it. Like this:

 var mycycle = $('#background-image-wrapper,#trigger-fade').cycle(); ... mycycle.cycle('destroy');

Not sure if you still need it, but maybe someone will.

-1
source

More articles:


All Articles