« Back

Cyle with Navigation

Posted by: mark | May 5, 2013 | Category: Cycle Smarty

This will give you numbers to navigate through blocks of multiple divs or articles in CGBlog or News.

We will be using the cycle plugin to scroll the blocks of articles and smarty to break the articles into a predetermined number, in this case 6.

The code has 2 different parts for counting the 6 breaks, 1 for the top and bottom nav so they wont show if there are less then 6 (if count is greater than '>' 6 show this)  and one for adding the closing and starting divs for each break.

I'm using 2 breaks in my example as I only have 4 articles so far.

Call the jQuery and javascript function
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script> or <script type="text/javascript" src='uploads/jquery/jquery-1.8.3.min.js'></script> <script type="text/javascript" src="uploads/cycle/cycle.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#cycle').cycle({ fx: 'scrollUp', timeout: 0, speed: 1250, pager: '#navibig', pagerEvent: 'click', fastOnEvent: false, }); }); </script> CGBlog or News Summary template code. {foreach from=$items item=entry name=tmp}{/foreach} {assign var='count' value=$smarty.foreach.tmp.total} {if $count > 6} <div class="navibig"></div> {/if} <div id='cycle'> <div class='cycled'> {foreach from=$items item=entry name=uploads} Above is the extra code, note the name=uploads in the foreach, below is the default code. <div class="CGBlogSummary"> **************************** </div> Extra code inside the original {foreach} above, note the use of the uploads var. {if $smarty.foreach.uploads.iteration ne $smarty.foreach.uploads.total and $smarty.foreach.uploads.iteration % 6 == 0} </div> <div class='cycled'>{/if} Default closed foreach {/foreach} Extra code to close out the cycle and cycled divs. </div> </div> Extra code for bottom navigation, for those real long pages, an option. {if $count > 6} <div class="navibig btm"></div> {/if}