What's happening is that although mousing over the thumbnails only pauses the slide show, mousing over the larger image is stopping it. This config will eliminate the extra buttons that you don't want and change the stop on the larger image to a pause:
Code:
<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 : true,
//Use true or false
enableTransition : true, //Enable GradientWipe transition in IE 6+? (if true & not IE or an earlier IE, a fade transition will be attempted)
//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 : true,
swapControlVals : false, //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 : 'pause', //What happens onmouseover of larger images if slide show is running
slideTriggerBehavior : 'pause', //What happens when triggers 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 : false //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>
Since I don't think you will be using the Lightbox 2.04a add on, and I know you don't want the buttons, your markup can look like so (goes in the body section):
Code:
<div class="vacthumb"><a class="" href="images/image_01.jpg" name="Caribbean Princess" rel="vfsimage::mouseover" rev="vac"
><img src="images/image_01_tbn.jpg" alt=""></a><a
href="images/image_02.jpg" name="Heidi & Heather" rel="vfsimage::mouseover" rev="vac"
><img src="images/image_02_tbn.jpg" alt=""></a><a
href="images/image_03.jpg" name="Corn Dog (Waldo)" rel="vfsimage::mouseover" rev="vac"
><img src="images/image_03_tbn.jpg" alt=""></a><a
href="images/image_04.jpg" name="Tree House" rel="vfsimage::mouseover" rev="vac"
><img src="images/image_04_tbn.jpg" alt=""></a><a
href="images/image_05.jpg" name="Freedom Pond" rel="vfsimage::mouseover" rev="vac"
><img src="images/image_05_tbn.jpg" alt=""></a><a
href="images/image_06.jpg" name="Pigs" rel="vfsimage::mouseover" rev="vac"
><img src="images/image_06_tbn.jpg" alt=""></a><a
href="images/image_07.jpg" name="Margaret Todd (rigging)" rel="vfsimage::mouseover" rev="vac"
><img src="images/image_07_tbn.jpg" alt=""></a><a
href="images/image_08.jpg" name="Margaret Todd (starboard bow)" rel="vfsimage::mouseover" rev="vac"
><img src="images/image_08_tbn.jpg" alt=""></a><a
href="images/image_09.jpg" name="Figaro" rel="vfsimage::mouseover" rev="vac"
><img src="images/image_09_tbn.jpg" alt=""></a><a
href="images/image_10.jpg" name="Rock Sculpture" rel="vfsimage::mouseover" rev="vac"
><img src="images/image_10_tbn.jpg" alt=""></a>
</div>
<div id="vac"></div>
Be sure to copy the styles (minus those for the buttons you are not using) and put them in the head of your page:
Code:
<style type="text/css">
/* All Styles Optional */
body {
color: #ddd;
background-color: #000;
margin: 0;
padding: 0;
}
.content {
margin: 15px 10px;
}
#container {
margin-top: 1em;
}
img {
vertical-align: middle;
border: none;
}
.vacthumb img {
border: 1px solid #000;
height: 56px;
width: 75px;
padding: 1ex;
margin-bottom: 1ex;
}
.vacActive img {
border: 1px solid #ccc;
}
#vac {
margin: 1em;
height: 425px;
width: 400px;
float: left;
position: relative;
background-color:#666;
}
</style>
Put the script call in the head of your page, right after the styles and before the configuration:
Code:
<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>
Save the minified version of the main script (right click on the below and choose 'Save As'):
http://home.comcast.net/~jscheuer1/side/vfs/vfs_min.js
and place it in the the same folder as your page.
Need help!!
Thank you
Reply With Quote
Bookmarks