Example: using [bw_jq] to cycle through some posts

hover to slideToggle source

In this example we use the [bw_code bw_jq] shortcode to cycle through the set of plugins that define the basic functionality of the oik-plugins server.<!--more-->[bw_jq .cycle method=cycle fx=fade script=cycle.all fit=1 width="100%"][div class="cycle bd350 w100pc"][bw_pages post_type="oik-plugins" numberposts=4 include=2384,2393,395,5025][ediv][clear]<h3>How it works</h3>Four shortcodes are used to create the result.[[bw_jq .cycle method=cycle fx=fade script=cycle.all fit=1 width="100%" ]]Use the [[bw_jq]] shortcode to invoke some jQuery code. Invoke the method called <strong>cycle</strong> with parameter <strong>fx=fade</strong> on the CSS selector <strong>.cycle</strong>. The script file source is <em>jquery.cycle.all.js</em> Additional parameters ( fit=1 and width="100%" ) help make the cycle responsive. If you adjust the window size then the cycling area also adjusts.[[div class="cycle"]]Create a div with the CSS selector <strong>.cycle</strong>.Additionally we need some CSS to make sure that the container and images within it are responsive.[bw_css .]div.cycle { width: 100% !important; min-height: 300px !important;}div.cycle img { max-width: 100% !important }[/bw_css]The !important parts are very important.[[bw_pages post_type="oik-plugins" include=2384,2393,395,5025]]Display the posts identified in the <strong>include=</strong> parameter which are of post_type <strong>"oik-plugins"</strong>. [[ediv]]End the div we started earlier.<h3>For more information</h3>[codes bw_jq,div,bw_pages,ediv,bw_css]<h3>See also</h3><ul><li>[bw_code bw_cycle]</li></ul><hr />[bw_wtf]