Getting jQuery SlideViewer to work
I am trying to use the
JQuery SlideViewer plug-in.
I am putting all my HTML inside an editable region in a Template. I've followed the instructions as closely as
I can, but I am not getting the numbered red boxes along the bottom, only the larger Images stacked, one on top of the other. I don't know if there is some HTML that I am missing or not.
I am unsure where the script for the sliding function goes:
<script type="text/javascript"> $(window).bind("load", function() { $("div#mygalone").slideView() }); </script>
I have bolded all the HTML that is copied from the instructions:
<!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=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Racing Mind Press</title>
<!-- TemplateEndEditable -->
<link href="p7spepper/p7spepper01.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
<style>
#menubar, .#menubar ul a {height: 1%;}
#inner, #contentwrapper, .footer ul a {zoom: 1; height: 1%; overflow: visible;}
.sidebarwrapper {display: inline; width: 194px;}
</style>
<![endif]-->
<!--[if IE 6]>
<style>
.sidebarwrapper {width: 200px;}
</style>
<![endif]-->
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.easing.1.2.js" type="text/javascript"></script>
<script src="jquery.slideviewer.1.2.js" type="text/javascript"></script>
</head>
<body>
<div id="outer">
<div id="inner"><!-- TemplateBeginEditable name="Masthead" -->
<div id="masthead"><a href="index.html"></a><img src="Images/racing-mind-masthead.gif" alt="masthead animated" width="900" height="100" /></div>
<!-- TemplateEndEditable -->
<div id="menubar">
<ul class="menu">
<li class="first"><a href="graphic_services.html">Graphic Services </a></li>
<li><a href="art_for_sale.html">Art for Sale</a></li>
<li><a href="publications.html">Publications</a></li>
<li><a href="tshirts.html">T-Shirts</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="fervor.html">Fervor</a></li>
<li><a href="info.html">Info</a></li>
</ul>
</div>
<div id="contentwrapper">
<div class="maincolumn">
<div class="maincontent">
<p class="header">Graphic Design for Print and Web </p>
<p>I will do any type of graphic design work for you. Whether it is for print or for web.</p>
<p class="subtitle">Photo Retouching </p>
<p>I also have many years of experience with Photo Retouching. I have retouched hundereds of my own photographs. It's best to submit a high resolution scan of 300dpi or highter. Please contact for rates. <br />
<br />
</p>
<table width="600" border="0">
<tr>
<td colspan="2">
<div id="mygalleryinpost10.12.2006" class="svw">
<ul>
<li><img src="Images/photo-retouch/neil-with-cat-chubby-done.jpg" alt="Holding Chubby" width="748" height="550" /></li>
<li><img src="Images/photo-retouch/chris-baseball_before.jpg" alt="Little League" width="748" height="550" /></li>
<li><img src="Images/photo-retouch/1990-larry-hacky-sack-before.jpg" alt="Larry with Hacky Sack" width="748" height="550" /></li>
<li><img src="Images/photo-retouch/chris-at-beach-orig.jpg" alt="Christopher at the Beach" width="748" height="550" /></li>
<!--eccetera-->
</ul>
</div>
</td>
</tr>
<tr>
<td class="bold">Before</td>
<td class="bold">After</td>
</tr>
<tr>
<td colspan="2" class="bold"> </td>
</tr>
</table>
</div>
</div>
<div class="clearfloat"> </div>
</div><div class="footer">
<div class="footercolumn1">
<p>© 2010 Racing Mind Press Stay (+) Supporter of the campaign to stamp out Negativity (-) </p>
</div>
<div class="footercolumn2">
<ul>
<li><a href="#">Footer Link 1</a></li>
</ul>
</div>
</div>
</div></div>
<script type="text/javascript"> $(window).bind("load", function() { $("div#mygalone").slideView() }); </script>
</body>
</html>