AOL circaVie and Thickbox using PHP
AOL's circaVie is a utility which is used to create interactive timelines containing photos and text. This post will walk through the process of using PHP and the Thickbox javascript framework to display and view the timeline search results such that the browser does not need to reload the window.
Creating a circaVie timeline is very simple and fun. The resulting Flash timeline can easily be embedded in any web page via pasting the few lines of code that is obtained by clicking the appropriate link at the bottom of a timeline. You will also see that each timelines has an RSS feed. To find timelines to view, you can use circaVie's search form which is clearly visible on every page of the web site. If you click on one of the timelines in your search result, you will notice that your page reloads to the timeline you selected. If you want to view another timeline in your search, you must click the "back" button of your browser and then select another timeline.
Thickbox is a javascript framework which simplifies using modal windows to display images or content. Check out the demos on the Thickbox website to see all the functionality that this framework provides. For the purposes of this post we will only be displaying inline content in a modal window. Please note that Thickbox requires the jquery framework. Here is the high level view of what we will do:
- Get circaVie search results based on a user-defined query
- Parse results to get timeline attributes (i.e. ID, title, and image source)
- Layout search results in a table with all the necessary Thickbox elements in place
This technique was accomplished using the following PHP code:
<html>
<head>
<title>aol-circavie-and-thickbox-using-php</title>
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/thickbox.js"></script>
<link rel="stylesheet" href="assets/css/thickbox.css" type="text/css" media="screen" />
</head>
<body>
<h1>AOL circaVie and Thickbox using PHP</h1>
<form method="post">
<input maxlength="2048" name="qp" size="55" value="<?php echo $_REQUEST['qp'] ?>">
<input name="submit" type="submit">
</form>
<br />
<?php
// Utility function to make HTTP Request //
// modified from http://www.simmonsconsulting.com/wordpress/2006/04/11/function-to-replace-php-fopen-for-urls //
function Grabber( $url ){
$handle = curl_init();
curl_setopt( $handle, CURLOPT_RETURNTRANSFER, 1 );
curl_setopt( $handle, CURLOPT_URL, $url );
curl_setopt( $handle, CURLOPT_TIMEOUT, 60 );
$url_content = curl_exec( $handle );
curl_close( $handle );
return $url_content;
}
// If query is submitted //
if ( isset( $_REQUEST['qp'] ) ){
// Define URL string for circavie search //
$url = "http://www.circavie.com/search/timelines?submit.x=0&submit.y=0&submit=Go&query=" . urlencode( $_REQUEST['qp'] );
// Retrieve the query results //
$url_response = Grabber( $url );
// Define regular expression pattern //
$pattern = '/(?:<li class=\"hentry\">\n<a href=\"http:\/\/www\.circavie\.com\/timelines\/)(.*?)(?:\"><img src=\")(.*?)
(?:\" alt=\")(.*?)(?:\" \/>.*?<\/a>)/';
// Find all matche to pattern to find serach results //
preg_match_all($pattern, $url_response, $result );
// If there were timelines found that match the query //
if ( count( $result[1] ) > 0 ){
// Get timeline attributes and store in a new array //
for ( $i = 0 ; $i < count( $result[1] ) ; $i++ ){
$timelines[$i]['id'] = $result[1][$i];
// If image src is the default image with a link relative to circaVie set full URL //
if ( $result[2][$i] == "/images/timeline-default-icon.gif" ){
$timelines[$i]['img'] = "http://www.circavie.com/images/timeline-default-icon.gif";
}
// Otherwise use image defined in search results //
else {
$timelines[$i]['img'] = $result[2][$i];
}
$timelines[$i]['title'] = $result[3][$i];
}
// Define table to display query results //
echo "<table><tr>";
// Counter will keep track of current timeline //
$counter = 0;
// Display images and title including thickbox stuff //
foreach ( $timelines as $timeline ){
// Every 3 timelines, start a new row //
if ( $counter % 3 == 0 && $counter != 0 ){
echo "</tr><tr>";
}
echo "<td>";
echo "<a href=\"#TB_inline?height=360&width=950&inlineId={$timeline['id']}\" class=\"thickbox\" title=\"{$timeline['title']}
\"><img src=\"{$timeline['img']}\" width=\"75\" height=\"75\" /><br />{$timeline['title']} </a><br \/>";
echo "<div id=\"{$timeline['id']}\" style=\"display:none;\">";
echo " <object type=\"application/x-shockwave-flash\" height=\"350\" width=\"940\" data=\"http://www.circavie.com/flash/timeline.swf\">";
echo " <param name=\"movie\" value=\"http://www.circavie.com/flash/timeline.swf\" \/>";
echo " <param name=\"flashvars\" value=\"embedded=true&tguid={$timeline['id']}&baseurl=http://www.circavie.com\" \/>";
echo " </object>";
echo "</div>";
echo "</td>";
$counter++;
}
echo "</tr></table>";
}
// If there were NO timelines found that match the query //
else {
echo "<h4>No timelines found.</h4>";
}
}
?>
</body>
</html>
Listing 1 - PHP Code.
Check out this working example. Enjoy.
Resources
- timothythate's blog
- Login or register to post comments