public
Last active

YML-based auto-rotating carousel for YAP

  • Download Gist
gistfile1.php
PHP
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105
<?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>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.