JQuery cycle plugin + PNG overlay + Image alt text as title conflict

Question

Hello

I am trying to achive the following:

• Create an image gallery using the JQuery Cycle plugin that shows images with titles (taken from the alt text)
• Each image has a PNG absolutley posiioned over the top to achieve rounded corners effect

Here's my gallery HTML:

<div id="slideshow" class="pics">

<div class="photo-container" >
<img src="/path/to/image" alt="alt text as title" />
<img class="mask" src="path/to/mask" />
</div>

</div><!-- /slideshow -->

<div id="title"></div>

Here's my Jquery gallery function:

$(function() {

$('#slideshow').after('<div id="nav" class="nav"><span style="margin: 0 5px 0 30px;">next image</span>').cycle({
fx:     'fade',
timeout: 0,
cleartypeNoBg: true,
pager:  '#nav',
next:    '#slideshow',
before: onBefore
});
function onBefore() {
$('#title').html(this.alt);
}
$('#nav a').after('<span>&gt;</span>')   
});
</script>

Here is my CSS that handles the mask:

.photo-container {
  position: relative; 
  display: block;
  overflow:hidden;
  border: none;
} 

img.mask {
  position: absolute;
  top: 0;
  left: 0;
  overflow:hidden;
  border: none;
}

The above does not output the alt text into the "title" div. When I remove the mask, it works:

<div id="slideshow" class="pics">

<img src="/path/to/image" alt="alt text as title" />

</div><!-- /slideshow -->

<div id="title"></div>

Any ideas why the additonal div / image is casuing the title to not display?

Thank you

Answer 1

In the first line of your code,

$('#slideshow')
    .after('<div id="nav" class="nav"><span style="margin: 0 5px 0 30px;">next image</span>')

it looks like you missed a closing /div tag, so this does not look like it is generating a proper node/element. This is perhaps causing your problems? Compare to the following:

$('#slideshow')
    .after('<div id="nav" class="nav"><span style="margin: 0 5px 0 30px;">next image</span></div>')

Best of luck!
-Mike

Answer 2

"this" is equal to the div. You need to get the alt attribute of the image within the div.

Change that line to: $('#title').html($(this).find('img').attr('alt'));