Hover and fade effect

Question

Hello,
I am creating a photo gallery with thumbnails of the images
and would like the thumbs to fade in when hovered over. I can get
the fade in to work mostly except that rather than fading each
image in individually, all images fade in when I hover over one. In
addition, I am unable to make the thumbnails display faded to 50%
when the page first loads. I'm afraid I'm not terribly familiar
with JavaScript so any help would be greatly appreciated.
Here is a link to the draft site:
http://www.cas.umt.edu/draft/bruce%5Fcosta/keith.htm
And here is my relevant code as it is now:
<script type="text/javascript">
var dsBrenan = new Spry.Data.XMLDataSet("data/galleries.xml",
"galleries/brenan/photo");
</script>
<script type="text/javascript">
var gEffectInProgress = null;
var gPendingSetRowIDRequest = -1;
function fadeInContent(notificationType, notifier, data)
if (notificationType != "onPostUpdate")
return;
var effect = new Spry.Effect.Fade('main_image', { to: 100,
from: 0, duration: 1000, finish: function() {
// The region is now showing. Process any pending row change
request.
gEffectInProgress = null;
if (gPendingSetRowIDRequest >= 0)
var id = gPendingSetRowIDRequest;
gPendingSetRowIDRequest = -1;
fadeOutContentThenSetRow(id);
effect.start();
Spry.Data.Region.addObserver('main_image', fadeInContent);
function fadeOutContentThenSetRow(rowID)
if (gEffectInProgress)
gPendingSetRowIDRequest = rowID;
return;
if (rowID == dsBrenan.getCurrentRowID())
return;
gEffectInProgress = new Spry.Effect.Fade('main_image', { to:
0, from: 100, duration: 1000, finish: function() {
dsBrenan.setCurrentRow(rowID);
gEffectInProgress.start();
</script>
<!--detail region for main image-->
<div id="main_image"
spry:detailregion="dsBrenan"><img
src="images/keith_brenan_wave/{dsBrenan::@path}"
class="image"/></div>
</div>
<!--master region for thumbnails-->
<div id="wrapper">
<div id="thumbs" spry:region="dsBrenan"><img
src="images/keith_brenan_wave/{dsBrenan::@thumbpath}"
spry:repeat="dsBrenan" width="100" height="100" onclick=
"fadeOutContentThenSetRow('{ds_RowID}');"
onmouseover="hfade.start();"
onmouseout="hfadeout.start();"/></div>
</div>
</div><!--end content div-->
<!--defines fade in and out for thumbnails-->
<script type="text/javascript">
var hfade = new Spry.Effect.Fade("thumbs", {duration:500,
from:50, to:100});
var hfadeout = new Spry.Effect.Fade("thumbs", {duration:500,
from:100, to:50});
</script>

Answer 1

Hi,
I've moved the definition lines inside the "thumbs" div and
am still unable to get functionality from the hover effects.
Here's my code:
<div id="thumbs" spry:region="dsBrenan">
<img spry:repeat="dsBrenan" id="tn{dsBrenan::ds_RowID}"
src="images/keith_brenan_wave/{dsBrenan::@thumbpath}" width="100"
height="100" onclick= "fadeOutContentThenSetRow('{ds_RowID}');"
onmouseover="hfade.start();" onmouseout="hfadeout.start();" />
<script type="text/javascript">
var hfade = new Spry.Effect.Fade("tn{dsBrenan::ds_RowID}",
{duration:500, from:50, to:100});
var hfadeout = new
Spry.Effect.Fade("tn{dsBrenan::ds_RowID}", {duration:500, from:100,
to:50});
</script>
</div>
Could my code for the fade in and out on the main image be
causing issues with the thumbs? Here is that code:
<script type="text/javascript"> <!--causes large
image in detail region to fade in and out-->
var gEffectInProgress = null;
var gPendingSetRowIDRequest = -1;
function fadeInContent(notificationType, notifier, data)
if (notificationType != "onPostUpdate")
return;
var effect = new Spry.Effect.Fade('main_image', { to: 100,
from: 0, duration: 1000, finish: function() {
// The region is now showing. Process any pending row change
request.
gEffectInProgress = null;
if (gPendingSetRowIDRequest >= 0)
var id = gPendingSetRowIDRequest;
gPendingSetRowIDRequest = -1;
fadeOutContentThenSetRow(id);
effect.start();
Spry.Data.Region.addObserver('main_image', fadeInContent);
function fadeOutContentThenSetRow(rowID)
if (gEffectInProgress)
gPendingSetRowIDRequest = rowID;
return;
if (rowID == dsBrenan.getCurrentRowID())
return;
gEffectInProgress = new Spry.Effect.Fade('main_image', { to:
0, from: 100, duration: 1000, finish: function() {
dsBrenan.setCurrentRow(rowID);
gEffectInProgress.start();
</script>
Thank you for your patience and time.