2013-07-30, 00:26:16
Well - here is the page code, for what good it might do someone. It isn't that pretty, but it works for me and keeps things simple. I just add a new child page under this one when I need a new map, upload images using a naming convention (I have a gimp script that generates the images for me with the correct names) and the following happens:
- The mouseover title is css, and is the title field from each child page
- the map type for the mobilyselect javascript comes from the custom (droplist) maptype field from each title page
- the images come from /data/uploads/childslug/
- the links to the child pages are just the child slugs (of course)
Hope that helps someone.
Pretty nifty interactive map Shawn- not familiar with There, though!
-Rob A>
- The mouseover title is css, and is the title field from each child page
- the map type for the mobilyselect javascript comes from the custom (droplist) maptype field from each title page
- the images come from /data/uploads/childslug/
- the links to the child pages are just the child slugs (of course)
Hope that helps someone.
Code:
<?php
/****************************************************
*
* @File: portfolio.php
* @Package: GetSimple
* @Action: carto theme for the GetSimple CMS
*
*****************************************************/
/* Register and queue scripts */
register_script('mobilyselect', get_theme_url(false).'/mobilyselect.js', '1.0', FALSE);
register_script('mobilyselect_init', get_theme_url(false).'/init.js', '1.0', FALSE);
queue_script('jquery',GSFRONT);
queue_script('mobilyselect',GSFRONT);
queue_script('mobilyselect_init',GSFRONT);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<!-- Head -->
<title><?php get_page_clean_title(); ?> - <?php get_site_name(); ?></title>
<meta name="robots" content="index, follow" />
<link rel="stylesheet" type="text/css" href="<?php get_theme_url(); ?>/style.css" media="all" />
<?php get_header(); ?>
<script type="text/javascript"><!--
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
/* IE6 flicker hack from http://dean.edwards.name/my/flicker.html */
function roll_over(img_name, img_src)
{
document[img_name].src = img_src;
}
--></script>
</head>
<body id="<?php get_page_slug(); ?>" >
<?php include(GSTHEMESPATH.$TEMPLATE.'/header.php'); ?>
<div id="wrapper">
<div id="content">
<h1><?php getPageField(return_page_slug(),"title"); ?></h1>
<div id="page-content">
<div class="page-text">
<?php get_page_content(); ?>
<?php
/****************************************************
* Create the list of subpages.
*****************************************************/
echo '<div style="text-align:center;display:table;">' . "\n";
/* Uses Mike's page caching plugin http://get-simple.info/extend/plugin/page-caching/65/ */
$childlist = getChildren(return_page_slug());
$subpagelist = array();
foreach($childlist as $child) {
if (returnPageField($child, 'private') != 'Y')
$subpagelist[] = array($child, returnPageField($child,'title'), returnPageField($child,'pubDate'), returnPageField($child,'maptype'));
}
/* sort children my pubDate subval_sort is built in to GS2.1+ */
$subpagelist = subval_sort($subpagelist ,2);
$selecter_height = 90+145*floor((count($subpagelist)+2)/3);
echo '<div class="selecter selecter1" style="min-height:' . $selecter_height. 'px;">' . "\n";
/* This next bit is for the cool filter javascript */
?>
<div class="selecter portfolio">
<div class="selecterBtns">
<ul class="nolist">
<li><a href="#" rel="all" class="active">All Maps</a></li>
<li><a href="#" rel="world">World Maps</a></li>
<li><a href="#" rel="regional">Regional Maps</a></li>
<li><a href="#" rel="city">City/Town Maps</a></li>
<li><a href="#" rel="battle">Battle Maps</a></li>
<li><a href="#" rel="other">Other Maps</a></li>
</ul>
</div>
<div class="selecterContent">
<ul class="nolist">
<?php
foreach($subpagelist as $subpage) {
$cimage = '/data/uploads/' . $subpage[0] . '/cover.jpg';
echo '<li class="' . $subpage[3] . '">';
echo '<div class="rollthumb" style="background-image: url(' . $cimage . ');">' . "\n";
echo '<a href="' . $subpage[0] . '/"><span>' . $subpage[1] . "</span></a>\n";
echo "</div>\n";
echo '</li>';
}
echo '</div>';
/****************************************************/
?>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<?php include(GSTHEMESPATH.$TEMPLATE.'/footer.php'); ?>
</body>
</html>Pretty nifty interactive map Shawn- not familiar with There, though!
-Rob A>