jQuery Sortable List

Using jQuery UI Sortable plugin to make a draggable question. Drag the list items into the correct order and check to see if the answer is correct. View a demo here.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>jQuery UI Sortable List</title>
		<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.1.1/build/cssfonts/fonts-min.css&amp;3.1.1/build/cssreset/reset-min.css" />
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
		<style type="text/css">
			body {
   				margin: 20px;
   				font-size: 14px;
			}
			h1 {
				font-size: 18px;
				margin-bottom: 20px;
			}
			#numbers li, #outcome {
				width:200px;
				padding:9px 9px 9px 18px;
				margin-bottom: 10px;
			}
			#numbers li {
				color: #ddd;
				background-color: #444;
			}
			#outcome {
				color: #D1FFDF;
				background-color: #19B548;
				display: none;
			}
		</style>
	</head>
	<body>
		<h1>Order Lowest to Highest</h1>
		<div id="numbers">
			<ul>
				<li>eight</li>
				<li>six</li>
				<li>three</li>
				<li>one</li>
			</ul>
		</div>
		<div id="outcome">correct!</div>
		<script type="text/javascript">
			/* <![CDATA[ */
			//create a jquery instance with a callback function to be called when the dom is ready
			$(function(){

				var outcome = $('#outcome');

				$('#numbers ul').sortable(); 

				$('#numbers').bind('sortstop',function(){

					//get all the answers in an array
					var answer = new Array();
					$('#numbers li').each(function(index){
						answer[index] = $.trim($(this).text());
					});

					//check the answers
					if (answer[0] === 'one' && answer[1] === 'three' && answer[2] === 'six' && answer[3] === 'eight') {
						//if the answers are correct display the outcome div
						outcome.fadeIn();
					} else {
						//if the answers are wrong make the outcome div hidden
						outcome.hide();
					}
				});

			});
			/* ]]> */
		</script>
	</body>
</html>
Posted in Uncategorized | Leave a comment

YUI3 Sortable List

Using YUI3 Sortable Utility to make a draggable question. Drag the list items into the correct order and check to see if the answer is correct. View a demo here.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>YUI3 Sortable List</title>
		<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.1.1/build/cssfonts/fonts-min.css&amp;3.1.1/build/cssreset/reset-min.css" />
		<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.1.1/build/yui/yui-min.js"></script>
		<style type="text/css">
			body {
   				margin: 20px;
			}
			h1 {
				font-size: 18px;
				margin-bottom: 20px;
			}
			#numbers li {
				width:200px;
				background-color: #444;
				margin-bottom: 10px;
				padding:9px 9px 9px 18px;
				color: #ddd;
				font-size: 14px;
			}
			#answer {
				visibility: hidden;
				margin-top: 10px;
				font-size: 16px;
				color: #D1FFDF;
				background-color: #19B548;
				width: 200px;
				padding: 9px 9px 9px 18px;
			}
		</style>
	</head>
	<body>
		<h1>Order Lowest to Highest</h1>
		<div id="numbers">
			<ul>
				<li>eight</li>
				<li>six</li>
				<li>three</li>
				<li>one</li>
			</ul>
		</div>
		<div id="answer">correct!</div>
		<script type="text/javascript">
			/* <![CDATA[ */

			//trim white space function from http://bit.ly/X1kOs
			function trim(o) {
				return o.replace(/^\s+|\s+$/g,"");
			}

			//create a YUI instance with the node and sortable modules
			YUI().use('node','sortable',function(Y){

				//create a new Sortable object
				var sortable = new Y.Sortable({
					container: '#numbers',
					nodes: 'li',
					opacity: '.1'
				}); 

				//sortable uses drag and drop events which are collected by DragDropMgr http://yhoo.it/cvfbjj
				Y.DD.DDM.on('drag:end',function(){

					//get all the answers in an array
					var answer = Y.all('#numbers li').get('text'); 

					//internet explorer adds some white space, so we trim it off
					if (trim(answer[0]) === 'one' && trim(answer[1]) === 'three' && trim(answer[2]) === 'six' && trim(answer[3]) === 'eight') {
						Y.one('#answer').setStyle('visibility','visible');
					}

				});

			});
			/* ]]> */
		</script>
	</body>
</html>
Posted in Uncategorized | Leave a comment

Simple Message Board with Yahoo Social SDK for PHP

Using Yahoo! Social SDK for PHP to build a simple message board. Users will be able to login and post messages with their Yahoo credentials.

First register a new application on Yahoo. Record the Application ID, Consumer Key and a Consumer Secret.

Create a database to keep track of the people (guid) and posts:

Download Yahoo! Social SDK for PHP and upload it to your server. We need the ‘lib’ directory. Then create four more files (database.class.php, delete_message.php, index.php, and process_message.php). The file structure looks like this:

Update database.class.php with your database information:

<?php
define('SERVER', 'your_database server');
define('DB_USER', 'your_database_username');
define('DB_PASS', 'your_database_password');
define('DB_NAME', 'your_database_name');

class Database {

	private $connection;

	function __construct() {
		$this->open_connection();
	}

	public function open_connection() {
		$this->connection = mysql_connect(SERVER,DB_USER,DB_PASS);
		if (!$this->connection) {
			die("Database connection failed: " . mysql_error());
		} else {
			$db_select = mysql_select_db(DB_NAME,$this->connection);
			if (!$db_select) {
				die("Database selection failed: " . mysql_error());
			}
		}
	}

	public function close_connection() {
		if (isset($this->connection)) {
			mysql_close($this->connection);
			unset($this->connection);
		}
	}

	public function query($sql) {
		$result = mysql_query($sql, $this->connection);
		$this->confirm_query($result);
		return $result;
	}

	private function confirm_query($result) {
		if (!$result) {
			die("Database query failed: " . mysql_error());
		}
	}

	public function escape_value( $value ) {
		$magic_quotes_active = get_magic_quotes_gpc();
		$new_enough_php = function_exists( "mysql_real_escape_string" );
		if ($new_enough_php) {
			if ($magic_quotes_active) {
				$value = stripslashes($value);
			}
			$value = mysql_real_escape_string($value);
		} else {
			if (!$magic_quotes_active) {
				$value = addslashes( $value );
			}
		}
		return $value;
	}

	public function fetch_array($result_set) {
		return mysql_fetch_array($result_set);
	}

	public function num_rows($result_set) {
		return mysql_num_rows($result_set);
	}

	public function affected_rows() {
		return mysql_affected_rows($this->connection);
	}  

}

$db = new Database();
?>

Update index.php with your Consumer Key, Consumer Secret and Application ID:

<?php
require_once("lib/Yahoo.inc");
define('CONSUMER_KEY', "your_consumer_key");
define('CONSUMER_SECRET', "your_consumer_secret");
define('APPID', "your_app_id");
$session = YahooSession::requireSession(CONSUMER_KEY,CONSUMER_SECRET,APPID);
require_once('database.class.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Message Board</title>
		<style>
			table {
				width:80%;
			}
			td {
				background-color: #eee;
			}
			th {
				background-color: #ddd;
			}
			#post_form {
				padding: 20px;
			}
		</style>
	</head>
	<body>
		<h1>Simple Message Board</h1>
		<?php
		// fetch the logged-in (sessioned) user
		$user = $session->getSessionedUser();
		// fetch the profile for the current user.
		$profile = $user->getProfile();
		// display form to post a message
		echo "<form action=\"process_message.php\" method=\"post\">\n";
		echo "<div id=\"post_form\">\n";
		echo "<input type=\"hidden\" name=\"guid\" value=\"{$user->session->guid}\" />\n";
		echo "<input type=\"hidden\" name=\"name\" value=\"{$profile->nickname}\" />\n";
		echo "<input type=\"text\" name=\"message\" value=\"\" />\n";
		echo "<input type=\"submit\" name=\"submit\" value=\"Post Message\" />\n";
		echo "</div>\n";
		echo "</form>\n";
		// display messages from the database
		echo "<table>\n";
		echo "<thead>";
		echo "<tr><th>Date</th><th>Nickname</th><th>Content</th><th>Owner</th></tr>";
		echo "</thead>\n";
		$query = "SELECT * FROM posts ORDER BY date DESC";
		$result = $db->query($query);
		while ($row = $db->fetch_array($result)) {
			echo "<tr>";
			echo "<td>{$row['date']}</td>";
			echo "<td>{$row['name']}</td>";
			echo "<td>{$row['message']}</td>";
			// if this message was posted by the logged in user offere a delete link
			if ($user->session->guid == $row['guid']) {
				echo "<td><a href=\"delete_message.php?id={$row['id']}&guid={$row['guid']}\">delete</a></td>";
			} else {
				echo "<td></td>";
			}
			echo "</tr>\n";
		}
		echo "</table>\n";
		?>
	</body>
</html>

delete_message.php removes a message from the database:

<?php
require_once('database.class.php');
$guid = $db->escape_value($_GET['guid']);
$id = $db->escape_value($_GET['id']);
$query = "DELETE FROM posts where guid = '$guid' and id = '$id' LIMIT 1";
$db->query($query);
header('Location: index.php');
?>

process_message.php inserts a new message into the database:

<?php
require_once('database.class.php');
$guid = $_POST['guid'];
$name = $_POST['name'];
$message = $db->escape_value($_POST['message']);
$query = "INSERT INTO posts (guid,name,message) VALUES ('$guid','$name','$message')";
$db->query($query);
header('Location: index.php');
?>

View a demo here.

Posted in Uncategorized | Leave a comment

Translate Text with Google and YQL

Using the Google Language API through YQL to translate text. View a demo here.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>YUI3 Google Translate YQL</title>
		<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.1.1/build/yui/yui-min.js"></script>
		<style type="text/css">
			#src, #out {
				margin: 20px;
			}
			#out {
				width: 340px;
			}
		</style>
	</head>
	<body>
		<h1>English to French Translation</h1>
		<form method="post" action="">
			<div id="src">
				<textarea name="srcText" id="srcText" cols="40" rows="8">source text here</textarea>
				<br />
				<input type="submit" id="submit" value="Translate" />
			</div>
		</form>
		<div id="out"></div>
		<script type="text/javascript">
			/* <![CDATA[ */
			//create a YUI instance with the node and gallery-yql modules
			YUI().use('node','gallery-yql', function(Y) {

				//get node instance for the #out
				var out = Y.one('#out');

				//when the submit button is clicked
				Y.one('#submit').on('click',function(e){
					//stop the default action
					e.halt();
					//get the source text
					var srcText = Y.one('#srcText').get('value');
					//query the google.translate data table, the target language is 'fr' for french
					var q1 = new Y.yql('select * from google.translate where q="'+srcText+'" and target="fr"');
				    //on a successful query replace out's content with the translated text
				    q1.on('query', function(r) {
				    	out.setContent(r.results.translatedText);
				    });
				    //if an error occurs replace out's content with the translated text
				    q1.on('error', function(r) {
				        out.setContent('an error has occurred');
				    });
				});

			});
			/* ]]> */
		</script>
	</body>
</html>

Links:
- YQL Query gallery module
- Google Translate

Posted in Uncategorized | Leave a comment

CSS3 Reflect Images

Using CSS3 to build image reflections in webkit browsers. View a demo here.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>CSS3 Reflections</title>
		<style type="text/css">
			body {
				background-color: black;
			}
			div {
				margin: 40px auto;
				width: 500px;
			}
			#img1 {
				-webkit-box-reflect:below 0px -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(0.5,rgba(0,0,0,0)), to(rgba(0,0,0,0.5)));
				margin-bottom:220px;
			}
			#img2 {
				-webkit-box-reflect:below 5px -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(0.7,rgba(0,0,0,0)), to(rgba(0,0,0,0.5)));
				margin-bottom:170px;
			}
			#img3 {
				-webkit-box-reflect:below 0px -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(0.8,rgba(0,0,0,0)), to(rgba(0,0,0,0.4)));
				margin-bottom:100px;
			}
		</style>
	</head>
	<body>
		<div>
			<img id="img1" class="reflect" src="http://farm4.static.flickr.com/3361/4633775404_54046141e9.jpg" alt="dog1" width="500" height="375" />
			<img id="img2" class="reflect rheight30" src="http://farm4.static.flickr.com/3361/4633775404_54046141e9.jpg" alt="dog2" width="500" height="375" />
			<img id="img3" class="reflect rheight20 ropacity40" src="http://farm4.static.flickr.com/3361/4633775404_54046141e9.jpg" alt="dog3" width="500" height="375" />
		</div>
	</body>
</html>
Posted in Uncategorized | Leave a comment

YUI3 Example: Add Classes Reflect Images

Using YUI3 with Reflection.js. When the DOM is ready add classes to the images. The addReflections function (from reflection.js) uses the class values to create the reflections. View a demo here.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>YUI3 Reflection</title>
		<script type="text/javascript" src="reflection.js"></script>
		<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.1.1/build/yui/yui-min.js"></script>
		<style type="text/css">
			body {
				background-color: black;
			}
			div {
				margin: 40px auto;
			}
		</style>
	</head>
	<body>
		<div>
			<img id="img1" src="http://farm4.static.flickr.com/3361/4633775404_54046141e9.jpg" alt="dog1" width="500" height="375" />
			<img id="img2" src="http://farm4.static.flickr.com/3361/4633775404_54046141e9.jpg" alt="dog2" width="500" height="375" />
			<img id="img3" src="http://farm4.static.flickr.com/3361/4633775404_54046141e9.jpg" alt="dog3" width="500" height="375" />
		</div>
		<script type="text/javascript">
			/* <![CDATA[ */
			//create a YUI instance with the node module
			YUI().use('node', function(Y) {

				//start reflecting when the DOM is usable
				Y.on('domready', function() {

					//get node instances for the images
					var img1 = Y.one('#img1');
					var img2 = Y.one('#img2');
					var img3 = Y.one('#img3');

					//reflect img1
					img1.addClass('reflect');
					//reflect img2 with a height of 30%
					img2.addClass('reflect rheight30');
					//reflect img2 with a height of 20% and opacity of 40%
					img3.addClass('reflect rheight20 ropacity40');

					//run function from reflection.js
					addReflections();

				});

			});
			/* ]]> */
		</script>
	</body>
</html>
Posted in Uncategorized | Leave a comment

JavaScript Reflect Images

Using Reflection.js to create image reflections. Download and include the javascript file on the page. Then add the ‘reflect’ class to the images. You can also add classes for the height (rheight20 for 20%) and opacity (ropacity40 for 40%). View a demo here.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>YUI3 Reflection</title>
		<script type="text/javascript" src="reflection.js"></script>
		<style type="text/css">
			body {
				background-color: black;
			}
			div {
				margin: 40px auto;
			}
		</style>
	</head>
	<body>
		<div>
			<img id="img1" class="reflect" src="http://farm7.staticflickr.com/6166/6170013103_256b092e4f.jpg" alt="dog1" width="500" height="375" />
			<img id="img2" class="reflect rheight30" src="http://farm7.staticflickr.com/6166/6170013103_256b092e4f.jpg" alt="dog2" width="500" height="375" />
			<img id="img3" class="reflect rheight20 ropacity40" src="http://farm7.staticflickr.com/6166/6170013103_256b092e4f.jpg" alt="dog3" width="500" height="375" />
		</div>
	</body>
</html>
Posted in Uncategorized | Leave a comment

YUI3 Display Referring Page

I’m actually just using YUI3 to display the referring page in a div. The actual value is retrieved directly from the document referrer property. View a demo here.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>YUI3 Referring Page</title>
		<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.1.1/build/yui/yui-min.js"></script>
	</head>
	<body>
		<div id="msg"></div>
		<script type="text/javascript">
			/* <![CDATA[ */
			//create a YUI instance with the node module
			YUI().use('node', function(Y) {

				//get a node instance of the div
				var msg = Y.one('#msg');

				//the referrer property returns the page a visitor came from
				//if the visitor came here directly it will be empty
				var referrer = document.referrer;

				//check to see if referrer is an empty string
				if (referrer === '') {
					//set a message using the setContent method of the node instance
					msg.setContent('direct');
				} else {
					msg.setContent('you came from: '+referrer);
				}

				Y.log('referrer='+referrer); //this just displays referrer in firebug (getfirebug.com)

			});
			/* ]]> */
		</script>
	</body>
</html>
Posted in Uncategorized | Leave a comment

Google Charts API Example

Using Google Charts API to build a bar, column, line, and pie chart. View a demo here.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Google Basic Charts</title>
		<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	    <script type="text/javascript">
			//load the visualization API and corechart package (info on corechart: http://bit.ly/bp9VpS)
			google.load('visualization', '1', {'packages':['corechart']});

			//set a callback function 'drawChart' to run when the API is loaded
			google.setOnLoadCallback(drawChart);

			function drawChart() {
				var chartTitle = '2009 City Housing Sales';
				var chartWidth = 600;
				var chartHeight = 360;

				//create the data table
				var data = new google.visualization.DataTable();
				data.addColumn('string', 'Month');
				data.addColumn('number', 'Sales');
				data.addRows([
					['January', 143],
					['February', 126],
					['March', 250],
					['April', 50],
					['May', 75],
					['June', 50],
					['July', 300],
					['August', 52],
					['September', 150],
					['October', 275],
					['November', 90],
					['December', 120]
				]);

				//instantiate the charts
				var pieChart = new google.visualization.PieChart(document.getElementById('pie'));
				var barChart = new google.visualization.BarChart(document.getElementById('bar'));
				var columnChart = new google.visualization.ColumnChart(document.getElementById('column'));
				var lineChart = new google.visualization.LineChart(document.getElementById('line'));
				var areaChart = new google.visualization.AreaChart(document.getElementById('area'));

				//draw the charts
				pieChart.draw(data, {width: chartWidth, height: chartHeight, title: chartTitle});
				barChart.draw(data, {width: chartWidth, height: chartHeight, title: chartTitle});
				columnChart.draw(data, {width: chartWidth, height: chartHeight, title: chartTitle});
				lineChart.draw(data, {width: chartWidth, height: chartHeight, title: chartTitle});
				areaChart.draw(data, {width: chartWidth, height: chartHeight, title: chartTitle});
			}
	    </script>
	</head>
	<body>
		<div id="pie"></div>
		<div id="bar"></div>
		<div id="column"></div>
		<div id="line"></div>
		<div id="area"></div>
	</body>
</html>

Links:
- Google Code Playground

Posted in Uncategorized | Leave a comment

YUI3 Simple Slideshow with AlloyUI

Using AlloyUI Image Viewer Base YUI3 gallery module to make a simple lightbox slideshow. On the page are a group of thumbnails that link to larger images. By default the link titles become the slideshow captions. I’ve also added the preloadAllImages configuration option (there’s a lot more available). View a demo here.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>YUI3 AlloyUI Slideshow</title>
		<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.1.1/build/yui/yui-min.js"></script>
		<style type="text/css">
			#gallery {
				margin: 20px;
			}
		</style>
	</head>
	<body>
		<div id="gallery">
			<a href="http://farm4.static.flickr.com/3084/4565329765_05bd6241b2.jpg" title="Fun Mario Cake">
				<img src="http://farm4.static.flickr.com/3084/4565329765_05bd6241b2_s.jpg" alt="cake" />
			</a>
			<a href="http://farm2.static.flickr.com/1335/4610686635_042647becc.jpg" title="Mario Wins!">
				<img src="http://farm2.static.flickr.com/1335/4610686635_042647becc_s.jpg" alt="cake" />
			</a>
			<a href="http://farm5.static.flickr.com/4048/4545988500_8ed883021f.jpg" title="Mario Races">
				<img src="http://farm5.static.flickr.com/4048/4545988500_8ed883021f_s.jpg" alt="cake" />
			</a>
		</div>
		<script type="text/javascript">
			/* <![CDATA[ */
			//create a YUI instance with a configuration object and load in the 'gallery-aui-image-viewer-base' module
			YUI({
			    gallery: 'gallery-2010.06.07-17-52',
			    modules: {
			        'gallery-aui-skin-base': {
			            fullpath: 'http://yui.yahooapis.com/gallery-2010.06.07-17-52/build/gallery-aui-skin-base/css/gallery-aui-skin-base-min.css',
			            type: 'css'
			        },
			        'gallery-aui-skin-classic': {
			            fullpath: 'http://yui.yahooapis.com/gallery-2010.06.07-17-52/build/gallery-aui-skin-classic/css/gallery-aui-skin-classic-min.css',
			            type: 'css',
			            requires: ['gallery-aui-skin-base']
			        }
			    }
			}).use('gallery-aui-image-viewer-base', function(Y) {
				//create an imageviewer and render it
				var imageViewer1 = new Y.ImageViewer({
					links: '#gallery a', //could also do Y.all('#gallery a'),
					preloadAllImages: true
				}).render();
			});
			/* ]]> */
		</script>
	</body>
</html>

Links:
- YUI3 Gallery Modules
- AlloyUI

Posted in Uncategorized | Leave a comment