Using MenuManager with an ImageSlider

Do something cool with CMS? Show us ...
This board is for 'Answers', and the discussion of answers... Not for questions.
Post Reply
psy
Power Poster
Power Poster
Posts: 463
Joined: Sat Jan 22, 2005 11:19 am

Using MenuManager with an ImageSlider

Post by psy »

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:

Code: Select all

{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
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12709
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

Re: Using MenuManager with an ImageSlider

Post by Dr.CSS »

Link to example..?
psy
Power Poster
Power Poster
Posts: 463
Joined: Sat Jan 22, 2005 11:19 am

Re: Using MenuManager with an ImageSlider

Post by psy »

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

http://www.thinklikealeader.com.au
Post Reply

Return to “Tips and Tricks”