PDA

View Full Version : Can't get lightbox 2.04a and onmi image view to work



sal
10-31-2009, 06:12 PM
1) Script Title: lightbox2.04a and omni image view

2) Script URL (on DD): http://www.dynamicdrive.com/forums/showthread.php?t=39549

3) Describe problem: I am very new to all of this but I am trying very hard and am slowly getting my head around things but I feel as though I am bashing my head against the wall at the moment. I want to use Omni Image View on my website but as hard as I try I can't get it to work. The thumbnails show up but nothing happens when I move my mouse over them and if I click on a thumb it opens the picture in a new window rather than using lightbox as it should be. I have had lightbox 2.04 running fine and have downloaded lightbox 2.04a as instructed in the thread above and think I am using the right paths. Please can anyone help me? I am sure that the answer is very simple and I am just being stupid but I can't work out where I am going wrong. As you will see I am only working with the original and haven't even attempted to incorporate it into my web page yet as I wanted to make sure I could get it to work first :rolleyes: The page I'm trying it out on is http://www.sallygraddondesigns.co.uk/omniplay.html

I'm very sorry for being such an idiot, please be gentle. Thanks very much for reading this.
Sal

jscheuer1
10-31-2009, 06:31 PM
I may not be gentle, but I'm effective.

Anyways, none of your external scripts or style:


<link rel="stylesheet" href="lightbox2.04a/css/lightbox.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/lightbox.js" type="text/javascript"></script>


and:


<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>

are being found by the page. Have you uploaded them to the server?

sal
10-31-2009, 07:19 PM
Rats-sorry :( 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 :(

Thankyou so much for your help-omni is exactly what I have been looking for and I would love to make it work eventually!

Edited to say-thankyou so much for your help-I was missing the vfs file (and then managed to call it vsf). It seems to be pretty much working now. Now I just need to work out image sizes and have a bit more of a play and try to get it to work on my web pages. Thankyou again-you are an absolute star!

sal
11-03-2009, 03:41 PM
Hi again,
I was just wondering-is there an way to put the thumbnails beneath the bigger image rather than above it?

Thanks again,
Sal

jscheuer1
11-03-2009, 04:29 PM
It's all just ordinary HTML, so you may put the thumbs wherever you like.

sal
11-04-2009, 12:47 PM
Thankyou so much for your reply. I've been playing around trying to get the layout right but I'm struggling. I'm sure that it would be pretty simple for most people but I'm still very new to html and tables and layout still confuse me. I would like to put the thumbnails to the right of the main image (one thumbnail below the other) with text underneath the picture, (or possibly to have the thumbnails underneath the main picture with text to the right of them all).

Also, when I try to move the main image up (to align top rather than middle) it seems to double up the image-the new, higher image on top of the old, lower-what am I missing?

If you could help me at all I would be very grateful.
Thanks again,
Sal

ETA a link to my test page http://www.sallygraddondesigns.co.uk/omniandmywebenigma.html

jscheuer1
11-04-2009, 02:35 PM
Something like:


<!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>

sal
11-04-2009, 03:32 PM
Thankyou so much-that is brilliant! What do I need to change to alter the position of the main picture (up and left a bit so that it is similar to the alignment on my other pages). I think I will use a slightly bigger picture in the end (maybe around 430 wide).

I want to add some text below the picture in the same font and layout as the rest of the website rather than as a title-how do I go about doing that?

Thankyou again for your help and patience.

jscheuer1
11-04-2009, 04:29 PM
Most of your text on that page are really images. So to keep things consistent font-wise, you would need to make up an image of this added text. If you don't want the caption, turn it back off here:


enableCaption : false, //Should "title" attribute of link and any paired image's 3rd parameter to be used as caption?


To get an image (your text image as discussed above) below the the larger image, and to move both of these, you should have a wrapper div for the:


<div id="vac"></div>

division. Make this wrapper float: left; and remove the float from the vac division. Make the wrapper the same dimensions as the vac division, only a little taller, to accommodate your text image's height. Now, just making your larger images larger will appear to move them to the top and left (they are centered in the display area vac division). The vac division may also be made shorter or taller, narrower or wider, as long as it is still as wide as your widest image that will go in it, and still as tall as the tallest image that will go in it. The closer its dimensions are to the actual dimensions of the images displayed within it, the further it will appear to move to the top and left. It will still have to remain within the table cell you have it in though, so any margin, padding, cellpadding, cellspacing of that cell will affect this a little, as will margins or padding on the top or left of the vac division or its wrapper. Remember, if you change the vac division's dimensions, change the wrapper's dimensions accordingly. The wrapper may be wider, but this will push the thumbnails further to the right. If they go to far too the right, they will be forced to wrap (line break) to beneath the wrapper. The wrapper should be a bit taller, to accommodate the added height of this text image we've been discussing. Place the text image as the last thing in the wrapper division.

sal
11-04-2009, 04:47 PM
Sorry-I should have been clearer-on the rest of my website I have bog standard text (verdana, 14px) in the main body-does the same still apply if I am using that rather than an image of text?

jscheuer1
11-04-2009, 04:55 PM
More or less, only you place the text where I was saying to put the image, perhaps in a span or in another div so you can more easily control its style and position. Set its font and font-size via style, add any margin or padding, etc. to influence it's exact placement. For instance, to center it under the vac division image, make it as wide (style width) as the vac division and text-align: center;

sal
11-04-2009, 05:45 PM
Thankyou again for all of your help-it's very kind of you to spend so much time helping me. Once I have worked out what a wrapper is I think I will be pretty much there! :)
Take care and thankyou,
Sal

jscheuer1
11-04-2009, 06:09 PM
A wrapper is just that, it wraps around another element, ex:



<div id="vacWrapper">
<div id="vac"></div>
</div>

sal
11-05-2009, 09:04 AM
For some reason I am still getting the text to the right of the thumbnails-I *think* I have done what you said and I'm not sure what I've done wrong.


<!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 {
margin: 1em;
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: 0em;
height: 285px;
width: 380px;
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;
}
.vacWrapper{
float: left;
height: 300px;
width: 380px;
}
.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 : false, //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="vacWrapper"><div id="vac"></div>
<div class="vacthumb"><a class="" href="SGDImages/enigmasilver380.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>Hello</div><br><br>
</P><!-- InstanceEndEditable --></TD></TR></TBODY></TABLE></DIV><!-- InstanceEnd --></BODY></HTML>

jscheuer1
11-05-2009, 11:41 AM
<!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 {
margin: 1em;
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: 0em;
height: 285px;
width: 380px;
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;
}
#vacWrapper {
float: left;
height: 400px;
width: 380px;
}
#vacWrapperText {
float: left;
text-align: center;
width: 380px;
margin-top:1em;
}
.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 : false, //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="vacWrapper"><div id="vac"></div><div id="vacWrapperText">Hello</div></div>
<div class="vacthumb"><a class="" href="SGDImages/enigmasilver380.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>

<br><br>
</P><!-- InstanceEndEditable --></TD></TR></TBODY></TABLE></DIV><!-- InstanceEnd --></BODY></HTML>

sal
11-05-2009, 12:10 PM
Thankyou so much again!