YML-based auto-rotating carousel for YAP

gistfile1.php

<?php // YML-based auto-rotating carousel for YAP

/*
Overview:
- This code displays a series of images and automatically rotates through them using yml
- This code was presented as part of a post on the YDN blog: http://developer.yahoo.net/blog/archives/2010/03/yap_sample_code_image_carousel_w_autorotation.html

Usage:
1. Put this file on your server
2. Create a YAP app and set the "Application URL" to the url of this file, eg http://example.com/rotator.php
3. Put this code in the "Small View Default Content" box:
<div id="rotator">
    <yml:include params='?start=0' replace="rotator">Loading...</yml:include>
</div>
4. Save and preview the code

Resources
- YAP docs: http://developer.yahoo.com/yap/
- YDN project page: http://developer.apps.yahoo.com/projects

Note
- Security and validation have been omitted to minimize complexity.  Please add these before deploying in a live environment
*/

// convert input in query string to int so we can use numeric operations on it
$start = (int) $_GET['start'];

$items = array(
    array(
        'image' => 'http://farm1.static.flickr.com/39/82034647_0633b62dd5_t.jpg',
        'text' => 'Clarke\'s Clown Fish',
        'credit' => 'http://www.flickr.com/photos/shekgraham/82034647/'
    ),
    array(
        'image' => 'http://farm3.static.flickr.com/2505/3808858672_84301cc8ae_t.jpg',
        'text' => 'Gone fishing.....',
        'credit' => 'http://www.flickr.com/photos/nov03/3808858672/'
    ),
    array(
        'image' => 'http://farm3.static.flickr.com/2439/3888910753_8df35feb00_t.jpg',
        'text' => 'Fishing',
        'credit' => 'http://www.flickr.com/photos/pagedooley/3888910753/'
    ),
    array(
        'image' => 'http://farm3.static.flickr.com/2344/2086382363_a792cde5ca_t.jpg',
        'text' => 'Curious Fish',
        'credit' => 'http://www.flickr.com/photos/jurvetson/2086382363/'
    ),
    array(
        'image' => 'http://farm3.static.flickr.com/2332/1503268179_e29d0356b8_t.jpg',
        'text' => 'San Francisco / Golden Gate Park -...',
        'credit' => 'http://www.flickr.com/photos/the-o/1503268179/'
    ),
    array(
        'image' => 'http://farm4.static.flickr.com/3114/3571272604_fd77e35c88_t.jpg',
        'text' => 'Fishing Village and Pier Monhegan',
        'credit' => 'http://www.flickr.com/photos/nhoulihan/3571272604/'
    ),
    array(
        'image' => 'http://farm1.static.flickr.com/179/441278924_442e2cefab_t.jpg',
        'text' => 'Fish House',
        'credit' => 'http://www.flickr.com/photos/jayhem/441278924/'
    ),
    array(
        'image' => 'http://farm1.static.flickr.com/25/65896352_6866c2ee57_t.jpg',
        'text' => 'Georgia Aquarium Fish',
        'credit' => 'http://www.flickr.com/photos/mikejsolutions/65896352/'
    ),
    array(
        'image' => 'http://farm4.static.flickr.com/3184/2972687763_fd04993723_t.jpg',
        'text' => 'Clown Fish',
        'credit' => 'http://www.flickr.com/photos/thebusybrain/2972687763/'
    )
);

if ( $start >= count( $items ) ) {
    $start = 0;
}
$items = array_slice( $items, $start, 3 );
$start += 3;

?>

<div id="rotator">
    <style>
    .item {
       float: left;
       width: 100px;
       margin-right: 10px;
       height: 150px;
    }
    .item img {
        border: none;
    }
    </style>
    <? foreach( $items as $item ): ?>
        <div class="item">
            <a href="<?= $item['credit'] ?>">
                <img src="<?= $item['image'] ?>"/>
            </a><br/>
            <?= $item['text'] ?>
        </div>
    <? endforeach ?>
    <yml:include params='?start=<?= $start ?>' delay="3000" replace="rotator" />
</div>