A JQuery Cloud Zoom Query

[steveygaga]

Hey guys
I am implementing Cloud Zoom, because I love how it works and functions with the gallery feature, but I have a question about the credit/caption feature... I racked my brains constantly for about 48 hours and couldn't work out a fix so I asked Prof Cloud, but he's busy, so I'd really appreciate it if anyone can help
me!!

http://www.professorcloud.com/mainsite/cloud-zoom.htm

Basically, instead of having the credit appear in the Zoom window, I wanted to move it to over the main large image, I worked out that it is this bit that calls the function:

// Add the title from title tag.
if (sImg.attr('title') && opts.showTitle) {
zoomDiv.append(format('<div class="cloud-zoom-title">%0</div>', sImg.attr('title'))).find(':last').css('opacity', opts.titleOpacity);
}

But no matter where I move it, it doesn't seem to go where I want it!

I added this code in to make the title change dynamically, so each credit will be relative to that one particular image:

$('#' + data.useZoom + ' img').attr('title', event.data.attr('title'));

Which is why I'd like it to be moved from instead of over the zoom window to the actual image, on click, then on hover, the credit stays and the zoom window opens!

Any help would be GREATLY appreciated!!

 

[trolleymusic]

I've never used it before - but I would say that you could add the following to your CSS:

#cloud-zoom-big : {
overflow: visible; /* this would otherwise hide the title */
}

.cloud-zoom-title : {
top: -20px; /* or however much you want it to go up */
}

You can also use those two element declarations to style the elements further - eg, if you want to change the background of the .cloud-zoom-title you can do it in the CSS.