Implementing a simple carousel with cakephp and prototype

No jQuery? No problem.

It’s a great chanche to explore stand-alone scripts or other ajax libraries.

As an example, let me introduce Prototype Carousel. Light and easy, but probably powerful enough to suit your needs. It is done to manage every type of content(not only images: html, flash..).

Thus, it was a perfect fit for my need – a quick way to add some animation and crunch the vertical size of content -rich homepages, without adding new features and options (namely: cover images fer every post) – something most of my users don’t like.

Really fast and easy: here is the element I used – it implements some configuration options (duration of auto-scrolling, type of transition and animation, sizes of the carousel) and manual command (previous – next – go to slide #..)

Please note the inline styles – so they are dinamically customizable: the container div has to be N * $width pixel wide (where N = number of slides -in this case a simple count($contents)- and $width = size in pixel of a single slide): this way, we may have the carousel working with an undefined number of slides

Code block

<div>
<?php
 
[..]
//some conditions based on variables set for the action - not relevant for our example
?>
<?php
//using old 1.2 helpers
echo $javascript->link('prototype.js',false);
echo $javascript->link('scriptaculous', false);
echo $javascript->link('carousel-min.js',false);
?>
<?php
 
//set some value if needed
$slides_number = count($contents);
if(!isset($width)) $width = 600;
if(!isset($height)) $height= 450;
$totalsize = $slides_number * $width;
?>
<style type="text/css" media="screen">
/*here are the carousel styles - leave them here, ifyou don't want to lose the configuration options */
    #carousel-wrapper {
	position: relative;
	width: <?php echo $width; ?>px;
	height: <?php echo $height; ?>px;
	overflow: hidden;
	border: 2px dotted #E9EBE5;
    }
    #carousel-content {
	position: relative;
	_height : 1%; /* trick for display IE 7 bug - it shows owerflown content that should be hidden */
	width: <?php echo $totalsize; ?>px;
    }
    #carousel-content .slide {
	position: relative;
	float: left;
	width: <?php echo $width-20; ?>px;
	height: <?php echo $height; ?>px;
	padding: 8px;
	overflow: hidden;
    }
    .carousel-selected {
	border: 1px dashed #DEDEDE;
	background-color: #FFF5B3
    }
 
    .controls {
 
	width: <?php echo $width; ?>px;
	padding: 6px;
	overflow: hidden;
	border: 1px solid #E9EBE5;
    }
/*     #carousel-content h2 {
 
     } */
</style>
 
<!-- needed div ids -->
<div id="carousel-wrapper">
    <div id="carousel-content">
	<?php
 
       // other variables/ default settings for the carousel
	if(!isset($transition)) $transition = 'sinoidal'; //sinoidal or spring
	if(!isset($effect)) $effect = 'scroll'; //scroll or fade
	if(!isset($frequency)) $frequency = "8";
	if( $effect == 'scroll') $circular= 'true'; else $circular = 'false'
	?>
	<?php
	// content loop
 
	if($effect == 'scroll') {
	    $contents[] = $contents[0];
            //repeating the first slide after the last one is a trick to provide smooth circular scrolling
            //
	}
 
	foreach ($contents as  $content):
	?>
	<?php
	//other things you don't care about in this example..
        [..]
 
        // set a list of titles for the go to slide # commands
	$titles[$id] = $content['Content']['title'];
	?>
        <div id="slide-<?php echo $id;?>">
	    <h2>
		<?php echo $html->link($content['Content']['title'],"/content/view/$id"); ?>
	    </h2>
	    <div>
		<?php
		echo $content['Content']['summary'];
		?>
	    </div>
 
	</div>
	<?php endforeach; ?>
    </div>
</div>
<!-- Menu for manual control: previous slide, next slide, and index (-> go to slide N) -->
<div>
    <a href="javascript:" rel="next" style="float: right;">
	<?php echo $icons->next('small'); ?>
    </a>
 
    <a href="javascript:" rel="prev" style="float: left;">
	<?php echo $icons->back('small'); ?>
    </a>
    <ul style="margin-left:10px; margin-right: 30px;">
 
	<?php foreach ($titles as $id => $title): ?>
            <li>
		<a href="javascript:" rel="slide-<?php echo $id; ?>">
		    <?php echo $text->truncate($title,76,array('ending' => '[..]', 'exact' => false)); ?>
		</a>
	    </li>
	<?php endforeach; ?>
    </ul>
 
</div>
<!-- finally, here it is. Our carousel call with settings -->
<script type="text/javascript">
new Carousel('carousel-wrapper', $$('#carousel-content .slide'), $$('a.carousel-control', 'a.carousel-jumper'),{duration: 0.8, circular: <?php echo $circular; ?>, effect: '<?php echo $effect; ?>', transition:'<?php echo $transition; ?>', wheel: true, auto: true, frequency: <?php echo $frequency; ?>});
</script>
   </div>

So, just grab the element, and change the data you want displayed – my $contents array, coming from a Model->find, contanins the title, intro and metadata of main homepage posts – if you need something more elegant, just use fixed size “cover” images – of the size of a slide – and an overlay div (with semi-trasparent background), you css wizard (and share your styles back, please!)

Then, set your settings (probably in the relevant controller action), edit your paths, put craousel-min.js in webroot/js (alongside prototype and scriptacuous) and call it from your view.

It’s reausable – for example, I use it with different settings in many subsites of a portal (each one with his template) and -conditionally, based on a value of records of the Home model- enabled or disabled depending of the user (admin) choiche.

Code block

<?php
// view/home/display.ctp
$carousel = 0;
 
    if(isset($home['Home']['carousel']))
	$carousel = $home['Home']['carousel'];
}
 
//[..]
    if( $carousel){ //if carousel was selected for the
    //top stories of this home, load the settings and then the element
	$settings_path = WWW_ROOT.'/themed/'.$this->params['site'].'/elements/yadda_yadda/carousel_settings.ctp';
	include($settings_path);
 
	echo $this->element('yadda_yadda/carousel',
	    array('contents' => $selected['content'],
		    //other not relevant stuff
		    // [..]
		    'width' => $carousel_width,
		    'height' => $carousel_height,
		    'effect' => $carousel_effect,
		    'transition' => $carousel_transition,
		    'frequency' => $frequency
 
		    )
		);
 
    } else {
    // else load the default element showing the top stories like a blog
	echo $this->element('articles',
	    array('contents' => $selected['content'],
		    //other stuff
 
		    )
		);
    }
}
?>

carousel_settings.ctp simpy is:

Code block

<?php
$carousel_width	    = 600;
$carousel_height    = 450;
$carousel_effect    = 'scroll'; //scroll or fade
$carousel_transition= 'sinoidal'; //sinoidal or spring
//$frequency = 5;
?>

just to have settings for specific layouts or views (you may store the values in the database and set them from the controller, of course)

That’s all, comments / questions / suggestions are welcome