Flash Banner part 1 – jQuery Flash and document specific chunks in MODx
If you are new to MODx you might want to check out the newbie MODx tutorial before you continue.
Since the purpose of Asian Diving Vacation is to sell stuff it would be cool with a big flash header that rotates images and text based on the content currently being viewed. The goal is to make people want to dive and somehow Flash always pops up when it comes to how to best stir feelings of desire in the viewer.
In order to connect the content in the flash banner to each article without writing a lot of PHP code we need some way of connecting a string of data that can be returned by a Javascript function for subsequent import into the shockwave, basically the same mechanism I’ve already described in a prior tutorial. As it turns out this is possible due to the fact that template variables are parsed before chunks, hence {{info[*id*]}} is possible. When this code is read by the parser we will include a chunk with the name of info7 if we are currently browsing the document with id 7.
With that in mind let’s take a look at some new stuff in the head section:
<head>
<title>[(site_name)] - [*pagetitle*]</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="[(base_url)]assets/templates/asd/examples/02_layouts_2col/css/layout_2col_left_13.css" rel="stylesheet" type="text/css"/>
<!--[if lte IE 7]><link href="[(base_url)]assets/templates/asd/examples/02_layouts_2col/css/patches/patch_2col_left_13.css" rel="stylesheet" type="text/css" /><![endif]-->
<script type="text/javascript" src="[(base_url)]assets/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="[(base_url)]assets/js/jquery.cookie.js"></script>
<script type="text/javascript" src="[(base_url)]assets/js/jquery-treeview/jquery.treeview.pack.js"></script>
<script type="text/javascript" src="[(base_url)]assets/js/jquery.flash.js"></script>
<script type="text/javascript" src="[(base_url)]assets/js/asd.js"></script>
<script type="text/javascript">
function getInfo(){ return "{{info[*id*]}}"; }
function getDefault(){ return "{{default_info}}"; }
function getUrl(){ return "[*images_url*]"; }
$(document).ready(function(){
loadFlash("[*images_url*]");
});
</script>
</head>We have three pieces of information, a custom template variable called images_url, in our case it is “http://asiandivingvacation.com/assets/images/”. The default_info chunk currently contains: “small_animals.jpg;big_animals.jpg|Asia’s got them all, small ones …;100;100:… and big ones;250;150|200;2” which is information that will be parsed by the flash file. If the chunk in question doesn’t exist a null string will be returned which our shockwave will check for and use the default values instead.
We also pass the image url to a function called loadFlash, it is defined in asd.js:
function loadFlash(path){
$('#header').flash({
src: path + 'anim_banner.swf',
width: 960,
height: 250
});
}This is not much more than the bare minimum, other alternatives can be seen at the jQuery Flash page. Notice the use of the full path for inclusion, not relative paths. A relative path would be screwed up royally by the pretty URL scheme. Another pitfall is that you have to use the minified version of jQuery, according to the homepage the plugin will break in IE 6 if the packed version is used.
The flash file will also require a proper crossdomain.xml file to be uploaded to the document root so that it can be directly accessible through domain.com/crossdomain.xml, mine looks like this at the moment:
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy
SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="www.asiandivingvacation.com*" />
<allow-access-from domain="asiandivingvacation.com*" />
</cross-domain-policy>The asterisks at the end are needed because of the pretty URLs, it would break without them.
Related Posts
Tags: jquery, jquery flash, MODx