Here is the code...
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<!-- Copy code below -->
<link type="text/css" rel="stylesheet" href="css/multiBox.css" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<!--[if lte IE 6]>
<link type="text/css" rel="stylesheet" href="css/multiBoxIE6.css" />
<![endif]-->
<script type="text/javascript" src="javascript/mootools-1.2.3-core-yc.js"></script>
<script type="text/javascript" src="javascript/mootools-1.2.3.1-more-yc.js"></script>
<script type="text/javascript" src="javascript/overlay.js"></script>
<script type="text/javascript" src="javascript/multiBox.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
//call multiBox
var initMultiBox = new multiBox({
mbClass: '.mb',//class you need to add links that you want to trigger multiBox with (remember and update CSS files)
container: $(document.body),//where to inject multiBox
descClassName: 'multiBoxDesc',//the class name of the description divs
path: './Files/',//path to mp3 and flv players
useOverlay: true,//use a semi-transparent background. default: false;
maxSize: {w:600, h:400},//max dimensions (width,height) - set to null to disable resizing
addDownload: true,//do you want the files to be downloadable?
pathToDownloadScript: 'javascript/ForceDownload.asp',//if above is true, specify path to download script (classicASP and ASP.NET versions included)
addRollover: true,//add rollover fade to each multibox link
addOverlayIcon: true,//adds overlay icons to images within multibox links
addChain: true,//cycle through all images fading them out then in
recalcTop: true,//subtract the height of controls panel from top position
addTips: true//adds MooTools built in 'Tips' class to each element (see: http://mootools.net/docs/Plugins/Tips)
});
});
</script>
<!-- Copy code above -->
<!-- <script type="text/javascript" src="combine.php?type=javascript&files=prototype.js,effects.js,accordion.js,code_highlighter.js,javascript.js,html.js"></script> -->
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/effects.js"></script>
<script type="text/javascript" src="javascript/accordion.js"></script>
<script type="text/javascript">
//
// In my case I want to load them onload, this is how you do it!
//
Event.observe(window, 'load', loadAccordions, false);
//
// Set up all accordions
//
function loadAccordions() {
var topAccordion = new accordion('horizontal_container', {
classNames : {
toggle : 'horizontal_accordion_toggle',
toggleActive : 'horizontal_accordion_toggle_active',
content : 'horizontal_accordion_content'
},
defaultSize : {
width : 525
},
direction : 'horizontal'
});
var bottomAccordion = new accordion('vertical_container');
var nestedVerticalAccordion = new accordion('vertical_nested_container', {
classNames : {
toggle : 'vertical_accordion_toggle',
toggleActive : 'vertical_accordion_toggle_active',
content : 'vertical_accordion_content'
}
});
// Open first one
bottomAccordion.activate($$('#vertical_container .accordion_toggle')[0]);
}
</script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<th scope="col"><div id="container">
<p align="left" class="description" > </p>
<p align="left" class="description" > </p>
<p align="left" class="description" > </p>
<table width="540" border="0" cellspacing="0" cellpadding="0">
<tr>
<th width="540" height="67" class="projects-top" scope="col"> </th>
</tr>
<tr align="center">
<td class="projects-body"><div id="vertical_container" >
<h1 align="left" class="accordion_toggle">dropout-london.co.uk</h1>
<div class="accordion_content">
<h2 align="left"><a href="images/dropout-london-screenshot.jpg" id="mb1" class="mb" title="Image 1" rel="[images]"><img src="images/dropout-london-thumb.jpg" alt="dropout-london" width="500" height="293" border="0" /></a></h2>
</p>
</div>
<h1 align="left" class="accordion_toggle">bestwebsitesfor.com</h1>
<div class="accordion_content">
<h2 align="left"><img src="images/bestwebsitesfor-thumb.jpg" alt="bestwebsitesfor.com" width="500" height="293" /></h2>
</div>
<h1 align="left" class="accordion_toggle">cambridgestainedglass.co.uk</h1>
<div class="accordion_content">
<h2 align="left"><img src="images/cambridgestainedglass-thumb.jpg" alt="Cambridge Stained Glass" width="500" height="293" /></h2>
</div>
<h1 align="left" class="accordion_toggle">maxhector.com</h1>
<div class="accordion_content">
<h2 align="left"><img src="images/maxhector-thumb.jpg" alt="Max Hector photography" width="500" height="293" /></h2>
</div>
</div></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<p align="left" class="description" > </p>
<p align="left" class="description" > </p>
</div>
<div class="accordion_content">
<div id="horizontal_container" >
</div>
</div>
<div class="accordion_content">
<div id="vertical_nested_container" ></div>
</div>
</div>
<div class="page-footer">
<p>Stefan Lesik </p>
</div>
</div>
<script type="text/javascript" >
//
// You can hide the accordions on page load like this, it maintains accessibility
//
// Special thanks go out to Will Shaver @ http://primedigit.com/
//
var verticalAccordions = $$('.accordion_toggle');
verticalAccordions.each(function(accordion) {
$(accordion.next(0)).setStyle({
height: '0px'
});
});
</script>
</th>
</tr>
</table>
</body>
</html>
Reply With Quote
Bookmarks