{"id":488,"date":"2010-11-01T12:28:06","date_gmt":"2010-11-01T12:28:06","guid":{"rendered":"https://www.divydovy.com/2010/11/adding-a-pause-button-to-jcarousel-slight-fix/"},"modified":"2020-01-23T10:30:13","modified_gmt":"2020-01-23T10:30:13","slug":"adding-a-pause-button-to-jcarousel-slight-fix","status":"publish","type":"post","link":"https://www.divydovy.com/2010/11/adding-a-pause-button-to-jcarousel-slight-fix/","title":{"rendered":"Adding a Pause Button to jCarousel (slight fix)"},"content":{"rendered":"

I was recently asked by a client to add a pause button to the jCarousel-powered carousel on their site.

\n

To do this, I used this post by Jeremy Mikola (thanks Jeremy). Here’s his code:

\n


\n $(document).ready(function(){ 
\n   $('#jcarousel').jcarousel({ 
\n     vertical: true, 
\n     scroll: 1, 
\n     auto: 5, 
\n     initCallback: function(jc, state) { 
\n       if (state == 'init') { 
\n         // Insert a play/pause button between the prev/next buttons 
\n         $('div.jcarousel-prev-vertical').after('<div class=\"jcarousel- 
\n toggle-vertical\" style=\"display:block;\"></div>');   

\n

\n

        /* Override the internal startAuto() method, which is called 
\n after 
\n          * animations complete, to prevent next/prev buttons from 
\n reactivating 
\n          * the timer while in the pause state. 
\n          */ 
\n         jc.startAutoOrig = jc.startAuto; 
\n         jc.startAuto = function() { 
\n           if (!jc.paused) { 
\n             jc.startAutoOrig(); 
\n           } 
\n         } 

\n

        jc.pause = function() { 
\n           $('div.jcarousel-toggle-vertical') 
\n             .removeClass('jcarousel-play-vertical') 
\n             .addClass('jcarousel-pause-vertical'); 
\n           jc.paused = true; 
\n           jc.stopAuto(); 
\n         }; 

\n

        jc.play = function() { 
\n           $('div.jcarousel-toggle-vertical') 
\n             .removeClass('jcarousel-pause-vertical') 
\n             .addClass('jcarousel-play-vertical'); 
\n           jc.paused = false; 
\n           jc.startAuto(); 
\n         }; 

\n

        // Click event for playback toggle button, conditionally calls 
\n play/pause 
\n         $('div.jcarousel-toggle-vertical').click(function(){ 
\n           if (this.timer === null) { 
\n             jc.play(); 
\n           } else { 
\n             jc.pause(); 
\n           } 
\n         }); 
\n       } 

\n

\n

      jc.play(); 
\n     } 
\n   }); 
\n });
\n

\n

However, I had a bit of trouble with it and had to make a change, as follows:

\n


\n For some reason, \"this.timer === null\" wasn't working for me. 

\n

\n

I replaced that section with: 

\n

jQuery('div.jcarousel-toggle').click(function(){ 
\n         if (jc.paused) { 
\n                 jc.play(); 
\n         } else { 
\n                 jc.pause(); 
\n         } 
\n }); 

\n

Seemed logical and seems to work... 

\n

\n

Hope that helps someone. 

\n

I did try to post this as a comment on Nabble, but it’s still pending, so I’m posting here for now.

\n","protected":false},"excerpt":{"rendered":"

I was recently asked by a client to add a pause button to the jCarousel-powered carousel on their site. To do this, I used this post by Jeremy Mikola (thanks Jeremy). Here’s his code: $(document).ready(function(){    $(‘#jcarousel’).jcarousel({      vertical: true,      scroll: 1,      auto: 5,      initCallback: function(jc, state) {        if (state == ‘init’) {          // Insert a play/pause button between the prev/next buttons          $(‘div.jcarousel-prev-vertical’).after(‘<div class=”jcarousel-  toggle-vertical” style=”display:block;”></div>’);            /* Override the internal startAuto() method, which is called  after      […]

\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","clkt_auto_upload":"0","_clkt_publish_and_upload":false,"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":3,"activitypub_interaction_policy_quote":"","activitypub_status":"","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_wordproof_timestamp":false},"categories":[7],"tags":[62,152,190,208],"my_content_publications":[],"class_list":["post-488","type-post","status-publish","format-standard","hentry","category-web","tag-javascript","tag-jcarousel","tag-jquery","tag-pause"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"clkt_attachments":{"featured_image":null,"inline_attachments":[],"upload_candidates":[],"max_free_size":102400,"max_allowed_size":104857600},"_clkt_upload_mode":"new_only","clkt_content_hash":"7274634a97dd2dc24279fa0043b606ec596146ff736a5ea82781106afeaedfb5","customFields":{"clkt_auto_upload":"0","activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":3,"activitypub_interaction_policy_quote":"","activitypub_status":"","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"processed_attachments":{"total_attachments":0,"uploaded_to_arweave":0,"kept_original_urls":0,"upload_summary":{"total":0,"uploaded":0,"failed":0,"too_large":0,"reused":0}}},"paymentAddress":"8_-tV4d15kVVq9Gd-Al2MAIC3LqNtJ_KgFol71TzxPw"}