JQuery cycle plugin + PNG overlay + Image alt text as title conflict
- by Dave
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>></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
