Something like:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE></TITLE><!-- InstanceBegin template="/Templates/SGDTemplate.dwt" codeOutsideHTMLIsLocked="false" -->
<META content="text/html; charset=unicode" http-equiv=Content-Type><!-- InstanceBeginEditable name="doctitle" --><!-- InstanceEndEditable --><!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
<link rel="stylesheet" href="lightbox2.04a/css/lightboxautoresize.css" type="text/css" media="screen">
<script src="lightbox2.04a/js/prototype.js" type="text/javascript"></script>
<script src="lightbox2.04a/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="lightbox2.04a/js/lightboxautoresize.js" type="text/javascript"></script>
<style type="text/css">
<!--
body {
background-color: #FFF;
background-image: url(SGDImages/bgroundposs.jpg);
background-repeat: repeat-y;
}
body,td,th {
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
}
.verdana {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #333;
}
.content {
margin: 15px 10px;
}
#container {
margin-top: 1em;
}
img {
vertical-align: middle;
border: none;
}
.vacthumb {
float: left;
width: 100px;
height: 400px;
}
.vacthumb img {
border: 1px solid #000;
height: 56px;
width: 75px;
padding: 1ex;
margin-bottom: 1ex;
}
.vacActive img {
border: 1px solid #ccc;
}
input.vacActive {
border: 2px solid #f9a;
}
#vac {
margin: 1em;
height: 325px;
width: 400px;
float: left;
background-color:#FFFFFF;
}
#vac table {
top:0;
left:0;
}
.vacCount {
position: absolute;
font: normal 80% sans-serif;
top: -1.5em;
left: -1ex;
}
.vacCaption {
position: absolute;
display: block;
text-align: center;
bottom: 2.5em;
left: 0;
width: 400px;
}
.controls {
float:left;
margin-left: 1em;
}
-->
</STYLE>
<script type="text/javascript" src="vfs_min.js">
/* Omni Image View, Fade, and/or Slide Script ©2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/
</script>
<script type="text/javascript">
viewfadeslide.config = { //place comma after each entry except the last
//Use true or false or {Object} containing boolean values for separate primary load areas
enableCaption : true, //Should "title" attribute of link and any paired image's 3rd parameter to be used as caption?
captionTop : false, //Place caption at the top of the image?
makeTitle : true, //Make title attribute for enlarged image from name attribute of trigger link?
hideImgMouseOut : false, //Hide enlarged image when mouse moves out of anchor link? (if enlarged image is hyperlinked, always set to false!)
disableOnClick : true, //Disable default onclick for mouseover triggers?
populateWithFirst : true, //Fire first link in load area group(s) onload?
enableCount : false,
//Use true or false
enableTransition : true, //Enable fade transition in browsers capable of it?
//Use true or false or {Object} containing boolean values or tag name for separate primary load areas
writeNumberButtons : false, //Also requires element with id of load_area_idNum ex: <div id="loadareaNum"></div>
writeControlButtons : false, //Also requires element with id of load_area_idControl ex: <span id="loadareaControl"></span>
useButtons : true, //Allows choosing individual Control buttons by numbers, ex: useButtons : {loadarea: {4 : true, 5 : true}},
//Works off array: 0 = 'Next', 1 = 'Previous', 2 = 'First', 3 = 'Last', 4 = 'Run', 5 = 'Stop' - otherwise just set to true
enableSlideShow : true, //Enable slide show(s) use - true/false or {load_area : delay}
startSlideShow : false,
swapControlVals : true, //true false or object with boolean values - should running/paused state affect buttons?
//Below three (only valid if slide show running) may use 'pause', 'stop' or 'none', boolean objects or global values
slideHoverBehavior : 'stop', //What happens onmouseover of larger images if slide show is running
slideTriggerBehavior : 'pause', //What happens triggers when are activated if slide show is running
slideNumberButtonsBehavior : 'stop', //What happens when numbered buttons are clicked if slide show is running
//Set to true only if using lightbox 2.04a add on and lightbox groups
enableLightBoxGroups : true //Enable writing out all lightbox group links (lightbox[groupname]) links to a display none div? (true/false only)
}; //No comma After last entry in the above (viewfadeslide.config)
</script>
<META name=GENERATOR content="MSHTML 8.00.6001.18828"></HEAD>
<BODY>
<DIV align=center><!-- InstanceBeginEditable name="EditRegion4" --><!-- InstanceEndEditable -->
<TABLE border=0 width=800>
<TBODY>
<TR>
<TD colSpan=2><IMG alt="Sally Graddon Designs" src="SGDImages/banner2.jpg"
width=814 height=216></TD></TR>
<TR>
<TD colSpan=2 align=left>
<DIV align=right><A href="index.html"><IMG border=0 alt=Home
src="SGDImages/home.jpg" width=101 height=49></A><A href="about.html"><IMG
border=0 alt=about src="SGDImages/About.jpg" width=101 height=49></A><A
href="faq.html"><IMG border=0 alt=faqs src="SGDImages/faqs.jpg" width=101
height=49></A><A href="events.html"><IMG border=0 alt=events
src="SGDImages/events.jpg" width=101 height=49></A><A
href="terms.html"><IMG border=0 alt=terms src="SGDImages/terms.jpg"
width=101 height=49></A><A href="links.html"><IMG border=0 alt=links
src="SGDImages/links.jpg" width=101 height=49></A></DIV></TD></TR>
<TR>
<TD vAlign=top width=183><A href="chainmaille.html"><IMG border=0 alt=chainmaille
src="SGDImages/chainmaille2.jpg" width=182 height=68></A><A
href="cmnecklaces.html"><IMG border=0 alt=necklaces
src="SGDImages/necklaces.jpg" width=183 height=30></A><A
href="cmbracelets.html"><IMG border=0 alt=braceets
src="SGDImages/bracelets.jpg" width=183 height=30></A><A
href="cmearrings.html"><IMG border=0 alt=earings
src="SGDImages/earrings.jpg" width=183 height=30></A><A
href="pearl.html"><IMG border=0 alt="pearl jewellery"
src="SGDImages/pearljewellery.jpg" width=183 height=69></A><A
href="pjnecklaces.html"><IMG border=0 alt=necklaces
src="SGDImages/necklaces.jpg" width=183 height=30></A><A
href="pjbracelets.html"><IMG border=0 alt=bracelets
src="SGDImages/bracelets.jpg" width=183 height=30></A><A
href="pjearrings.html"><IMG border=0 alt=earrings
src="SGDImages/earrings.jpg" width=183 height=30></A><A
href="gems.html"><IMG border=0 alt="gem jewellery"
src="SGDImages/gemjewellery.jpg" width=183 height=69></A><A
href="gjnecklaces.html"><IMG border=0 alt=necklaces
src="SGDImages/necklaces.jpg" width=183 height=30></A><A
href="gjbracelets.html"><IMG border=0 alt=bracelets
src="SGDImages/bracelets.jpg" width=183 height=30></A><A
href="gjearrings.html"><IMG border=0 alt=earrings
src="SGDImages/earrings.jpg" width=183 height=30></A></TD>
<TD vAlign=top width=613><!-- InstanceBeginEditable name="maintext" -->
<P class=verdana><br><div class="content">
<div id="container"></div>
<div id="vac"></div>
<div class="vacthumb"><a class="" href="SGDImages/enigmasilver.jpg" title="Maille" name="Maille" rel="vfsimage::mouseover" rev="vac::SGDImages/enigmasilverlarge.jpg::lightbox[vp]::maille"><img src="SGDImages/enigmasilvertbn.jpg" alt=""></a><a class="" href="SGDImages/enigmasilverclose.jpg" title="about" name="about" rel="vfsimage::mouseover" rev="vac::SGDImages/enigmasilvercloselarge.jpg::lightbox[vp]::about"><img src="SGDImages/enigmasilverclosetbn.jpg" alt=""></a></div>
</div><br><br>
</P><!-- InstanceEndEditable --></TD></TR></TBODY></TABLE></DIV><!-- InstanceEnd --></BODY></HTML>
Can't get lightbox 2.04a and onmi image view to work
The page I'm trying it out on is http://www.sallygraddondesigns.co.uk/omniplay.html
Reply With Quote
Lightbox is uploaded now. Is there somewhere I should download any other files which are needed for omni to run from? I copied and pasted vfs_min.js onto a blank page which I saved under that name and uploaded it but for some reason it is appearing as a broken link. I must confess that I hadn't actually noticed that I needed it before. If I can work that out maybe it will all work? I am so sorry that I am so clueless 
Bookmarks