• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 3 posts ] 
Author Message
 Post subject: Using MenuManager with an ImageSlider
PostPosted: Fri Feb 01, 2013 10:22 am 
Offline
Power Poster
Power Poster

Joined: Sat Jan 22, 2005 11:19 am
Posts: 463
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Using MenuManager with an ImageSlider
PostPosted: Fri Feb 01, 2013 7:18 pm 
Offline
Administrator
Administrator
User avatar

Joined: Thu Mar 09, 2006 5:32 am
Posts: 12669
Location: Arizona
Link to example..?

_________________
Check ver. CMSMS, PHP, server OS, in System Information page.
Default content http://multiintech.com/defaultcontent/
People are Wonderful
Business is Great
Life is Terrific
Ever wonder what happened to the Album module? Well it is alive and well.
http://album.multiintech.com/
$1


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Using MenuManager with an ImageSlider
PostPosted: Fri Feb 01, 2013 8:31 pm 
Offline
Power Poster
Power Poster

Joined: Sat Jan 22, 2005 11:19 am
Posts: 463
The site not finished but here's a sneak peek.

http://www.thinklikealeader.com.au


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 3 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
A2 Hosting