CMS Made Simple Forums
https://forum.cmsmadesimple.org/

Using MenuManager with an ImageSlider
https://forum.cmsmadesimple.org/viewtopic.php?f=4&t=65055
Page 1 of 1

Author:  psy [ Fri Feb 01, 2013 10:22 am ]
Post subject:  Using MenuManager with an ImageSlider

The challenge was to:

1. create an image slider on the home page where each slide linked to an internal page
2. limit the number of slides to 4 regardless of the number of internal pages
3. show the images in random order
4. Use the standard CMSMS resources without loading additional modules
5. KISS principle for client to add pages and images

My solution was the following MenuManager template:

\$1:
{strip}
{* Get a list of the page images *}
{if $count gt 0}
   {foreach from=$nodelist item=item}
      {if !empty($item->image)}
      
         {append var=one value=$item->image index='url'}
         {append var=one value=$item->alias index='alias'}
   
         {assign var='oneitem' value=$one}
      {/if}
      {if !empty($oneitem)}
         {append var='images' value=$oneitem}
         {assign var='oneitem' value=''}
      {/if}
   {/foreach}
   
   {* if we have images ... *}
   {if !empty($images)}
      {* maximum number of images to show in the rotator *}
      {assign var=num value=4}
      {assign var=slidenum = 0}
      {* if sort the images randomly - php return true or false *}
      {if shuffle($images)}
         {* slider/rotator html code here *}
         <div class="camera_wrap camera_white_skin" >
            {foreach from=$images item='image'}
               {if $num eq $slidenum}
                  {break}
               {/if}
                <div data-src="{$image.url}" data-link="{cms_selflink href=$image.alias}" data-portrait='true' class="rotator-img" >
                   <div class="fadeIn camera_effected btn-learn row " >
                     <div class="span2 offset8">
                         <a class="btn btn-tlalred btn-rotator span2 offset8" href="{cms_selflink href=$image.alias}" >
                            Learn more <i class="icon-forward icon-white"></i>                 
                         </a>
                     </div>
                   </div>
                </div>
               {assign var=slidenum value=$slidenum+1}
            {/foreach}
         </div>
      {/if}   
   {/if}
{/if}
{/strip}



How it works:

It firstly scans through the available pages. This can be all or limited in the MenuManager tag.

Next, only if there is a page image, ie the page image field on the Options tab in Content Page Edit, it grabs the url and the page alias.

When there is an array of pages with images, it uses the PHP function 'shuffle' to randomize the order. This either returns true or false. When true, it assigns the maximum number of slides to show. In the above example, 4.

Then it's simply a matter of adding your slider code. This example uses the jquery.camera.js script from http://www.pixedelic.com/plugins/camera/ for responsive images with HTML5 and the site was built with CMSMS in combination with Twitter Bootstrap, http://twitter.github.com/bootstrap/index.html.


psy

Author:  Dr.CSS [ Fri Feb 01, 2013 7:18 pm ]
Post subject:  Re: Using MenuManager with an ImageSlider

Link to example..?

Author:  psy [ Fri Feb 01, 2013 8:31 pm ]
Post subject:  Re: Using MenuManager with an ImageSlider

The site not finished but here's a sneak peek.

http://www.thinklikealeader.com.au

Page 1 of 1 All times are UTC
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/