{"id":609,"date":"2009-05-05T22:36:21","date_gmt":"2009-05-06T04:36:21","guid":{"rendered":"http:\/\/bililite.nfshost.com\/blog\/?p=609"},"modified":"2015-02-25T12:51:05","modified_gmt":"2015-02-25T18:51:05","slug":"flexcal-and-cycle","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2009\/05\/05\/flexcal-and-cycle\/","title":{"rendered":"<code>flexcal<\/code> and <code>cycle<\/code>"},"content":{"rendered":"<h4>Updated for jQuery UI 1.8 and cycle 2.81, but it doesn't work so well anymore <\/h4>\r\n<script src=\"\/inc\/jquery.ui.subclass.js\"><\/script>\r\n<script src=\"\/inc\/jquery.textpopup.js\"><\/script>\r\n<script src=\"\/inc\/jquery.flexcal.js\"><\/script>\r\n<script>\r\n  $('<link rel=stylesheet href=\"\/inc\/flexcal.css\" \/>').appendTo('head');\r\n<\/script>\r\n<script type=\"text\/javascript\" src=\"\/inc\/jquery.cycle.all.min.js\"><\/script>\r\n<p>The alert reader will notice that the parameters for the transition animation for my <a href=\"\/blog\/2009\/04\/03\/new-jquery-widget-flexcal\/\"><code>flexcal<\/code> widget<\/a> are the same as that used by Mike Alsup's <a href=\"http:\/\/malsup.com\/jquery\/cycle\/\">cycle plugin<\/a>. My hope was that I could use <code class=\"language-javascript\">{ transition: $.fn.cycle.next }<\/code> and be able to use all those cool effects. It turned out to be not so simple; I couldn't jump into the middle of his code and have things work. But I could create a function that set things up correctly and called his transition code:<\/p>\r\n<!--more-->\r\n<pre style=\"height: 20em\"><code class=\"language-javascript demo\">\r\n\/\/ largely copied from the $.fn.cycle code\r\nfunction cycle(opts) {\r\n\tvar curr = opts.elements.eq(opts.currSlide), next = opts.elements.eq(1-opts.currSlide), fwd = !(opts.rev ^ opts.l10n.isRTL);\r\n\topts.lastSlide = opts.currSlide; \/\/ shuffle needs to know this\r\n\topts.slideCount = 2;\r\n\topts.cssAfter = { left: 0, top: 0 , opacity: 1};\r\n\topts.cssBefore = opts.animIn = opts.animOut = {};\r\n\topts.speedIn = opts.speedIn || opts.speed,\r\n\topts.speedOut = opts.speedOut || opts.speed,\r\n\topts.easeIn = opts.easeIn || opts.easing,\r\n\topts.easeOut = opts.easeOut || opts.easing;\r\n\t$.fn.cycleW = opts.$cont.width(); $.fn.cycleH = opts.$cont.height(); \/\/ hack to fool the cycle transitions\r\n\t$.fn.cycle.transitions[opts.fx](opts.$cont, opts.elements, opts); \/\/ set up the transition. fx must be a valid transition name\r\n\t$.each(opts.before, function(i,o) {\r\n\t\to.apply(next, [curr, next, opts, fwd]);\r\n\t});\r\n  \/\/ stage the after callacks\r\n\tvar after = function() {\r\n\t\t$.each(opts.after, function(i,o) {\r\n\t\t\to.apply(next, [curr, next, opts, fwd]);\r\n\t\t});\r\n\t};\r\n\r\n\tif (opts.fxFn){ \/\/ fx function provided?\r\n\t\topts.fxFn(curr, next, opts, after, fwd);\r\n\t}else{\r\n\t\tnext.css(opts.cssBefore);\r\n\t\tvar fn = function() {\r\n\t\t\tnext.animate(opts.animIn, opts.speedIn, opts.easeIn, after)\r\n\t\t};\r\n\t\tcurr.animate(opts.animOut, opts.speedOut, opts.easeOut, function() {\r\n\t\t\tcurr.css(opts.cssAfter);\r\n\t\t\tif (!opts.sync) fn();\r\n\t\t});\r\n\t\tif (opts.sync) fn();\r\n\t}\r\n};\r\n<\/code><\/pre>\r\n<p>Now I can use any of the transitions and easing functions (with some attention paid to the <a href=\"http:\/\/malsup.com\/jquery\/cycle\/options.html\">options<\/a>, since we don't start with the correct defaults):<\/p>\r\n<pre><code class=\"language-html demo\">\r\n\t&lt;span&gt;Cycle transitions and easing: &lt;\/span&gt;&lt;input id=\"flexcalcycle\"\/&gt;\r\n<\/code><\/pre>\r\n<pre><code class=\"language-javascript demo\">\r\nvar opts = {\r\n\tposition: 'bl',\r\n\ttransition: cycle,\r\n\ttransitionOptions: {fx: 'fade', sync: true, speed: 1000}\r\n};\r\n$('#flexcalcycle').flexcal(opts);\r\n\r\nvar easingSelect = $('&lt;select&gt;').insertAfter('#flexcalcycle').bind('change', function(){\r\n\topts.transitionOptions.easing = $(this).val();\r\n\t$('#flexcalcycle').flexcal('destroy').flexcal(opts).flexcal('show');\t\r\n});\r\nfor (var e in $.easing){\r\n\teasingSelect.append($('&lt;option&gt;').text(e));\r\n};\r\nvar fxSelect = $('&lt;select&gt;').insertAfter('#flexcalcycle').bind('change', function(){\r\n\topts.transitionOptions.fx = $(this).val();\r\n\t$('#flexcalcycle').flexcal('destroy').flexcal(opts).flexcal('show');\t\r\n});\r\nfor (var t in $.fn.cycle.transitions){\r\n\tfxSelect.append($('&lt;option&gt;').text(t));\r\n};\r\n<\/code><\/pre>","protected":false},"excerpt":{"rendered":"Updated for jQuery UI 1.8 and cycle 2.81, but it doesn't work so well anymore The alert reader will notice that the parameters for the transition animation for my flexcal widget are the same as that used by Mike Alsup's cycle plugin. My hope was that I could use { transition: $.fn.cycle.next } and be [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"_links":{"self":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/609"}],"collection":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/comments?post=609"}],"version-history":[{"count":28,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/609\/revisions"}],"predecessor-version":[{"id":3523,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/609\/revisions\/3523"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=609"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=609"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=609"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}