ok so I’m having a bit of trouble trying to get this concept to work every tutorial or option i try has failed and I’m at a dead end. I’m hoping one of you gurus can give me some pointers or at least point me in the right direction…
Thanks in advance.
here is a link to my page so you can see where I’m trying to implement this.
http://jasonhardwick.com
and here is the code I’m using…
<!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" xml:lang="en" lang="en">
<html>
<head>
<title>jason hardwick : what i do</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="js/mootools.js"></script>
<link rel="stylesheet" href="css/custom-nivo-slider.css" type="text/css" media="screen" />
<link href="css/tutorsty.css" rel="stylesheet" type="text/css" />
<link href="css/flexcrollstyles.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src="js/flexcroll.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
var $jx = jQuery.noConflict();
$jx(window).load(function() {
$jx('#slider').nivoSlider({
effect:'fade', //Specify sets like: 'fold,fade,sliceDown'
slices:1,
animSpeed:1000, //Slide transition speed
pauseTime:9000,
startSlide:0, //Set starting Slide (0 index)
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
controlNav:true, //1,2,3...
controlNavThumbs:false, //Use thumbnails for Control Nav
controlNavThumbsFromRel:false, //Use image rel for thumbs
controlNavThumbsSearch: '.jpg', //Replace this with...
controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
keyboardNav:true, //Use left & right arrows
pauseOnHover:false, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){} //Triggers after all slides have been shown
});
});
</script>
<link rel="stylesheet" href="css/videobox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/videobox.js"></script>
<style type="text/css">
<!--
menu {
font-family: jh_font, Verdana, Geneva, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: lighter;
color: #999;
}
body {
background-color: #F3F4F4;
font-family: jh_font, Verdana, Arial, sans-serif;
font-size: small;
color: #666;
font-weight: lighter;
}
.style3 {
color: #98D36F;
font-size: 12px;
}
.style5 {font-size: 12px; }
.style6 {
color: #98D36F;
font-size: 24px;
}
.style7 {font-size: 18px}
.style8 {
font-size: 12px;
text-decoration: line-through;
color: #98D36F;
}
a:link {
color: #666666;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #666666;
}
a:hover {
text-decoration: none;
color: #98D36F;
}
a:active {
text-decoration: none;
color: #98D36F;
}
.style9 { color: #98D36F;
font-size: 24px;
font-style: italic;
}
.style10 { font-size: 18px;
font-style: italic;
}
-->
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (JH.ai) -->
<table width="1024" height="768" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td colspan="3" align="left" valign="top">
<img src="images/index_01.jpg" width="1024" height="37" alt=""></td>
</tr>
<tr>
<td colspan="3" align="left" valign="top">
<img src="images/index_02.gif" width="1024" height="35" alt=""></td>
</tr>
<tr>
<td colspan="3" height="479" align="left" valign="top">
<div id="slider">
<img src="images/index_03_0.jpg" width="1024" height="479" title="" class="20100528145409" alt="Self Promotion : Mow the Lawn" />
<img src="images/index_03_1.jpg" width="1024" height="479" title="" class="20100528145409" alt="Red Hawk : Live the Life" />
<img src="images/index_03_2.jpg" width="1024" height="479" title="" class="20100528145409" alt="Hollywood Casino : Promotional Logo" />
<img src="images/index_03_3.jpg" width="1024" height="479" title="" class="20100528145409" alt="Twisters Bar Logo" />
<img src="images/index_03_4.jpg" width="1024" height="479" title="" class="20100528145409" alt="5k Slot Promo" />
</div></td>
</tr>
<tr>
<td colspan="3" align="left" valign="top">
<img src="images/index_04.gif" width="1024" height="31" alt=""></td>
</tr>
<tr>
<td width="500" valign="top"><table width="500" border="0" cellspacing="0" cellpadding="5">
<tr>
<td> <span class="style5"><a href="#Motion">Motion</a> | <a href="#Print">Print</a> | <a href="#Logos">Logos</a> | <a href="#OOH">OOH</a></span>
<div class='flexcroll' id="scrollDiv" style=" padding : 4px; width : 480px; height : 200px; overflow : auto; z-index:0">
<table width="100%" border="0" cellspacing="0" cellpadding="15">
<tr><td><a name="Motion" id="Motion"></a>Motion</td>
<td><div align="center"><a href="http://www.youtube.com/watch?v=ZfCqVKztENM" rel="vidbox 800 600" title="caption"><img src="portfolio/SM/logo_.jpg" width="200" height="150"></a></div></td>
<td><div align="center"><a href="http://www.youtube.com/watch?v=G-qT37sTg-o" rel="vidbox 800 600" title="caption"><img src="portfolio/SM/logo_2.jpg" width="200" height="150"></a></div></td>
<td><div align="center"><a href="http://www.youtube.com/watch?v=C123glh7x4g" rel="vidbox 800 600" title="caption"><img src="portfolio/SM/logo_3.jpg" width="200" height="150"></a></div></td>
<td><a name="Print" id="Print"></a>Print</td>
<td><div align="center"><a href="portfolio/LG/logo_4.jpg" rel="vidbox 800 600" title="caption"><img src="portfolio/SM/logo_4.jpg" width="200" height="150"></a></div></td>
<td><div align="center"><a href="portfolio/LG/logo_5.jpg" rel="vidbox 800 600" title="caption"><img src="portfolio/SM/logo_5.jpg" width="200" height="150"></a></div></td>
<td><div align="center"><a href="portfolio/LG/logo_6.jpg" rel="vidbox 800 600" title="caption"><img src="portfolio/SM/logo_6.jpg" width="200" height="150"></a></div></td>
<td><div align="center"><a href="portfolio/LG/logo_7.jpg" rel="vidbox 800 600" title="caption"><img src="portfolio/SM/logo_7.jpg" width="200" height="150"></a></div></td>
<td><div align="center"><a href="portfolio/LG/logo_8.jpg" rel="vidbox 800 600" title="caption"><img src="portfolio/SM/logo_8.jpg" width="200" height="150"></a></div></td>
<td><div align="center"><a href="portfolio/LG/logo_9.jpg" rel="vidbox 800 600" title="caption"><img src="portfolio/SM/logo_9.jpg" width="200" height="150"></a></div></td>
<td><a name="Logos" id="Logos"></a>Logos</td>
<td><div align="center"><a href="portfolio/LG/logo_10.jpg" rel="vidbox 800 600" title="caption"><img src="portfolio/SM/logo_10.jpg" width="200" height="150"></a></div></td>
<td><div align="center"><a href="portfolio/LG/logo_11.jpg" rel="vidbox 800 600" title="caption"><img src="portfolio/SM/logo_11.jpg" width="200" height="150"></a></div></td>
<td><div align="center"><a href="portfolio/LG/logo_12.jpg" rel="vidbox 800 600" title="caption"><img src="portfolio/SM/logo_12.jpg" width="200" height="150"></a></div></td>
<td><div align="center"><a href="portfolio/LG/logo_13.jpg" rel="vidbox 800 600" title="caption"><img src="portfolio/SM/logo_13.jpg" width="200" height="150"></a></div></td>
<td><div align="center"><a href="portfolio/LG/logo_14.jpg" rel="vidbox 800 600" title="caption"><img src="portfolio/SM/logo_14.jpg" width="200" height="150"></a></div></td>
<td><div align="center"><a href="portfolio/LG/logo_15.jpg" rel="vidbox 800 600" title="caption"><img src="portfolio/SM/logo_15.jpg" width="200" height="150"></a></div></td>
<td><div align="center"><a href="portfolio/LG/logo_16.jpg" rel="vidbox 800 600" title="caption"><img src="portfolio/SM/logo_16.jpg" width="200" height="150"></a></div></td>
<td><div align="center"><a href="portfolio/LG/logo_17.jpg" rel="vidbox 800 600" title="caption"><img src="portfolio/SM/logo_17.jpg" width="200" height="150"></a></div></td>
<td><div align="center"><a href="portfolio/LG/logo_18.jpg" rel="vidbox 800 600" title="caption"><img src="portfolio/SM/logo_18.jpg" width="200" height="150"></a></div></td>
<td><div align="center"><a href="portfolio/LG/logo_19.jpg" rel="vidbox 800 600" title="caption"><img src="portfolio/SM/logo_19.jpg" width="200" height="150"></a></div></td>
<td><div align="center"><a href="portfolio/LG/logo_20.jpg" rel="vidbox 800 600" title="caption"><img src="portfolio/SM/logo_20.jpg" width="200" height="150"></a></div></td>
<td><div align="center"><a href="portfolio/LG/logo_21.jpg" rel="vidbox 800 600" title="caption"><img src="portfolio/SM/logo_21.jpg" width="200" height="150"></a></div></td>
<td><a name="OOH" id="OOH"></a>OOH</td>
<td><div align="center"><a href="portfolio/LG/logo_22.jpg" rel="vidbox 800 600" title="caption"><img src="portfolio/SM/logo_22.jpg" width="200" height="150"></a></div></td>
<td><div align="center"><a href="portfolio/LG/logo_23.jpg" rel="vidbox 800 600" title="caption"><img src="portfolio/SM/logo_23.jpg" width="200" height="150"></a></div></td>
<td><div align="center"><a href="portfolio/LG/logo_24.jpg" rel="vidbox 800 600" title="caption"><img src="portfolio/SM/logo_24.jpg" width="200" height="150"></a></div></td>
<td><div align="center"><a href="portfolio/LG/logo_25.jpg" rel="vidbox 800 600" title="caption"><img src="portfolio/SM/logo_25.jpg" width="200" height="150"></a></div></td>
<td><div align="center"><a href="portfolio/LG/logo_26.jpg" rel="vidbox 800 600" title="caption"><img src="portfolio/SM/logo_26.jpg" width="200" height="150"></a></div></td>
<td><div align="center"><a href="portfolio/LG/logo_27.jpg" rel="vidbox 800 600" title="caption"><img src="portfolio/SM/logo_27.jpg" width="200" height="150"></a></div></td>
<td><div align="center"><a href="portfolio/LG/logo_28.jpg" rel="vidbox 800 600" title="caption"><img src="portfolio/SM/logo_28.jpg" width="200" height="150"></a></div></td>
<td><div align="center"><a href="portfolio/LG/logo_29.jpg" rel="vidbox 800 600" title="caption"><img src="portfolio/SM/logo_29.jpg" width="200" height="150"></a></div></td>
<td><div align="center"><a href="portfolio/LG/logo_30.jpg" rel="vidbox 800 600" title="caption"><img src="portfolio/SM/logo_30.jpg" width="200" height="150"></a></div></td>
</tr>
</table></div>
<br></td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td align="left" valign="top">
<img src="images/index_06.gif" width="23" height="186" alt=""></td>
<td width="501" valign="top"><table width="501" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3"><p> </p>
<p> </p>
<div align="center" class="style5"></div> <div align="center" class="style8"></div> </td>
</tr>
<tr>
<td width="166"><div align="center"><span class="style5"><a href="bio.html">who i am</a></span></div></td>
<td width="166"><div align="center"><span class="style8">what i do</span></div></td>
<td width="168"><div align="center"><span class="style5"><a href="contact.php">how to reach me</a></span></div></td>
</tr>
</table>
<table width="100%" border="0" align="center" cellpadding="40" cellspacing="0">
<tr>
<td><p><span class="style9"><i>You want to see what I've done, </span><span class="style10"><br />
ok... but I warn you I'm in advertising so my soul has been sold to the client.</span><br>
</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
